How to add Geocoding control to Maplibre GL JS map
In this tutorial, you will learn how to add a geocoding control to the Maplibre GL JS map. Geocoding control will enable map users to search places on the map.
Let’s start with a minimalistic HTML page that displays a fullscreen map. Replace YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key.
<!DOCTYPE html>
<html>
<head>
<title>MapTiler Geocoding Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
<style>
#map {
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const apiKey = "YOUR_MAPTILER_API_KEY_HERE";
const map = new maplibregl.Map({
container: "map",
style: "https://api.maptiler.com/maps/streets/style.json?key=" + apiKey,
center: [16.3, 49.2],
zoom: 7
});
</script>
</body>
</html>
Next, we will include the geocoder control script and styles. Add the following snippet to <head>
element:
<script src="https://unpkg.com/@maptiler/geocoding-control@latest/maplibregl.umd.js"></script>
<link href="https://unpkg.com/@maptiler/geocoding-control@latest/style.css" rel="stylesheet" />
Finally, we will instantiate the geocoding control and add it to the map. Add the following snippet after the Maplibre GL map instantiation code:
const gc = new maplibreglMaptilerGeocoder.GeocodingControl({
apiKey,
maplibregl
});
map.addControl(gc);
Control can be additionally customized with various options which are documented on its project page.
Complete source code
Here just copy the sample source code and paste it into your HTML file (your key is included).
Or just copy the code below and replace YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key.
<!DOCTYPE html>
<html>
<head>
<title>MapTiler Geocoding Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/@maptiler/geocoding-control@latest/maplibregl.umd.js"></script>
<link href="https://unpkg.com/@maptiler/geocoding-control@latest/style.css" rel="stylesheet" />
<style>
#map {
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const apiKey = "YOUR_MAPTILER_API_KEY_HERE";
const map = new maplibregl.Map({
container: "map",
style: "https://api.maptiler.com/maps/streets/style.json?key=" + apiKey,
center: [16.3, 49.2],
zoom: 7
});
const gc = new maplibreglMaptilerGeocoder.GeocodingControl({
apiKey,
maplibregl
});
map.addControl(gc);
</script>
</body>
</html>
Geocoding on-prem with MapTiler Server
You can utilize the geocoding capabilities within your on-prem installation of MapTiler Server. This feature allows you to search for addresses and locations without an internet connection. Please take a look at the MapTiler Server API documentation for a comprehensive understanding of all the available options the geocoding API provides.
Related guides
- Automatically created API key
- Check if MapLibre GL JS is supported
- Dataset upload - formats and limits
- Difference between 256x256, 512x512, and HiDPI/Retina rasterized tiles
- Disputed borders on your maps
- Exported Tiles Multiplier
- Generalization in maps
- How are maps used in NFT tokens
- How are the tile requests cached in web browser?
- How MapTiler map tiles are Generated and Delivered