Examples
Geocoder with MapLibre GL
This example adds a search control to the top right corner of a MapLibre GL map using the maplibre-gl-geocoder plugin. Results are fetched from the Maptoolkit Geocoding API. Try searching for Sillgasse.
Dependencies: maplibre-gl-geocoder
let map = new maplibregl.Map({
container: "map",
style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
center: [11.40037, 47.26816],
zoom: 12,
});
map.addControl(
new MaplibreGeocoder({
forwardGeocode: async (cfg) => {
const response = await fetch(
`https://geocoder.maptoolkit.net/search?q=${encodeURIComponent(cfg.query)}&language=${cfg.language[0]}&api_key=toursprung`
);
const result = await response.json();
return {
features: result.map((e) => ({
type: "Feature",
geometry: { type: "Point", coordinates: [e.lon, e.lat] },
place_type: ["place"],
place_name: e.display_name,
text: e.type,
properties: e,
center: [e.lon, e.lat]
}))
};
},
}, {
showResultsWhileTyping: true,
showResultMarkers: false,
maplibregl: maplibregl
})
);<!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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.css" />
<script src="https://cdn.jsdelivr.net/npm/@maplibre/maplibre-gl-geocoder@1.2.0/dist/maplibre-gl-geocoder.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@maplibre/maplibre-gl-geocoder@1.2.0/dist/maplibre-gl-geocoder.css" rel="stylesheet" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
let map = new maplibregl.Map({
container: "map",
style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
center: [11.40037, 47.26816],
zoom: 12,
});
map.addControl(
new MaplibreGeocoder({
forwardGeocode: async (cfg) => {
const response = await fetch(
`https://geocoder.maptoolkit.net/search?q=${encodeURIComponent(cfg.query)}&language=${cfg.language[0]}&api_key=toursprung`
);
const result = await response.json();
return {
features: result.map((e) => ({
type: "Feature",
geometry: { type: "Point", coordinates: [e.lon, e.lat] },
place_type: ["place"],
place_name: e.display_name,
text: e.type,
properties: e,
center: [e.lon, e.lat]
}))
};
},
}, {
showResultsWhileTyping: true,
showResultMarkers: false,
maplibregl: maplibregl
})
);
</script>
</body>
</html>Geocoder with Leaflet
This example adds a search control to the top right corner of a Leaflet map using the leaflet-control-geocoder plugin. Searching for an address calls the Maptoolkit Geocoding API and centers the map on the result. Try searching for Sillgasse.
Dependencies: leaflet-control-geocoder
let map = L.map("map").setView([47.26816, 11.40037], 13);
L.tileLayer("https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=toursprung", {
ratio: L.Browser.retina ? "@2x" : "",
maxZoom: 18,
attribution: "© <a href='https://www.maptoolkit.com' target='_blank'>Maptoolkit</a> © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OSM</a>",
}).addTo(map);
L.Control.geocoder({
geocoder: {
geocode: (query, callback, context) => {
fetch(`https://geocoder.maptoolkit.net/search?q=${encodeURIComponent(query)}&language=en&api_key=toursprung`)
.then((r) => r.json())
.then((result) => {
callback.call(context, result.map((e) => ({
bbox: [[e.boundingbox[0], e.boundingbox[2]], [e.boundingbox[1], e.boundingbox[3]]],
center: [e.lat, e.lon],
name: e.display_name,
})));
});
},
suggest: function(query, callback, context) {
return this.geocode(query, callback, context);
},
}
}).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/leaflet@1.9.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-control-geocoder/dist/Control.Geocoder.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>
let map = L.map("map").setView([47.26816, 11.40037], 13);
L.tileLayer("https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=toursprung", {
ratio: L.Browser.retina ? "@2x" : "",
maxZoom: 18,
attribution: "© <a href='https://www.maptoolkit.com' target='_blank'>Maptoolkit</a> © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OSM</a>",
}).addTo(map);
L.Control.geocoder({
geocoder: {
geocode: (query, callback, context) => {
fetch(`https://geocoder.maptoolkit.net/search?q=${encodeURIComponent(query)}&language=en&api_key=toursprung`)
.then((r) => r.json())
.then((result) => {
callback.call(context, result.map((e) => ({
bbox: [[e.boundingbox[0], e.boundingbox[2]], [e.boundingbox[1], e.boundingbox[3]]],
center: [e.lat, e.lon],
name: e.display_name,
})));
});
},
suggest: function(query, callback, context) {
return this.geocode(query, callback, context);
},
}
}).addTo(map);
</script>
</body>
</html>