Solved

How to combine JSON and GeoJSON files for Leaflet

Posted on 2013-11-04
17
1,414 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Still looking for an answer to this question - I can restate it.
0
 
LVL 108

Expert Comment

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

Author Comment

by:lvmllc
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:lvmllc
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Gotcha.  I'll see what I can do with the test data.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 400 total points
Comment Utility
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
Comment Utility
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
Comment Utility
You should be able to install it and run it "as is."
0
 
LVL 108

Expert Comment

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

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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'…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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)

744 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

12 Experts available now in Live!

Get 1:1 Help Now