Geocoding control (search box) | Geocoding | JavaScript maps SDK | MapTiler SDK JS

GitHubLogo maptiler/maptiler-geocoding-control

The MapTiler Geocoding control module is the main feature of our Search & Geocoding services. It implements a search box in your maps or online forms, so that users of your application can find any place on Earth down to individual addresses. Try it out:

The search has many features and config options, for example, you can add autocomplete, limit the results to a specific country or another defined area, highlight the search results on the map, and much more.

The Geocoding control module uses our Geocoding API.

How to use

The Geocoding control can be used as an ES module or UMD module. You can implement it with MapTiler SDK JS or other map libraries of your choice. We also provide React and Svelte components.

Get started

First, get a MapTiler API key. Then copy the following code and use your key where indicated:

API reference

This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.

UMD global variables

If you import script from CDN using <script src="https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/${Script filename}"></script> then it creates a global variable according to the following table:

Script filename	UMD global variable name	Exports
`leaflet.umd.js`	`leafletMaptilerGeocoder`	`class GeocodingControl`,`function createLeafletMapController`
`maplibregl.umd.js`	`maplibreglMaptilerGeocoder`	`class GeocodingControl`, `function createMapLibreGlMapController`
`maptilersdk.umd.js`	`maptilersdkMaptilerGeocoder`	`class GeocodingControl`, `function createMapLibreGlMapController`
`openlayers.umd.js`	`openlayersMaptilerGeocoder`	`class GeocodingControl`, `function createOpenLayersMapController`
`react.umd.js`	`reactMaptilerGeocoder`	`class GeocodingControl`
`vanilla.umd.js`	`maptilerGeocoder`	`class GeocodingControl`
`leaflet-controller.umd.js`	`leafletMaptilerGeocodingController`	`function createLeafletMapController`
`maplibregl-controller.umd.js`	`maplibreglMaptilerGeocodingController`	`function createMapLibreGlMapController`
`openlayers-controller.umd.js`	`openlayersMaptilerGeocodingController`	`function createOpenLayersMapController`

The variable is an object with properties representing library-exported variables, for example maplibreglMaptilerGeocoder.GeocodingControl.

alternatively you can use different CDN, for example https://www.unpkg.com/@maptiler/geocoding-control@${version}/${Script filename}
replace `${version}` with the desired library version and ${Script filename} with the script filename from the table above.

POI icons and bundlers

POI icons are served from CDN per default. If there is an requirement to serve them from a different location and the control is used in the application which is build with Web Application bundler (like Webpack or Vite) then it is necessary to do some extra configuration. Icons are bundled in the library and you can find them in node_modules/@maptiler/geocoding-control/icons. Configure your bundler and/or provide iconsBaseUrl option for the icons to be properly resolved. You can also copy icons from that directory to your public directory.

GitHubLogo View complete source code on GitHub