Search for content

Raster Map with Leaflet

Raster Map with Leaflet

You will learn how a basic Raster Map with Leaflet is implemented. We will display a Leaflet raster map with minimal configuration effort. This tutorial illustrates the use of the PTV Developer Raster Maps API. 

Try it! Download from GitHub

Prerequisites

  • Basic knowledge of JavaScript.
  • Helpful: Basic knowledge of Leaflet.

Getting started

Create an HTML page

Create an HTML file called index.html and load the Leaflet packages as seen below.

<html lang="en">
     <head>
         <title>PTV Raster Map Leaflet Tutorial</title>
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
         <style>
             body,
             html {
                 border: 0;
                 padding: 0;
                 margin: 0;
             }

             #map {
                 width: 100%;
                 height: 100%;
             }
         </style>
     </head>
     <body>
         <div id="map"></div>
         <script type="text/javascript" src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
         <script type="text/javascript">
           // The JS code below goes here
         </script>
     </body>
    </html>

We also add some styling to fill the screen and a <div> with id "map" to the HTML body, which will contain the Leaflet map.

Initialize the Leaflet map

Now let's initialize a Leaflet map in the <div> element:

// Karlsruhe
const coordinates = L.latLng(49, 8.4);

const initializeMap = () => {
  const map = new L.Map("map", {
    center: coordinates,
    zoom: 13,
  });
};

window.onload = initializeMap;

We have set the initial coordinates to Karlsruhe, of course you can choose any other coordinates. All you see for now is a gray screen with zoom controls in the top left and the Leaflet attribution in the bottom right. Let's change that by adding a tile layer!

Add a Tile Layer

Let's add a tile layer that uses the PTV Raster Map API:

// Please enter your API key here
const API_KEY = "YOUR_API_KEY";
const tileURL = "https://api.myptv.com/rastermaps/v1/image-tiles/{z}/{x}/{y}?apiKey={apikey}";

const initializeMap = () => {
  // ...

  L.tileLayer(tileURL, {
    apikey: API_KEY,
    attribution: "©2023, PTV Group, HERE"
  }).addTo(map);
};

We add the L.tileLayer to the map we created in the step above and pass it the PTV Raster Map image tile URL and our API key. That's all it takes to make the map appear in your web page.

Customize Map Controls (Optional)

If you like, you can move the zoom control to the bottom right, like we did:

const initializeMap = () => {
  const map = new L.Map("map", {
    center: coordinates,
    zoom: 13,
    zoomControl: false
  });

  L.control.zoom({
    position: "bottomright"
  }).addTo(map);

  // ...
};

There are many things you can do with your raster map. Check out the features of the PTV Developer Raster Maps API and the Leaflet documentation!