Creating a Web map using Mapbox Editor

This post will demonstrate how to produce web maps using an online Mapbox account.

Mapbox is an online web mapping platform that has the ability to use and integrate so many forms of web mapping formats.

This demonstration will show the reader how to use the online platform of Mapbox.

Things to note

– Register an online User account with Mapbox.

– Free accounts have their usage limits.

– User must be connected to the web to use the application.

Sign into your user account in Mapbox. On this page on the screenshot, Click Projects (cursor finger).


On the next page, click New project (cursor finger) to start a new project.


The Editor page with a working menu and a base map will open. Style- will allow the user select map styles to apply for the project. For the demo, Streets is selected (cursor finger).


Next, Click on Data (red boxed) and the lower menu (green boxed) will open. Click on import   (cursor finger). For the demo, a kml file of populated cities in the world’s poorest countries is imported.


In the import features window, give the features a Title from the attribute table. For the demo, the attributes of the Name field is used.


Click Style and give each point (known as marker in Mapbox) a size and colour.


Click Symbol and choose a symbol icon for the Points or markers. Put a Description and Click Finish importing.


The screenshot shows the imported data overlaying the base map.


Click on a marker and Add a description of the feature. For the demo, during import, name has been specified as the Title, so automatically each feature has the name attribute set.

User can further customize the style and symbol of each feature inside the info window.


In addition, user can change the base map to suit the temperament of the map design. Here in the demo, the screenshot below shows what the map will llok like when the Comic style is selected as base map for the layer.


Click Save (cursor finger) to save the map.


Click on Data to inspect the features of the data imported.


Click on Project, select the settings tab and give the project a name and description. Click Save and the map is automatically published.


Click Project again (cursor finger) and Info (lower left side of the screenshot) to get the details of the map that has been created. A Map ID was created in Mapbox.


Data- the map layer can be downloaded as Geojson or KML.  Share– the window provides a link to the location of the map online. Embed– provides a HTML code that user can use to add the map to a webpage.

That is it folks!! The web map is ready and published using the Mapbox online editor. In addition, edits can be made to it real time.


Leave a Reply

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

You are commenting using your 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