The Javascript & TypeScript Map Control component for MapTiler Geocoding service! Easy to be integrated into any JavaScript mapping application.
The MapTiler Geocoding control implements a powerful search box in your maps or online forms, enabling your application users to find any place on Earth down to individual addresses. Use the search box control with MapTiler SDK JS (or other map libraries like Leaflet, MapLibre GL JS, OpenLayers).
π Documentation Β π¦ NPM Package Β π Website Β π Get API Key
Table of Contents
Install the Geocoding control unsing npm, together with your map library (MapTiler SDK as an example):
npm install --save @maptiler/geocoding-control @maptiler/sdkUse the component in your mapping application (MapTiler SDK as an example):
import * as maptilersdk from "@maptiler/sdk";
import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
import "@maptiler/sdk/dist/maptiler-sdk.css";
maptilersdk.config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
const map = new maptilersdk.Map({
container: "map", // id of HTML container element
});
const gc = new GeocodingControl();
map.addControl(gc);- With MapTiler SDK
- With MapLibre GL
- With Leaflet
- With OpenLayers
- As a React component
- As Svelte component
- As vanilla JavaScript module
Check out the full list of MapTiler geocoding examples
For detailed guides, API reference, and advanced examples, visit our comprehensive documentation:
Geocoding service API documentation
- π Documentation - Comprehensive guides and API reference
- βοΈ Contact us - Get in touch or submit a request
- π¦ Twitter/X - Follow us for updates
We love contributions from the community! Whether it's bug reports, feature requests, or pull requests, all contributions are welcome:
- Fork the repository and create your branch fromΒ
main - If you've added code, add tests that cover your changes
- Ensure your code follows our style guidelines
- Give your pull request a clear, descriptive summary
- Open a Pull Request with a comprehensive description
- Read the CONTRIBUTING file
npm install && npm run buildYou will find compilation result in the dist directory.
npm install && VITE_API_KEY=YOUR_MAPTILER_API_KEY_HERE npm run devAlternatively, you can provide your API key via key URL param.
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 built 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.
This project is licensed under the BSD 3-Clause License β see theΒ LICENSEΒ file for details.
The Geocoding control uses the MapTiler Geocoding API. You can use the API directly from your web or backend applications or use the API Client JS library.
With this control, users of mapping application can:
- Find any place on Earth (States, Cities, Streets, Addresses, POIs, ...) down to the address level
- Find and identify objects or place names using a coordinate pair or a single mouse click (reverse geocoding)
- Restrict the search area to a specific country, bounding box, or proximity
- Highlight searched results on the map (marker or full geometry)
- Autocomplete words while typing
- and much more. Check out the Geocoding Control API reference to see all the options.
The component can be used as an ES module or UMD module with or without bundler.
Geocoding control itself is provided as a Web component which can be used with React, Svelte, and any other modern frontend library, or without any library at all.
π Made with love by the MapTiler team
Website β’ Documentation β’ GitHub