Geocoding with MapLibre GL JS

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.


npm install --save maplibre-gl @maptiler/geocoding-control

main.js

import maplibregl from "maplibre-gl";
import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
import "maplibre-gl/dist/maplibre-gl.css";

const apiKey = "YOUR_MAPTILER_API_KEY_HERE";

const map = new maplibregl.Map({
  container: "map", // id of HTML container element
  style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${apiKey}`
});

const gc = new GeocodingControl({ apiKey, maplibregl });

map.addControl(gc);

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Geocoding in MapLibre GL JS</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>

</html>

style.css

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Geocoding in MapLibre GL JS</title>
  <link href="https://unpkg.com/maplibre-gl@v5.24.0/dist/maplibre-gl.css"
    rel="stylesheet">
  <script src="https://unpkg.com/maplibre-gl@v5.24.0/dist/maplibre-gl.js"></script>
  <script
    src="https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0/maplibregl.umd.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
</body>
<script>
  const key = 'YOUR_MAPTILER_API_KEY_HERE';

  const map = new maplibregl.Map({
    container: "map", // id of HTML container element
    style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${key}`
  });

  const gc = new maptilerGeocoder.GeocodingControl({ apiKey: key });
  map.addControl(gc);
</script>

</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.

Geocoding with MapLibre GL JS

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Geocoding on-prem with MapTiler Server