Drawing layers from geojson polygon features using Leaflet

This post will deal with how to draw  geojson polygon features onto web map using leaflet.

Below is a screenshot displaying the simple leaflet map in our web page.

Capture-13


Use a variable object-areas- to load the geojson polygon features

into the source code:

var areas = [{

“type”: “Feature”,
“properties”: {“refugeeType”: “low”},
“geometry”: { “type”: “Polygon”, “coordinates”: [[
[1.17, 23.84], [3.11, 24.79],   [3.78, 24.56],  [6.94, 23.05],
[-3.34, 23.53], [-0.10, 19.38], [4.84, 19.57]
]]
}
}, {
“type”: “Feature”,
“properties”: {“refugeeType”: “low”},
“geometry”: {“type”: “Polygon”,”coordinates”: [[
[3.17, 4.84], [9.11, 8.79], [6.78, 4.56], [4.94, 4.05]
]]
}
}, {
“type”: “Feature”,
“properties”: {“refugeeType”: “high”},
“geometry”: {“type”: “Polygon”, “coordinates”: [[
[25.36, 11.55], [25.08, 6.53], [28.32, 2.30],
[33.82, 1.71], [36.51, 8.94], [35.68, 13.41],
[27.77, 13.21]
]]
}
}];

//Create a variable style to load a CSS style for the polygons

var Style = {
“color”: “#813”, “weight”: 5, “opacity”: 0.65
};

// Use L.geoJson to draw the polygon features and

Style option add CSS to the polygon features

L.geoJson(areas, {
style: Style
}).addTo(map);


Below is a screenshot displaying the layer of geojson polygon features on the base map.

Capture-14

View live map at:

http://htmlpreview.github.io/?https://github.com/mayotunde/polygon/blob/gh-pages/geojsonpolygon.html

Download the plain text version of the source code- https://www.dropbox.com/s/ph6zbtpevnsoxaq/Adding%20geojson%20polygon%20features%20on%20leaflet%20map.txt?dl=0

 

fft-001


Styling the polygons based on their properties

We add a style function- switch- in L.geojson options to assign

fill colors for the polygons based on the value in the

property-refugeeType. if low- purple, high-red.

 

// add the layer to the map and assign a specific color to each polygon based 
on the value expressed for the property-refugeeType	
  L.geoJson(areas, {
    style:function(feature) {  
	switch (feature.properties.refugeeType) {
	case 'low': return {color: "#316"};
	case 'high':   return {color: "#813"};
   	}
    }
}).addTo(map);
   
 Below is a screenshot of the geojson polygons overlaying
the base map.

.Capture-11

Thank you for following the demonstration.

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