Solved

How to combine JSON and GeoJSON files for Leaflet

Posted on 2013-11-04
17
1,555 Views
Last Modified: 2013-12-06
I have two JSON files, one is a GeoJSON file and comes from a local source. It contains geometry for the counties as well as the County name and FIPS/GEOID identifiers.

The other JSON file is actually one of several topics that the user can request. This JSON file is hosted remotely and contains the FIPS/GEOID attribute as well as data such as population, tax revenue, acres of farmland etc.

What I want to do is set it up so that when the page first loads just the GeoJSON is loaded. The user selects which topic they are interested in viewing.

This data should then be somehow combined so that it can be used by the map (as well as some charts) on the page. So my question is how do I combine this data together?  Or do I keep it separate and when creating the chart I have to do two lookups?

An example of a combined  structure might look like this


"type": "FeatureCollection",
"features": [
  {
    "type": "Feature",
    "properties": {
      "FIPS": "19119",
      "COUNTY": "Lyon"
       "attributes": [
         "population": "95000",
          "cropAcres": "204560",
          "malePop": "47034"
       ] 
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [
            -96.599154418445536,
            43.500333547026258
          ],
          [
            -96.58646743128935,
            43.500300486630792
          ],
          [
            -96.56643811913024,
            43.500234422662139
...
          ],

Open in new window

0
Comment
Question by:lvmllc
17 Comments
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 39632964
Parse the two json strings into your own object which you can stringyfy..
var myObject = {
	json1 : JSON.parse(json1),
	json2: JSON.parse(json2)
}
var combinedJSON = JSON.stringify(myObject)

Open in new window


Check this fiddle : http://jsfiddle.net/VUXEA/
0
 

Author Comment

by:lvmllc
ID: 39635141
This answers part of my question, but I am not sure how it would help combine the following where the common field is the FIPS. In the example I have just data for 2 counties, but in the project I have over 50 and they will not always be in the same order.  Note that in the jsonSchools I have swapped the order the county are listed in the json.

jsonPop = '[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "COUNTY": "Lyon",
            "attributes": {
                "population": "95000",
                "malePop": "47034"
            }
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "COUNTY": "Fromer",
            "attributes": {
                "population": "83500",
                "malePop": "42037"
            }
        }
    }
]'


var jsonSchools = '[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "attributes": {
                "eSchools": 12,
                "mSchools": 4,
                "hSchools": 3
            }
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "attributes": {
                "eSchools": 16,
                "mSchools": 6,
                "hSchools": 5
            }
        }
    }
]';




var jsonCounty ='[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "COUNTY": "Lyon"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -104.05,
                        48.99
                    ],
                    [
                        -97.22,
                        48.98
                    ],
                    [
                        -96.58,
                        45.94
                    ],
                    [
                        -104.03,
                        45.94
                    ],
                    [
                        -104.05,
                        48.99
                    ]
                ]
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "COUNTY": "Fromer"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -103.05,
                        47
                    ],
                    [
                        -97.22,
                        48.98
                    ],
                    [
                        -97,
                        45.94
                    ],
                    [
                        -104.03,
                        45.94
                    ],
                    [
                        -103.05,
                        47
                    ]
                ]
            ]
        }
    }
]';
0
 
LVL 43

Expert Comment

by:Rob
ID: 39698289
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:lvmllc
ID: 39698290
Still looking for an answer to this question - I can restate it.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39698349
Are you open to the idea of doing this in PHP on the server?
0
 

Author Comment

by:lvmllc
ID: 39698417
My issue is that the data comes from two different sources. The geometry I have, the other JSON is returned via an API request to the US Census or other data agency - so when I get he data I would like to combine it dynamically into one JSON on the client side. This will not need to be saved as some of my data sources that will be combines are updated daily (i.e. average gas price/state) and the JSON acquired is then 'joined' to the geometry and then used by my mapping functions.

I suppose I could keep the two JSON separate, but that requires that during the map build that I do a search filter of the acquired JSON for the values I need for each map feature.

Just seems it would be better to join these before I start using them with the map.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39698441
Can you give me access to the two JSON strings?  That is, if you're open to the idea of doing the "merge" in PHP on the server.  As I envision it, the result would be a JSON file on the server that could be sent to the client side.
0
 

Author Comment

by:lvmllc
ID: 39698638
The two data samples are as follows.  you can just put both into single .js files.  I don't have the data in an existing php. the other sources are all key access - thus the reason I put together this sample data

jsonPop = '[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "COUNTY": "Lyon",
            "attributes": {
                "population": "95000",
                "malePop": "47034"
            }
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "COUNTY": "Fromer",
            "attributes": {
                "population": "83500",
                "malePop": "42037"
            }
        }
    }
]'


var jsonSchools = '[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "attributes": {
                "eSchools": 12,
                "mSchools": 4,
                "hSchools": 3
            }
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "attributes": {
                "eSchools": 16,
                "mSchools": 6,
                "hSchools": 5
            }
        }
    }
]';

Open in new window



The combined output would look like

var jsonCounty ='[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "COUNTY": "Lyon"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -104.05,
                        48.99
                    ],
                    [
                        -97.22,
                        48.98
                    ],
                    [
                        -96.58,
                        45.94
                    ],
                    [
                        -104.03,
                        45.94
                    ],
                    [
                        -104.05,
                        48.99
                    ]
                ]
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "COUNTY": "Fromer"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -103.05,
                        47
                    ],
                    [
                        -97.22,
                        48.98
                    ],
                    [
                        -97,
                        45.94
                    ],
                    [
                        -104.03,
                        45.94
                    ],
                    [
                        -103.05,
                        47
                    ]
                ]
            ]
        }
    }
]';

Open in new window

0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39698706
I'll be glad to try to do this in PHP, but before I start the research project...
Are you open to the idea of doing this in PHP on the server?
0
 

Author Comment

by:lvmllc
ID: 39698807
yes - I have PHP and do use it to bring in some data. Only requirement would be that I would likely access the data via an AJAX call to the PHP - so it could return the new combined JSON.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39698947
Gotcha.  I'll see what I can do with the test data.
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 400 total points
ID: 39699638
Please see http://www.laprbass.com/RAY_temp_lvmllc.php

Moving parts start on line 130.

<?php // RAY_temp_lvmllc.php
error_reporting(E_ALL);
echo '<pre>';

// SEE http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28285333.html#a39698947

// TEST DATA SETS
$jsonPop = '[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "COUNTY": "Lyon",
            "attributes": {
                "population": "95000",
                "malePop": "47034"
            }
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "COUNTY": "Fromer",
            "attributes": {
                "population": "83500",
                "malePop": "42037"
            }
        }
    }
]'
;
$jsonSchools = '[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "attributes": {
                "eSchools": 12,
                "mSchools": 4,
                "hSchools": 3
            }
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "attributes": {
                "eSchools": 16,
                "mSchools": 6,
                "hSchools": 5
            }
        }
    }
]'
;
$jsonCounty ='[
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19119",
            "COUNTY": "Lyon"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -104.05,
                        48.99
                    ],
                    [
                        -97.22,
                        48.98
                    ],
                    [
                        -96.58,
                        45.94
                    ],
                    [
                        -104.03,
                        45.94
                    ],
                    [
                        -104.05,
                        48.99
                    ]
                ]
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "FIPS": "19118",
            "COUNTY": "Fromer"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -103.05,
                        47
                    ],
                    [
                        -97.22,
                        48.98
                    ],
                    [
                        -97,
                        45.94
                    ],
                    [
                        -104.03,
                        45.94
                    ],
                    [
                        -103.05,
                        47
                    ]
                ]
            ]
        }
    }
]'
;

// MAKE OBJECTS FROM THE JSON STRINGS
$objPop = json_decode($jsonPop);
$objSch = json_decode($jsonSchools);
$objCty = json_decode($jsonCounty);

// DO THEY LOOK RIGHT? YES.
// var_dump($objPop, $objSch, $objCty);

// MERGE THE OBJECT "attributes" OF SCHOOLS
foreach ($objPop as $ptr => $pop)
{
    // GET THE FIPS CODE TO MATCH WITH THE OTHER OBJECTS
    $fipsPop = $pop->properties->FIPS;

    // DO OBJECT "attributes" FIRST
    $attrPop = $pop->properties->attributes;
    foreach ($objSch as $sch)
    {
        $fipsSch = $sch->properties->FIPS;

        // SKIP THIS OBJECT IF THE FIPS DOS NOT MATCH
        if ($fipsPop != $fipsSch) continue;

        // ACQUIRE THE "attributes"
        $attrSch = $sch->properties->attributes;
        foreach ($attrSch as $key => $val)
        {
            $attrPop->$key = $val;
        }
    }

    // REPLACE THE ELEMENT IN THE ARRAY OF OBJECTS
    $objPop[$ptr] = $pop;
}

// MERGE THE OBJECT "geometry" OF COUNTY
foreach ($objPop as $ptr => $pop)
{
    // GET THE FIPS CODE TO MATCH WITH THE OTHER OBJECTS
    $fipsPop = $pop->properties->FIPS;

    // FIND THE "geometry" ELEMENT
    foreach ($objCty as $cty)
    {
        $fipsCty = $cty->properties->FIPS;

        // SKIP THIS OBJECT IF THE FIPS DOS NOT MATCH
        if ($fipsPop != $fipsCty) continue;

        // ACQUIRE THE "geometry"
        $pop->geometry = $cty->geometry;
    }

    // REPLACE THE ELEMENT IN THE ARRAY OF OBJECTS
    $objPop[$ptr] = $pop;
}

// ACTIVATE THIS TO SHOW THE FULLY FLESHED-OUT OBJECT
// var_dump($objPop);

$out = json_encode($objPop);
echo $out;

Open in new window

Best regards, ~Ray
0
 

Author Comment

by:lvmllc
ID: 39699701
Ray - this looks interesting - give me a bit to digest and I will be back with questions etc Friday.
Appreciate your work.
cjs
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39699808
You should be able to install it and run it "as is."
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39701305
Thanks for the points and best of luck with the project, ~Ray
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question