Creating a simple map
In this recipe, we will explore how we can integrate Mapbox.js into a project. We will use the absolute minimum code, and we will just display a simple map.
How to do it…
We have to create a simple HTML5 file that will include the necessary Mapbox.js JavaScript and CSS files.
We will also create our own CSS file to create some basic styling for our #map
div that will contain the map. In main.js
, we will initialize Mapbox.js and provide our Mapbox access token. Then, we will create a simple map by providing the basic coordinates. Perform the following steps:
Open up the
chapter-4-example1-starter
folder. This folder contains an HTML5index.html
file, acss
folder with astyle.css
file, and amain.js
file. The project isn't linked to Mapbox.js yet; we will do this next.The
style.css
file contains some basic styling for the#map
div. It will style the div with 100% width and 800px height, with no margins. This div will contain our map.We will use
main.js
to write our JavaScript...