Drawing Mapbox Styles to a web page using mapbox javascript

Mapbox Studio now boasts of an upgrade and many features have a new look. Follow closely our demonstration and

you can get further information from Mapbox Studio documentation pages online.

 

You can download Mapbox Studio online, just google –Mapbox Studio download.

Register for a free Mapbox account online to have access to Mapbox Studio. Mapbox Studio

and Mapbox Editor are accessed via the web so you should have internet connection when working.

 

In this demonstration, we will carry out the following-

– Add data in mbtiles format to using Mapbox Studio.

– Create a map style in Mapbox Studio.

-Use the map style as a layer in a webpage using Mapbox Javascript.

 

 

Download Sample data here- sampledata

(Kindly attribute this sample data to www.mapsnigeriainitiative.wordpress.com)

 

Sign into Mapbox Studio account. Go to Data and click on New dataset(red-boxed)

 

c

 

Click on Select file from storage  location and browse for the target file.

After selecting, click Upload.

Capture-3

 

For this demo, we upload the file named ‘flames’ – mbtiles file format.

Capture-6

 

Now the data is uploaded, Click on Styles (red boxed area 1), and then click on new style to

create the style that would form the basemap.

Capture-7

 

Choose a style. For the demo, we select the Basic map option.

Capture-8

 

Click on Add Layer to add a data uploaded earlier.

Capture-9

 

For the A red box – Select a dataset;

B red box – Scroll down and select the dataset;

C red box – Click on Create layer;

Capture-11

 

The dataset is loaded onto the style.

Capture-16

 

Click on Publish button (red box A), a publish window will open. Click Publish tab

(red box B).

Capture-14

 

Click on the copy button to get the Style URL on the copyboard. Click Okay to finalize

the process and publish the map.

Capture-15

 

The Style URL is inserted into the script to produce the demo map below

Capture-17

 

See live map by clicking the link below:

http://htmlpreview.github.io/?https://github.com/mayotunde/Adding-shapefiles/blob/gh-pages/mapboxgl

See source code below:

maer.html - Notepad-001

 

Download the plain text version of source code by clicking the link below:

https://www.dropbox.com/s/b63mrb3moz5195b/Adding%20mapbox%20layers%20from%20mapbox%20studio%20to%20web%20pages.txt?dl=0

 

 

Thank you for following the blog and your comments and feedback are always welcome.

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