Loading GeoJson Polygon from external URL

Geojson Polygon features from an external URL are loaded in the same manner as point and line features. We use the Jquery $.getJSON function as we did earlier.

 

Download sample data here: https://www.dropbox.com/s/2o7mmdtxh8cd31n/poly.geojson?dl=0

 

Create the web page and load a leaflet powered map with tiles from openstreetmap.org

 

Capture-37

 

Add the geojson from external source using jquery getJSON function

 

$.getJSON(“countries.geojson”, function(data){

L.geoJson(data).addTo(map); });

 

Capture-34

 

Add style and popup

 

var style = {fillColor: ‘#FED976’, color: ‘#4d4d4d’};

$.getJSON(“poly.geojson”, function(data){
L.geoJson(data, {style,
onEachFeature: function(feature, layer){
layer.bindPopup(feature.properties.country);
}}).addTo(map);
});

Capture-35

 

Symbolize using the property –COUNTRY.
$.getJSON(“poly.geojson”, function(data){
L.geoJson(data, {
style: function(feature, layer){
switch(feature.properties.COUNTRY){
case ‘Nigeria’: return {fillColor: ‘#FED976’, color: ‘black’, dashArray: ‘5’};

}},

onEachFeature: function(feature, layer){

layer.bindPopup(feature.properties.COUNTRY)
}}).addTo(map);
});

Capture-36

 

Choropleth map

The property CODE defines numerical value of the number of viewers per 100,000 people in each country.

 

$.getJSON(“poly.geojson”, function(data){
L.geoJson(data, {onEachFeature,
style: function(feature, layer){
var fillColor, p = feature.properties.CODE;
if (p > 800) fillColor = ‘#FED976’;
else if (p > 500) fillColor = ‘#ae7’;
else if (p > 100) fillColor = ‘#e9b50b’;
return {color:’black’, fillColor: fillColor, fillOpacity: 0.35};
},

onEachFeature: function(feature, layer){

layer.bindPopup(feature.properties.CODE)

}}).addTo(map);
});
Capture-38

See live map at Github :

http://mayotunde.github.io/url

Below is the full source code for the example. To download plain text version of the source code, click

https://www.dropbox.com/s/xsp426dzduo8rfw/Loading%20geojson%20polygon%20from%20external%20url.txt?dl=0

After download, save as HTML and open with a modern browser.

Document1-001

 

Thank you for following the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s