Skip to content

The Javascript & TypeScript Map Control component for MapTiler Geocoding service! Easy to be integrated into any JavaScript mapping application.

License

Notifications You must be signed in to change notification settings

maptiler/maptiler-geocoding-control

Folders and files

NameName
Last commit message
Last commit date
Nov 16, 2023
Jun 10, 2024
Sep 30, 2022
Dec 19, 2024
Aug 30, 2023
Dec 19, 2024
Dec 19, 2024
Jun 25, 2023
Aug 22, 2023
Jun 10, 2024
Aug 22, 2023
May 24, 2023
May 24, 2023
Sep 4, 2023
Oct 10, 2024
May 24, 2023
Jun 28, 2023
Dec 19, 2024
Dec 6, 2024
Dec 19, 2024
Dec 11, 2024
Dec 11, 2024
Jun 27, 2024
Oct 3, 2022
Jul 11, 2023
Jul 11, 2023
Sep 30, 2022
Jul 5, 2024

official page →

The Javascript & TypeScript Map Control component for MapTiler Geocoding service! Easy to be integrated into any JavaScript mapping application.

MapTiler Geocoding control for MapTiler SDK, MapLibre GL JS, Leaflet and OpenLayers

About

A Geocoding control for MapTiler SDK, MapLibre GL JS, Leaflet and OpenLayers utilizes MapTiler Cloud Geocoding API. With this control, users of mapping application can find any place on Earth (States, Cities, Streets, Addresses, POIs, ...) down to the address level, restrict the search area to a specific country, highlight searched results on the map, autocomplete words while typing, and much more.

The component can be used as an ES module or UMD module with or without bundler.

Geocoding control is also provided as React component and Svelte component and other libraries.

Quick start

Install the Geocoding control unsing npm:

npm install --save @maptiler/geocoding-control @maptiler/sdk

Use the component in your mapping application:

import * as maptilersdk from "@maptiler/sdk";
import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
import "@maptiler/sdk/dist/maptiler-sdk.css";
import "@maptiler/geocoding-control/style.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);

NOTE: Get your personal MapTiler API key in the MapTiler Cloud.

Installation and more usage examples

API Documentation

In addition to the details and examples provided in this README.md and our documentation, check out

Development

Building

npm install && npm run build

You will find compilation result in the dist directory.

Running in dev mode

npm install && VITE_API_KEY=YOUR_MAPTILER_API_KEY_HERE npm run dev

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