Drawing polygon layers to a leaflet map

This post will demonstrate how to draw single and multiple polygon layers to your leaflet map.

We have an array of coordinates for plots from a building site and intend to create a leaflet powered web map of the features.

 

First, we write out the HTML page and load map tiles from OpenstreetMap.org


Document1-001


Next we load a single polygon layer first and draw as layer on the base map. Polygons are drawn using the L.polygon feature. Place the code below the L.tileLayer-


L.polygon([[7.577794326946673,8.998503901433935],[7.577851434795945,8.998572430673164],[7.577988491475764,8.998652380403087],[7.578105560723088,8.998426807051544],[7.577891409660878,8.998289750371725],[7.577794326946673,8.998503901433935]]).addTo(map);

n

 

Then we load more polygon features in the same fashion below the first.

L.polygon([[7.577794326946673,8.998503901433935],[7.577851434795945,8.998572430673164],[7.577988491475764,8.998652380403087],[7.578105560723088,8.998426807051544],[7.577891409660878,8.998289750371725],[7.577794326946673,8.998503901433935]]).addTo(map);
L.polygon([[7.578139824893071,8.99929197914156],[7.578359687549607,8.99941475908389],[7.578456769364435,8.999266281014116],[7.578471046101925,8.9991971816047],[7.578247331649095,8.999094883721964],[7.578139824893071,8.99929197914156]]).addTo(map);
L.polygon([[7.577851730672876,8.99781126877508],[7.578012579816743,8.997460464828633],[7.577798113991832,8.99731110452393],[7.577667902951418,8.997663440915119],[7.577851730672876,8.99781126877508]]).addTo(map);
L.polygon([[7.578562417221803,8.999551816663029],[7.578688052511666,8.999654609172921],[7.578813688700849,8.999443313458185],[7.578670920426703,8.99936907352395],[7.578562417221803,8.999551816663029]]).addTo(map);
L.polygon([[7.577865711533433,8.998252059784761],[7.577989601239152,8.998002756022402],[7.577648754586391,8.99778446088419],[7.577545911714481,8.998069316645683],[7.577865711533433,8.998252059784761]]).addTo(map);

 

o

 

We then style the polygons. At this juncture, we can decide to give a uniform color, weight etc or categorize the polygons with different styles. For this example, we will style with two different colours. The additional code to style is in red text.


L.polygon([[7.579024984415526,8.999229161496656],[7.57911350018793,8.999286268446554],[7.57923628102958,8.999072117384344],[7.57909065740796,8.998989312306946],[7.579024984415526,8.999229161496656]], {fillColor:’#ea7′, color:’black’}).addTo(map);
L.polygon([[7.577891409660878,8.998289750371725],[7.578105560723088,8.998426807051544],[7.578274026225357,8.998129850911937],[7.578039887730711,8.99802420215525],[7.577891409660878,8.998289750371725]], {fillColor:’#e9b50b’, color:’black’}).addTo(map);
L.polygon([[7.578274026225357,8.998129850911937],[7.578105560723088,8.998426807051544],[7.578316857337142,8.998503901433935],[7.578493888881894,8.998255486201797],[7.578274026225357,8.998129850911937]], {fillColor:’#ea7′, color:’black’}).addTo(map);
L.polygon([[7.577794326946673,8.998503901433935],[7.577851434795945,8.998572430673164],[7.577988491475764,8.998652380403087],[7.578105560723088,8.998426807051544],[7.577891409660878,8.998289750371725],[7.577794326946673,8.998503901433935]], {fillColor: ‘#ea7′, color:’black’}).addTo(map);
L.polygon([[7.577988491475764,8.998652380403087],[7.578179799758004,8.99873804082796],[7.578316857337142,8.998503901433935],[7.578105560723088,8.998426807051544],[7.577988491475764,8.998652380403087]], {fillColor: ‘#e9b50b’, color:’black’}).addTo(map);
L.polygon([[7.578179799758004,8.99873804082796],[7.578439637279472,8.998886518897791],[7.578573838611817,8.998629537623117],[7.578316857337142,8.998503901433935],[7.578179799758004,8.99873804082796]], {fillColor: ‘#ea7′, color:’black’}).addTo(map);


p

 

Finally we add interactivity that pops up an information display window when the user mouse clicks on a polygon feature. The added script is highlighted in yellow.

L.polygon([[7.579024984415526,8.999229161496656],[7.57911350018793,8.999286268446554],[7.57923628102958,8.999072117384344],[7.57909065740796,8.998989312306946],[7.579024984415526,8.999229161496656]], {fillColor:’#ea7′, color:’black’}).bindPopup(‘plot 226’).addTo(map);
L.polygon([[7.577891409660878,8.998289750371725],[7.578105560723088,8.998426807051544],[7.578274026225357,8.998129850911937],[7.578039887730711,8.99802420215525],[7.577891409660878,8.998289750371725]], {fillColor:’#ea7′, color:’black’}).bindPopup(‘plot 187’).addTo(map);
L.polygon([[7.578274026225357,8.998129850911937],[7.578105560723088,8.998426807051544],[7.578316857337142,8.998503901433935],[7.578493888881894,8.998255486201797],[7.578274026225357,8.998129850911937]], {fillColor:’#ea7′, color:’black’}).bindPopup(‘plot 116’).addTo(map);
L.polygon([[7.577794326946673,8.998503901433935],[7.577851434795945,8.998572430673164],[7.577988491475764,8.998652380403087],[7.578105560723088,8.998426807051544],[7.577891409660878,8.998289750371725],[7.577794326946673,8.998503901433935]], {fillColor: ‘#ea7′, color:’black’}).bindPopup(‘plot 190’).addTo(map);
L.polygon([[7.577988491475764,8.998652380403087],[7.578179799758004,8.99873804082796],[7.578316857337142,8.998503901433935],[7.578105560723088,8.998426807051544],[7.577988491475764,8.998652380403087]], {fillColor: ‘#ea7′, color:’black’}).bindPopup(‘plot 216’).addTo(map);
L.polygon([[7.578179799758004,8.99873804082796],[7.578439637279472,8.998886518897791],[7.578573838611817,8.998629537623117],[7.578316857337142,8.998503901433935],[7.578179799758004,8.99873804082796]], {fillColor: ‘#ea7′, color:’black’}).bindPopup(‘plot 254’).addTo(map);

 

r

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

See source code of the example below :

doctype html-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