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/[email protected]/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/[email protected]/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>

Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.

Use the Maptoolkit Connector. Create an interactive map with a route from [11.393712, 47.259938] to [11.430896, 47.28187] using Leaflet.

MapLibre GL JS