How to add a map to a Website or Web App using Mapbox
Tags: webdev, beginners, tutorial, codenewbie
Published: 2021-07-22 20:48:27

Have you ever wanted to add a map to your application to make it look nice? You might have wanted to build an entire application dedicated to using a map or add it to your contact page.

In the article, we will look at a few steps to help you get started with adding a map to your website or web application using Mapbox. At the end of the article, you should know how to prepare an HTML page that shows a map using the Mapbox API. 

---

## Table of Contents
1. [Get your HTML file ready](#html)
1. [Create a Mapbox account](#create-account)
1. [Get the Mapbox map code to integrate to your application](#mapbox-code)
1. [The result of the HTML file after adding the code](#result)
1. [Preview](#preview)
1. [Further reading](#reading)

<h3 id="html">Get your HTML file ready</h3>

We want our map to render somewhere on the website. So, we need to have a file with an <code>.html</code> extension. For this article, we will use <code>index.html</code>. 

Treat this *how-to* article as a  project. Place your files into a folder dedicated to learning how to add the map, for example, *./documents/Map-with-Mapbox/index.html*.


*index.html*
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding a map to your website or web application using Mapbox</title>

    <!-- Styles -->
    
</head>
<body>
    <!-- Header -->
    <header>
        <h1 style="text-align: center;">Map with Mapbox</h1>
    </header>

    <!-- Main -->
    <main>
        <!-- Add your div tag -->
    </main>
    
    <!-- Scripts -->

</body>
</html>
```

<h3 id="create-account">Create a Mapbox account</h3>

<h4>What is Mapbox?</h4>
[Mapbox](https://mapbox.com) is a provider. A provider for online location data to integrate into your websites or applications. Their APIs allow you to gain access to their tools and services using programmatic skills. 

To create an account, go to [mapbox.com](https://mapbox.com). Create an account for yourself and sign in. In your Dashboard, you will have the information you need to get started with integrating a map into your website.

![Mapbox dashboard](https://i.ibb.co/KmJfWTh/mapbox-account-dashboard.jpg)

<h3 id="mapbox-code">Get the Mapbox code to add to your application</h3>

1. Go to the [Integrate Mapbox](https://www.mapbox.com/install/) link in the Dashboard.
1. Choose the [JS Web](https://www.mapbox.com/install/js/) SDK link.
1. [Use the Mapbox CDN](https://www.mapbox.com/install/js/cdn-install/) link.
1. Copy the styles <code>link</code> below into the <code>head</code>:

```html
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
```

5. Copy the <code>script</code> tag below towards the bottom of the <code>body</code>:

```html
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
```
6. Press the **Next >** button to get the <code>script</code> that accesses the Mapbox API and allocates a container:

```html
<script>
    mapboxgl.accessToken = 'Add your Access Token Here';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11'
    });
</script>
```

7. Add a <code>div</code> tag into the <code>body</code> with an <code>id</code>  that matches the container in the <code>script</code> above:

```html
<div id='map' style='width: 400px; height: 300px;'></div>
```

<h3 id="result">The result of the HTML file after adding the code</h3>

I have included a sample of the result of the HTML file after I have added the code from the Mapbox CDN. 

*index.html*
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding a map to yor website or web application using Mapbox</title>

    <!-- Styles -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
    <!-- Header -->
    <header>
        <h1 style="text-align: center;">Map with Mapbox</h1>
    </header>

    <!-- Main -->
    <main>
        <div id='map' style='width: 400px; height: 300px; margin: 0 auto;'></div>
    </main>

    <!-- Scripts -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>

    <script>
        mapboxgl.accessToken = 'Add your Access Token Here';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [28.112268, -26.270760], // [Longitude, Latitude]
            zoom: 5 // Initial zoom
        });
    </script>
</body>
</html>
```

<h3 id="preview">Preview</h3>

After you have saved and rendered your HTML file, the map will display on your web page. The image added below is a **preview** of how the code above displays in the browser.

*chrome*
![Preview](https://i.ibb.co/xXRB4q0/map-with-mapbox.jpg)

<h3 id="reading">Further reading</h3>

To get more from Mapbox, read the:
* [Documentation](https://docs.mapbox.com/mapbox-gl-js/api/),
* [Tutorials](https://docs.mapbox.com/help/tutorials/), and
* [Blog](https://www.mapbox.com/blog)

The information can help you to grow your map into something more robust and preformat.

---

This article was supposed to serve as an introduction to [Mapbox](https://mapbox.com) and how you can integrate it into your website.

Thank you for taking the time to read. Please, share your thoughts about the article in the comments. You can also let me know of any additions or changes  I can make to this article.