Reading JSON and converting it with Leaflet.

Working Map

This is just a simple demo on how to show how you can use JSON data in Leaflet. For data, I took a JSON point file, made from data I grabbed fro McDonalds website. It has many fields that I show in the JSON file, I only use the coordinates and 2 attribute fields. You can modify it to bring in more but two is enought to show the process.

For the first layer, I created a group Layer, and just read through the JSON file pulling out the information I wanted like coordinates and two other attributes that I used in the poipup. The second layer is created by reading in the same JSON data and making a GeoJSON data source and using that to create the second layer. Here, I used red circleMarkers instead of the default blue markers. Because this process is slower I added it to the layer control after it was done, Two different methods of creating markers from points from JSON data.

Now the data.(one record)

{
"features": [{
    "geometry": {
        "coordinates": [-73.764769, 42.82065]
    },
    "properties": {
        "jobUrl": "",
        "longDescription": "",
        "todayHours": "05:00 - 23:00",
        "driveTodayHours": "05:00 - 00:00",
        "id": "195500284545-en-us",
        "filterType": ["DRIVETHRU", "WIFI", "GIFTCARDS", "MOBILEOFFERS", "MOBILEORDERS", "INDOORDININGAVAILABLE"],
        "addressLine1": "1517CRESCENT VICHER FERRY RD",
        "addressLine2": "BOSTON REGION",
        "addressLine3": "CLIFTON PARK",
        "addressLine4": "USA",
        "subDivision": "NY",
        "postcode": "12065",
        "telephone": "(518) 383-2543",
        "restauranthours": {
            "hoursMonday": "05:00 - 23:00",
            "hoursTuesday": "05:00 - 23:00",
            "hoursWednesday": "05:00 - 23:00",
            "hoursThursday": "05:00 - 23:00",
            "hoursFriday": "05:00 - 23:00",
            "hoursSaturday": "05:00 - 23:00",
            "hoursSunday": "05:00 - 23:00"
        },
        "drivethruhours": {
            "driveHoursMonday": "05:00 - 00:00",
            "driveHoursTuesday": "05:00 - 00:00",
            "driveHoursWednesday": "05:00 - 00:00",
            "driveHoursThursday": "05:00 - 00:00",
            "driveHoursFriday": "05:00 - 04:00",
            "driveHoursSaturday": "04:00 - 04:00",
            "driveHoursSunday": "04:00 - 00:00"
        },
        "familyevent": [],
        "identifiers": {
            "storeIdentifier": [{
                "identifierType": "SiteIdNumber",
                "identifierValue": "311129"
            }, {
                "identifierType": "NatlStrNumber",
                "identifierValue": "10443"
            }, {
                "identifierType": "Region ID",
                "identifierValue": "21"
            }, {
                "identifierType": "Co-Op",
                "identifierValue": "ALBANY"
            }, {
                "identifierType": "Co-Op ID",
                "identifierValue": "3"
            }, {
                "identifierType": "TV-Market",
                "identifierValue": "ALBANY-SCHENECTADY-TROY, NY"
            }, {
                "identifierType": "TV-Market ID",
                "identifierValue": "10200"
            }],
            "gblnumber": "195500284545"
        },
        "birthDaysParties": "0",
        "driveThru": "0",
        "outDoorPlayGround": "0",
        "indoorPlayGround": "0",
        "wifi": "0",
        "breakFast": "0",
        "nightMenu": "0",
        "giftCards": "0",
        "mobileOffers": "0",
        "restaurantUrl": "https://my.peoplematter.com/USMCD1000890469/Hire/Recruiting/Application/Index?businessUnitId\u003dB9EB879D-66F8-4332-8A26-A6A70006EE85",
        "storeNotice": "",
        "openstatus": "OPEN",
        "identifierValue": "10443"
    }
},

Now the code.

In the head section, I have the list of libraries I used, basically Leaflet, JQuery, and JQuery UI (User Interface), both the JavaScript and CSS CDN sites. 

<!DOCTYPE html>
<html>
<head>
	<title>2 Ways to use JSON</title>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


<style>
      #map {
        width: 600px;
        height: 400px;
      }
 </style>
On to the JavaScript, here I define the JSON file. It's a static file instead of a web service (REST) feed. Since the UREL will generate a CORS error.
</head>
<body>
<div id="map"></div> 
<script> 

//var url = 'https://www.mcdonalds.com/googleapps/GoogleRestaurantLocAction.do?method=searchLocation&latitude=42.837849&longitude=-73.77132&radius=80.45&maxResults=50&country=us&language=en-us&showClosed=&hours24Text=Open%2024%20hr';  

 // a Copy/paste of the url saved as .json to avoid CORS errors

var url = 'MCDon.json'
Defining the basic centerpoint and zoom, also using OpenStreetmap as a background map 


	var map = L.map('map').setView([42.736424, -73.762713], 9); 

	var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
				attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
		
        osm.addTo(map);
I defined a layer group to hold all the markers, it's now empty.
Next Using the JQuery getJSON function, I have it read the JSON data.
I use a 'for loop' to read through the JSON and get the X,Y's and two attribute fields, (addressLine1, and addressLine2)
Then I setup the marker with it's popup, finally adding each marker to the Layer group. These are just the default plain blue markers. 
	
	var mcd = L.layerGroup();
	
	$.getJSON(url, function(data) {
		for (i = 0; i < data.features.length; i++) { 
			var lng = data.features[i].geometry.coordinates[0];
			var lat = data.features[i].geometry.coordinates[1];
			var Line1 = data.features[i].properties.addressLine1;
                        var Line2 = data.features[i].properties.addressLine2;
                        var MCDs = L.marker([lat,lng]).bindPopup("<b>Address: </b>" + Line1 + "</br>Region: " + Line2);
			mcd.addLayer(MCDs);
		
		} 
	
	});
For the second method, I read the JSON, convert it to GeoJSON and then send the GeoJSON to a loadData function.
I used a console.log to verify the GeoJSOn was in the correct format. 
		
		
    // Read JSON and Create GeoJSON from It //////////////////////////////////////////
	var geojson = {};
	
	 $.getJSON(url, function(data) {

		
		geojson['type'] = 'FeatureCollection';
		geojson['features'] = [];
	
		for (i = 0; i < data.features.length; i++) { 
			//console.log(data.features[i].geometry.coordinates);   
			x = data.features[i].geometry.coordinates[1];
			y = data.features[i].geometry.coordinates[0];
		  var newFeature = {
			"type": "Feature",
			"geometry": {
			  "type": "Point",
			  "coordinates": [y,x]
			},
			"properties": {
			  "addressLine1": data.features[i].properties.addressLine1,
			  "addressLine2": data.features[i].properties.addressLine2
			}
		  }
		  geojson['features'].push(newFeature);
		}
		console.log(JSON.stringify(geojson));  //Make sure you now have GeoJSON Data
		
		loadData( geojson );  // Sending GeoJSON to a function to create a layer
	});
    //END Read JSON and Create GeoJSON from It //////////////////////////////////////////
Once it's GeoJSON, I can just consume the geoJSON like any other GeoJSON point lAYER
I made these red Circle Markers as an option. Notice the last line has us adding the layer to the Layer Control.
This is because the control is created before this data is ready to be added to it. 

    /////  New GeoJSON Layer ////

    // Defining popup
        function forEachFeature(feature, layer) {
            var popupContent = "<p><b> Address: </b>"  + feature.properties.addressLine1 + 
                "</br>"+ feature.properties.addressLine2 + "</p>";
            layer.bindPopup(popupContent);
            
        }
        
        // Get GeoJSON data and create features.
        function  loadData( myGeoJSONData ){
        
            sites = L.geoJson(myGeoJSONData, {
            
                onEachFeature: forEachFeature,
                
                    pointToLayer: function(feature, latlng) {
                
                        return L.circleMarker(latlng, {
                        radius:6,
                        opacity: .5,
                        color: "#000",
                        fillColor:  'red',
                        fillOpacity: 0.8
                        });
                    }
                
                });	
        
            sites.addTo(map);

            layerControl.addOverlay(sites, "GeoJSON Layer");  //Adding to control after it's made.
        };
Finally defining and adding the layer control to the map.

    ///Layer Control  ///////////////////////////////////////////////	
    var baseMaps = {
        "Open Street Map": osm
    };	
    
    var overlayMaps = {
            "JSON Layer Group":mcd 
    };	
        
    //Add layer control
    var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
That is it, toss in some closing tags and I am done. My finished script,    My JSON data 
</script> 
</body>
</html>