Drawing GeoJson Point features onto web maps Mapbox Javascript

Our earlier post demonstrated how to make simple web maps in our web pages using Mapbox js.

GeoJson is simple and straightforward format for loading vector objects to web maps. These vector objects can then be added as objects in the javascript code of a HTML web page. GeoJson has become one of the most popular formats used by web mappers today.

 


We load the geojson features inside the script section of the code.

Note the var geojson is placed above the L.mapbox.map so that the markers will render above

the base map. In addition,  .featurelayer.setGeoJson(geojson); will draw the markers to the map.

vbg-001

 

Below is a screenshot of the result of the added script. The geojson point features are displayed as markers overlaying the base map.

 

Capture-5

Check out the live map by clicking:

http://htmlpreview.github.io/?https://github.com/mayotunde/webmap/blob/gh-pages/geojsonpointmapbox

Download the plain text version of the source code –

https://www.dropbox.com/s/3rujnt4ehhr0p0t/adding%20geojson%20point%20features%20using%20mapbox%20JS.txt?dl=0

 

We hope you enjoyed the demonstration.

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