Solved

How to combine JSON and GeoJSON files for Leaflet

Posted on 2013-11-04
17
1,467 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 42

Expert Comment

by:Rob Jurd, EE MVE
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
 

Author Comment

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

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 108

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 108

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 108

Expert Comment

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

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 108

Expert Comment

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

Expert Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now