Creating a simple web map using Mapbox javascript

This post will demonstrate creating web map using Mapbox javascript.

We will do the following using Mapbox javascript:

-Initiate a Mapbox project as a basemap on our web page;
- Add markers on the base map to create a simple web map in the web page.

We create the HTML web page that will enclose the javascripts. In the Head section, we link the mapbox.js website and reference the mapbox.css library online.
Also note that we created the div container for the map.

---

/fontahref=https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js
https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css'
rel='stylesheet' />;

Creating simple web map using Mapbox javascript

---

Below is a screenshot of our example HTML web page above.

---

Next, we insert the script to add the base map. See the section where text colour is red.
Here we bring in the map tiles using the L.mapbox and define the map as ‘mapbox.streets’.

---

/fontahref=https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js
https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css'
rel='stylesheet' />;

Creating simple web map using Mapbox javascript

// Add the mapbox access token and map –‘mapbox.streets’. You can replace the ‘mapbox.streets’ with a Map ID to display your mapbox style as the base map.

L.mapbox.accessToken = 'pk.eyJ1IjoibWF5b3R1bmRlIiwiYSI6IlpFM1Jmck0ifQ.13TB14FKWB328q1q7eEZUQ';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([4.9, 2.6], 4);

---

the screenshot below illustrates the addition of the base map- ‘mapbox.streets’ centred in Africa.

---

Within the we add the markers as L.marker, use the L.icon to add marker options – symbol, colour and size.

---

https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css'
rel='stylesheet' />

Creating simple web map using Mapbox javascript

L.mapbox.accessToken = 'pk.eyJ1IjoibWF5b3R1bmRlIiwiYSI6IlpFM1Jmck0ifQ.13TB14FKWB328q1q7eEZUQ';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([4.9, 2.6], 4);
L.marker([5.56,-0.2], {
    icon: L.mapbox.marker.icon({
    'marker-size': 'large',
        'marker-symbol': 'bus',
        'marker-color': '#fa0'
    })
}).addTo(map);
L.marker([9.02,38.75], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'bus',
        'marker-color': '#fa0'
    })
}).addTo(map);

---

Below is the screenshot showing the two markers added to the javascript appearing on the base map as yellow icons.

---

Let us edit the L.marker icon.

L.marker([9.02,38.75], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'bus',  change the symbol to ‘circle’
        'marker-color': '#f45', change the color to '#f45' 
    })
}).addTo(map);

---

Below is a screenshot reflecting the changes made to the appearance of the second marker.

---

Next we decide to change the base map from ‘mapbox.streets’ to one of our own mapbox projects.

L.mapbox.accessToken = 'pk.eyJ1IjoibWF5b3R1bmRlIiwiYSI6IlpFM1Jmck0ifQ.13TB14FKWB328q1q7eEZUQ';
var map = L.mapbox.map('map', 'Insert Mapbox ID')
    .setView([4.9, 2.6], 4);

---

  Below is a screenshot showing the new base map with the markers on top.


Copy out the example into your preferred Text editor. You can make edits to the original example to customize it to your needs.
Save as .html and Open with a modern web browser.

Thank you for following the demonstration.