Putting a Map on a Web Page

This is all about getting our hands dirty with HTML, CSS, Javascript, and a mapping library API. It’s a quick intro, just to give you a sense of how we can integrate tiled maps in web pages. Copy and paste the entirety of the code blocks below into your HTML file as instructed.

First, create a new .html document by opening a text editor like Notepad or TextEdit and saving a blank file called web-map.html. Make sure the file extension is .html and not .txt. You may have to ‘save as all file types’.

Before you start, it’s important to know that HTML is written in pairs of opening and closing tags that are contained within each other, like this – <first><second></second></first> – and never like this – <first><second></first></second>. Paste the following blocks of code into your .html document within the specified tags.

The code below is a basic template for an html document and includes a box on the webpage–known as a div–where we’ll put our map. Copy and paste this into your .html file.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="map"></div>

</body>

</html>

Save your .html file and then open it with a web browser like Chrome. Web browsers are the applications that read and interpret .html files. As you make changes to the code in your file, save and then

Copy and paste this next block of code into the space between the <head></head> tags.

<meta charset=utf-8 />

<title>I WANT A MAP!</title>
    
    
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>

<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css" rel="stylesheet" />

Add this next block of code after the stuff you just added, but keep it between the <head></head> tags. This is some CSS for the page.

Add this next block of code in between the <body></body> tags and after closing </div> tag.

Now, when you open the HTML file in a web browser, you should see a map. Great job!

For a little added fun, we can use javascript to provide further functionality. Add the next code block after the ourMap.setView([40, -74.50], 9); line and before the closing </script> tag.

// Here's a list, or array, of other map IDs we could have used when we made our map. We're saving it as the variable otherMaps
      var otherMaps = [ 'mapbox.streets',
                        'mapbox.light',
                        'mapbox.dark',
                        'mapbox.satellite',
                        'mapbox.streets-satellite',
                        'mapbox.wheatpaste',
                        'mapbox.streets-basic',
                        'mapbox.comic',
                        'mapbox.outdoors',
                        'mapbox.run-bike-hike',
                        'mapbox.pencil',
                        'mapbox.pirates',
                        'mapbox.emerald',
                        'mapbox.high-contrast',
                        'examples.map-i86nkdio' ];
      
      // Each of the items in the otherMaps list has an index. For example, otherMaps[0] is equal to 'mapbox.streets' because it is in the first, or 0 position, in the array.
      
      // Let's make an "event listener" with javascript so that each time someone clicks on the button with the ID 'nextMap', we load in a random set of map tiles.
      document.getElementById('nextMap').onclick = newMap;
      
      //The even listener above says "on the click of the 'newMap' button, call the function newMap. We define that function below
      function newMap(){ // Defining a new function that will run a block of code
        ourMap.eachLayer(function(layer) { ourMap.removeLayer(layer); }); // Remove any existing tile layers
        var mapIndex = Math.floor(Math.random() * 15); // This gives a random number between 0 and 14
        var layer = L.mapbox.tileLayer(otherMaps[mapIndex]); // Pick out our new tile map layer from the otherMaps options
        layer.addTo(ourMap); // Add the new map layer
      };

Finally, add this HTML button element after the closing </div> tag and before the opening <script> tag.

Save your file and refresh the page. Now, the webpage should be listening for you to click on the button in the top left. When you do, javascript will load a random new tiled map.

Applied Cartographic Design

Spring 2015 | Introduction to web mapping and applications for campus maps.

Putting a Map on a Web Page