Maptoolkit Maps JS

This example adds a search input that calls the Maptoolkit Geocoding API, flies the map to the first result, and places a marker with a popup showing the full place name. No plugin required - the Geocoding API is called directly via fetch.

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.40037, 47.26816],
        zoom: 12,
        attributionControl: { compact: false }
    });

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

    let marker = null;

    async function search() {
        const q = document.getElementById('query').value.trim();
        if (!q) return;
        const res = await fetch(`https://geocoder.maptoolkit.net/search?q=${encodeURIComponent(q)}&language=en&api_key=${API_KEY}`);
        const results = await res.json();
        if (!results.length) return;
        const { lon, lat, display_name } = results[0];
        map.flyTo({ center: [+lon, +lat], zoom: 14 });
        if (marker) marker.remove();
        marker = new maptoolkit.Marker()
            .setLngLat([+lon, +lat])
            .setPopup(new maptoolkit.Popup().setHTML(`<strong>${display_name}</strong>`))
            .addTo(map);
        marker.togglePopup();
    }

    document.getElementById('btn').addEventListener('click', search);
    document.getElementById('query').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Geocoding - 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" />
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
        #search {
            position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
            z-index: 10; display: flex; gap: 8px;
        }
        #search input {
            width: 260px; padding: 8px 12px; border: none; border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0,0,0,.3); font-size: 14px;
        }
        #search button {
            padding: 8px 14px; border: none; border-radius: 4px;
            background: #2a3561; color: #fff; cursor: pointer; font-size: 14px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="search">
    <input id="query" type="text" placeholder="Search for a place…" value="Innsbruck Sillgasse" />
    <button id="btn">Search</button>
</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.40037, 47.26816],
        zoom: 12,
        attributionControl: { compact: false }
    });

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

    let marker = null;

    async function search() {
        const q = document.getElementById('query').value.trim();
        if (!q) return;
        const res = await fetch(`https://geocoder.maptoolkit.net/search?q=${encodeURIComponent(q)}&language=en&api_key=${API_KEY}`);
        const results = await res.json();
        if (!results.length) return;
        const { lon, lat, display_name } = results[0];
        map.flyTo({ center: [+lon, +lat], zoom: 14 });
        if (marker) marker.remove();
        marker = new maptoolkit.Marker()
            .setLngLat([+lon, +lat])
            .setPopup(new maptoolkit.Popup().setHTML(`<strong>${display_name}</strong>`))
            .addTo(map);
        marker.togglePopup();
    }

    document.getElementById('btn').addEventListener('click', search);
    document.getElementById('query').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
</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 a map of Innsbruck with a search box that geocodes the query using the Maptoolkit Geocoding API, flies to the result, and drops a marker.

MapLibre GL JS