Embedding Mapbox Maps in a web page

One of the simplest ways of deploying a web map onto a web page is by embedding it into the HTML code using the tags. Our demonstration will show how to embed a mapbox project initiated in the Mapbox studio in a simple web page of your making.

 

Download the sample dataset- LowGDPAfrica.shp, Urban_areas.shp;

 

We will start in Mapbox Studio with the sample dataset. Launch Mapbox Studio and Click on Project. Choose the source option and click Add vector tile source.

These steps have been demonstrated in previous posts on using Mapbox Studio.

Red boxed area on the screenshot shows the sample datasets after they were added as vector source layers into Mapbox Studio.

b

 

Click on settings (red box 1) and fill in the details in the red boxed area 2–Name, Description and Attribution. Set the zoom extents of the layer. Click Save As to save a local copy of the .tm2source file.

c

 

Click Settings and Upload to Mapbox.

d

 

When the Upload is complete, open your Mapbox online account > Data > Uploads. Copy the ID of the uploaded source layer.

Return back to Mapbox Studio.

e

 

Next we choose a Style in the Mapbox Studio. Click on Project > New project > Style

f

 

For the demo, we select OSM BRIGHT 2 as the style. (red boxed area where the cursor finger is positioned)

g

 

Click on Layers > Change source

h

 

In the Source window at the red boxed area, add a comma at the end of the map description and then paste the Source ID copied from Mapbox online editor earlier. Click Apply

i

 

In the Layers window the source layer is added. The sample datasets loaded earlier as vector source files can be seen in the red boxed area. Click Save as to save the .tmz file locally.

j

 

Click the + button (red boxed area to the far upper right of the screenshot) and type in a name. Click New tab to add into the style window pane.

k

 

Write out the above lines of code into the new tab window. The result is shown in our example to the right of the image showing the lines of CartoCSS code.

Note that in the example code we substituted a default marker (marker-fill) for a custom marker (marker-file). You can decide to download and use our custom marker- sunsmile.svg.

image      image

 

Click on Settings and Add Name, Description, Attribution and Set the Zoom button parameters.Click Save As to save the Style locally as a .tm2 file. Upload the Style to Mapbox Online Editor.

r

 

Return to your Mapbox account > Styles. The uploaded style should appear. Click on the Style > New project

s

 

The style map opens in the map window of Mapbox Editor.

t

 

Click on Projects > then click on Settings. Fill in the Name of your project and description. Click Save to save the map as a project.

o

 

Click on Project (red box 1) > Info (red box 2) and Go to the Embed section, right click and Copy.

u

 

Create a new file in prefered text editor. Write out (don’t copy and paste please) the simple HTML code below-


<html>

<head>

<title> Add your Title</title>

</head>

<body style=”background:yellow;”>

<h3><em style=”font-size:24px;”> Major Urban Centres in Africa’s poorest nations</h3></em>

<<<<<Insert the Copied embed code here>>>>>>

</body>

</html>


Save the text editor file as .html. Open in a modern browser to view results.

 

Results are shown in the screenshot.

x

 

Thank you for following this demonstration. Enjoy your practice.

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