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:

1. Open up the chapter-4-example1-starter folder. This folder contains an HTML5 index.html file, a css folder with a style.css file, and a main.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...