Examples

Routing with MapLibre GL

This example calculates a car route between two points and draws it on a MapLibre GL map. Each turn instruction is shown as a clickable marker with a popup.

Dependencies: mapbox-polyline

// Initialize MapLibreGL map
    let map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
      center: [11.413507, 47.270537],
      zoom: 13,
    });
    map.on("load", () => {
      // Get route from Routing API
      let start = [11.393712, 47.259938];
      let end = [11.430896, 47.28187];
      let url = new URL("https://routing.maptoolkit.net/route");
      url.searchParams.append("point", `${start[1]},${start[0]}`);
      url.searchParams.append("point", `${end[1]},${end[0]}`);
      url.searchParams.append("routeType", "car");
      url.searchParams.append("api_key", "toursprung");

      fetch(url)
        .then((r) => r.json())
        .then((route) => {
          let path = route.paths[0];
          // Add route polyline to map
          let coordinates = polyline.decode(path.points).map(c => c.reverse());
          map.addLayer({
            id: "route",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "Feature",
                geometry: {
                  type: "LineString",
                  coordinates: coordinates,
                },
              },
            },
            layout: {
              "line-join": "round",
              "line-cap": "round",
            },
            paint: {
              "line-color": "#2a3561",
              "line-width": 5,
            },
          });
          // Add instruction markers with popup to map
          path.instructions.forEach((instruction) => {
            let $img = document.createElement("img");
            $img.src = "https://static.maptoolkit.net/sprites/toursprung/route-via.svg";
            $img.width = 12;
            $img.height = 12;
            $img.style["cursor"] = "pointer";
            new maplibregl.Marker({
              element: $img,
              anchor: "center",
            })
              .setLngLat(instruction.coordinate.reverse())
              .addTo(map)
              .setPopup(new maplibregl.Popup().setHTML(`<p>${instruction.text}</p>`));
          });
          // Add route end marker
          let $img = document.createElement("img");
          $img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
          $img.width = 29;
          $img.height = 30;
          new maplibregl.Marker({
            element: $img,
            anchor: "bottom",
          })
            .setLngLat(coordinates[coordinates.length - 1])
            .addTo(map);
        });
    });

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.2.1/polyline.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.css" />
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // Initialize MapLibreGL map
    let map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
      center: [11.413507, 47.270537],
      zoom: 13,
    });
    map.on("load", () => {
      // Get route from Routing API
      let start = [11.393712, 47.259938];
      let end = [11.430896, 47.28187];
      let url = new URL("https://routing.maptoolkit.net/route");
      url.searchParams.append("point", `${start[1]},${start[0]}`);
      url.searchParams.append("point", `${end[1]},${end[0]}`);
      url.searchParams.append("routeType", "car");
      url.searchParams.append("api_key", "toursprung");

      fetch(url)
        .then((r) => r.json())
        .then((route) => {
          let path = route.paths[0];
          // Add route polyline to map
          let coordinates = polyline.decode(path.points).map(c => c.reverse());
          map.addLayer({
            id: "route",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "Feature",
                geometry: {
                  type: "LineString",
                  coordinates: coordinates,
                },
              },
            },
            layout: {
              "line-join": "round",
              "line-cap": "round",
            },
            paint: {
              "line-color": "#2a3561",
              "line-width": 5,
            },
          });
          // Add instruction markers with popup to map
          path.instructions.forEach((instruction) => {
            let $img = document.createElement("img");
            $img.src = "https://static.maptoolkit.net/sprites/toursprung/route-via.svg";
            $img.width = 12;
            $img.height = 12;
            $img.style["cursor"] = "pointer";
            new maplibregl.Marker({
              element: $img,
              anchor: "center",
            })
              .setLngLat(instruction.coordinate.reverse())
              .addTo(map)
              .setPopup(new maplibregl.Popup().setHTML(`<p>${instruction.text}</p>`));
          });
          // Add route end marker
          let $img = document.createElement("img");
          $img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
          $img.width = 29;
          $img.height = 30;
          new maplibregl.Marker({
            element: $img,
            anchor: "bottom",
          })
            .setLngLat(coordinates[coordinates.length - 1])
            .addTo(map);
        });
    });
  </script>
</body>
</html>

Routing with Leaflet

This example calculates a car route between two points and draws it on a Leaflet map. Each turn instruction is shown as a clickable marker with a popup.

Dependencies: mapbox-polyline

let map = L.map('map').setView([47.270537, 11.413507], 14);

    L.tileLayer(
      'https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=YOUR_API_KEY',
      {
        ratio: L.Browser.retina ? '@2x' : '',
        maxZoom: 18,
        attribution: '© <a href="https://www.maptoolkit.com">Maptoolkit</a> © <a href="https://www.openstreetmap.org/copyright">OSM</a>'
      }
    ).addTo(map);

    let start = [11.393712, 47.259938];
    let end   = [11.430896, 47.28187];

    let url = new URL('https://routing.maptoolkit.net/route');
    url.searchParams.append('point', `${start[1]},${start[0]}`);
    url.searchParams.append('point', `${end[1]},${end[0]}`);
    url.searchParams.append('routeType', 'car');
    url.searchParams.append('api_key', 'YOUR_API_KEY');

    fetch(url)
      .then(r => r.json())
      .then(route => {
        let path = route.paths[0];

        let coordinates = polyline.decode(path.points);
        new L.Polyline(coordinates, { color: '#2a3561', weight: 5 }).addTo(map);

        path.instructions.forEach(instruction => {
          let marker = new L.Marker(instruction.coordinate, {
            icon: new L.Icon({
              iconUrl: 'https://static.maptoolkit.net/sprites/toursprung/route-via.svg',
              iconSize: [12, 12],
              iconAnchor: [6, 6]
            })
          }).addTo(map);
          marker.bindPopup(L.popup().setContent(`<p>${instruction.text}</p>`));
        });

        new L.Marker(coordinates[coordinates.length - 1], {
          interactive: false,
          icon: new L.Icon({
            iconUrl: 'https://static.maptoolkit.net/sprites/toursprung/marker.svg',
            iconSize: [30, 29],
            iconAnchor: [15, 29]
          })
        }).addTo(map);
      });

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
  <style>
    body { width: 100%; height: 100%; padding: 0; margin: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.1/polyline.min.js"></script>
  <script>
    let map = L.map('map').setView([47.270537, 11.413507], 14);

    L.tileLayer(
      'https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=YOUR_API_KEY',
      {
        ratio: L.Browser.retina ? '@2x' : '',
        maxZoom: 18,
        attribution: '© <a href="https://www.maptoolkit.com">Maptoolkit</a> © <a href="https://www.openstreetmap.org/copyright">OSM</a>'
      }
    ).addTo(map);

    let start = [11.393712, 47.259938];
    let end   = [11.430896, 47.28187];

    let url = new URL('https://routing.maptoolkit.net/route');
    url.searchParams.append('point', `${start[1]},${start[0]}`);
    url.searchParams.append('point', `${end[1]},${end[0]}`);
    url.searchParams.append('routeType', 'car');
    url.searchParams.append('api_key', 'YOUR_API_KEY');

    fetch(url)
      .then(r => r.json())
      .then(route => {
        let path = route.paths[0];

        let coordinates = polyline.decode(path.points);
        new L.Polyline(coordinates, { color: '#2a3561', weight: 5 }).addTo(map);

        path.instructions.forEach(instruction => {
          let marker = new L.Marker(instruction.coordinate, {
            icon: new L.Icon({
              iconUrl: 'https://static.maptoolkit.net/sprites/toursprung/route-via.svg',
              iconSize: [12, 12],
              iconAnchor: [6, 6]
            })
          }).addTo(map);
          marker.bindPopup(L.popup().setContent(`<p>${instruction.text}</p>`));
        });

        new L.Marker(coordinates[coordinates.length - 1], {
          interactive: false,
          icon: new L.Icon({
            iconUrl: 'https://static.maptoolkit.net/sprites/toursprung/marker.svg',
            iconSize: [30, 29],
            iconAnchor: [15, 29]
          })
        }).addTo(map);
      });
  </script>
</body>
</html>

API Reference