Maptoolkit Maps JS

This example fetches a car route from the Maptoolkit Routing API and renders it as a GeoJSON line layer. Turn instructions appear as clickable markers with popups.

const API_KEY = 'YOUR_API_KEY';

    const map = new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: [11.413507, 47.270537],
        zoom: 13,
        attributionControl: { compact: false }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');

    map.on('load', () => {
        const start = [11.393712, 47.259938];
        const end   = [11.430896, 47.28187];
        const 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', API_KEY);

        fetch(url)
            .then(r => r.json())
            .then(route => {
                const path = route.paths[0];
                const 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 } } },
                    layout: { 'line-join': 'round', 'line-cap': 'round' },
                    paint: { 'line-color': '#2a3561', 'line-width': 5 }
                });

                path.instructions.forEach(instruction => {
                    const 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 maptoolkit.Marker({ element: img, anchor: 'center' })
                        .setLngLat(instruction.coordinate.reverse())
                        .setPopup(new maptoolkit.Popup().setHTML(`<p>${instruction.text}</p>`))
                        .addTo(map);
                });

                const endImg = document.createElement('img');
                endImg.src = 'https://static.maptoolkit.net/sprites/toursprung/marker.svg';
                endImg.width = 29; endImg.height = 30;
                new maptoolkit.Marker({ element: endImg, anchor: 'bottom' })
                    .setLngLat(coordinates[coordinates.length - 1])
                    .addTo(map);
            });
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Routing - Maptoolkit Maps JS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.2.1/polyline.min.js"></script>
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const API_KEY = 'YOUR_API_KEY';

    const map = new maptoolkit.Map({
        container: 'map',
        apiKey: API_KEY,
        style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
        center: [11.413507, 47.270537],
        zoom: 13,
        attributionControl: { compact: false }
    });

    map.addControl(new maptoolkit.NavigationControl(), 'top-right');

    map.on('load', () => {
        const start = [11.393712, 47.259938];
        const end   = [11.430896, 47.28187];
        const 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', API_KEY);

        fetch(url)
            .then(r => r.json())
            .then(route => {
                const path = route.paths[0];
                const 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 } } },
                    layout: { 'line-join': 'round', 'line-cap': 'round' },
                    paint: { 'line-color': '#2a3561', 'line-width': 5 }
                });

                path.instructions.forEach(instruction => {
                    const 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 maptoolkit.Marker({ element: img, anchor: 'center' })
                        .setLngLat(instruction.coordinate.reverse())
                        .setPopup(new maptoolkit.Popup().setHTML(`<p>${instruction.text}</p>`))
                        .addTo(map);
                });

                const endImg = document.createElement('img');
                endImg.src = 'https://static.maptoolkit.net/sprites/toursprung/marker.svg';
                endImg.width = 29; endImg.height = 30;
                new maptoolkit.Marker({ element: endImg, anchor: 'bottom' })
                    .setLngLat(coordinates[coordinates.length - 1])
                    .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 car route from [11.393712, 47.259938] to [11.430896, 47.28187]. Draw the route as a line and add turn-by-turn markers.

MapLibre GL JS