GEOG 865
Cloud and Server GIS

Embedding a Mapbox map in a web page

PrintPrint

Mapbox is really geared toward developers, people who write code to embed maps in websites and apps. Websites are typically written in JavaScript, with the maps being embedded through special programming libraries (APIs) that offer functions for working with tiles, markers, etc. One of the more popular of these APIs is Leaflet. Follow the instructions below to make a real simple web page that embeds your Mapbox map via Leaflet.

  1. Create a brand new empty text file and save it on your computer as testmap.html. Make sure it doesn’t have a .txt extension. Don’t use a word processor like MS Word to make this file; use a real basic text editor like Windows Notepad.
  2. Open testmap.html and paste the following code. Don’t worry about what it all means. You will just need to modify two lines of this code to get your own Mapbox map to display inside:
<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Leaflet + Mapbox test</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" type="text/css" crossorigin="">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" crossorigin=""></script>
      <style>
        #mapid {
            width: 512px;
            height: 512px;
            border: 1px solid #ccc;
        }

        .leaflet-container {
            background: #fff;
        }
      </style>
       
        <script type="text/javascript">
          function init() {
            // create map and set center and zoom level
            var map = new L.map('mapid');
            map.setView([47.000,-120.554],13);
            
            var mapboxTileUrl = 'PASTE YOUR URL INSIDE THESE SINGLE QUOTES';
            
            L.tileLayer(mapboxTileUrl, {
                attribution: 'Background map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
            }).addTo(map);         
          }  
        </script>
      </head>
      <body onload="init()"> 
        <h1 id="title">Favorite restaurants</h1>
        <div id="mapid"></div>   
      </body>
    </html>
  1. In the Mapbox website, click the Share... button for your style. Navigate to the Third Party section and choose CARTO in the dropdown list (the CARTO specs should be compatible with Leaflet). Copy the integration URL.
  2. Paste the Leaflet URL in the line of code above that says PASTE YOUR URL INSIDE THESE SINGLE QUOTES.
  3. Find the line above that begins with map.setView and replace the latitude and longitude with the coordinates of the center of your town or area of interest you mapped. If you fail to do this, the map will show my hometown instead of yours. You should be able to see your lat and lon in the header bar in the Mapbox editor.
  4. Save the changes you made to testmap.html.
  5. From Windows Explorer or your file browser, double-click testmap.html to open it in a browser. You should see your Mapbox map inside. Note that you must be connected to the Internet for this step to work because the above code is configured to retrieve the Leaflet API online (rather than from your own machine).

This is a pretty basic example, but hopefully it helps you see how a map like this could be embedded anywhere in a web page by an able JavaScript developer. This could be a useful supplement to a blog, news article, corporate web page, etc.