Using multiPolygon feature to add multiple polygons to a leaflet powered map

Multipolygons are layers that comprise of several polygons features. L.multiPolygon groups all the polygons under one layer and adds them to the map. A drawback is that the user cannot apply individual styles nor unique popup attributes to the polygon features as in the previous post.

We add using L.multiPolygon feature with each polygon loaded thus [[coordinates] ],

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

b

 

We can also add style to the polygons.

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

 

a

See live map at Github page: https://mayotunde.github.io/multipolygon

See source code 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