Guides & Walkthroughs

Interactive Maps Using Leaflet.js

Interactive Maps Using Leaflet.js

In this tutorial, we will be using Leaflet JavaScript Library to handle some essential interactive map features using Stadia Maps. You will learn how to create an initial map, add markers, pop-ups, and display lines on the maps (as polylines). If you are already familiar with Leaflet, you are almost there!

What if I already use Leaflet.js with another mapping provider?

If you are already using Leaflet, all you need to do is update the tile URL.

For example, if you're currently using Google's raster tiles, just replace the following code. // With Google L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}').addTo(map); // With Stadia Maps L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png').addTo(map); And you're done! All of your already completed development should just work.

Don't forget to add attribution!

L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', { maxZoom: 20, attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org">OpenMapTiles</a>, &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' } ).addTo(map);

How do I set up my initial map with Stadia Maps?

Rendering your maps using Stadia Maps' tiles is a simple and straightforward process.

  1. We need to include two Leaflet files in the <head> section of your website.
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  2. Next we need to add some global styles, which are probably similar to what you already have for your other map implementation.
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  3. Next, we need to render the map on the page. We need to add a <div> tag and some JavaScript. The structure is likely also familiar to you.
    <div id="map"></div>
    
    <script type="text/javascript">
      // Initialize a map centered at (lat,long) at zoom level 4
      var map = L.map('map').setView([-25.363, 131.044], 4);
    
      // Theme URL format in XYZ PNG format; see our themes documentation for more options
      L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
          maxZoom: 20,
        attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org">OpenMapTiles</a>, &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
      }).addTo(map);
    </script>

And that's it! Refresh your page, and you should see a beautiful Stadia Map now rendered on your web site. Something like this:

How do I add a marker to my map?

If you want to add a marker to your map, all you need to do is add one line of JavaScript:

var marker = L.marker([-25.363, 131.044]).addTo(map);

Define the marker variable, assign it a lat and lon, and use the addTo method to include it on the already specified map.

You can learn more about markers in the Leaflet documentation .

How do I add a pop-up to the marker to my map?

If you want to include a pop-up on the marker you just created, that's just another line of JavaScript:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

In our example, we included basic HTML tags, but you can insert more complex HTML as well.

You can learn more about pop-ups in the Leaflet documentation .

How do I add a line (or similar shapes) to my map?

If you want to include a line (or line based shape) on your map, you can draw it by first creating an array of the lat and lon points you want to include for the polyline:

var polylinePoints = [
  [-25.356946011, 131.047435933],
  [-25.357171736, 131.046868394],
  [-25.357349264, 131.046646273],
  [-25.358057703, 131.046064821],
  [-25.359323873, 131.045217997],
  [-25.359873977, 131.045022028],
  [-25.360502117, 131.044936281],
  [-25.361861662, 131.044769817],
  [-25.362534142, 131.044472762],
  [-25.364808823, 131.042680124]
];

Next, declare a variable, assign its value as the Leaflet polyline function, passing your array of points, and then add it to the map:

L.polyline(polylinePoints).addTo(map);

You can learn more about how polylines work in the Leaflet documentation .