Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maptiler/maptiler-geocoding-control
The Javascript & TypeScript Map Control component for MapTiler Geocoding service! Easy to be integrated into any JavaScript mapping application.
https://github.com/maptiler/maptiler-geocoding-control
esm geocoding geocoding-api javascript leaflet leaflet-plugin leaflet-plugins leafletjs maplibre maplibre-gl-js maplibre-plugins maptiler maptiler-sdk-plugin openlayers openlayers-plugins react reactjs svelte umd
Last synced: 2 days ago
JSON representation
The Javascript & TypeScript Map Control component for MapTiler Geocoding service! Easy to be integrated into any JavaScript mapping application.
- Host: GitHub
- URL: https://github.com/maptiler/maptiler-geocoding-control
- Owner: maptiler
- License: bsd-3-clause
- Created: 2022-09-30T13:33:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-04T09:41:07.000Z (3 days ago)
- Last Synced: 2025-02-04T10:29:09.533Z (3 days ago)
- Topics: esm, geocoding, geocoding-api, javascript, leaflet, leaflet-plugin, leaflet-plugins, leafletjs, maplibre, maplibre-gl-js, maplibre-plugins, maptiler, maptiler-sdk-plugin, openlayers, openlayers-plugins, react, reactjs, svelte, umd
- Language: TypeScript
- Homepage: https://maptiler.com/cloud/geocoding
- Size: 1.09 MB
- Stars: 43
- Watchers: 8
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-maplibre - maptiler-geocoding-control - Adds a geocoding control for searching for places using MapTiler API. [docs](https://docs.maptiler.com/sdk-js/modules/geocoding/) (Geocoding & Search Plugins / JavaScript)
README
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](https://github.com/maptiler/maptiler-sdk-js),
[MapLibre GL JS](https://github.com/maplibre/maplibre-gl-js),
[Leaflet](https://leafletjs.com) and [OpenLayers](https://openlayers.org) utilizes [MapTiler Cloud Geocoding
API](https://www.maptiler.com/cloud/geocoding/). 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](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/react/) and [Svelte component](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/svelte/) and [other libraries](#installation-and-more-usage-examples).
## Quick start
Install the Geocoding control unsing `npm`:
```shell
npm install --save @maptiler/geocoding-control @maptiler/sdk
```
Use the component in your mapping application:
```js
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](https://docs.maptiler.com/cloud/api/authentication-key/) in the [MapTiler Cloud](https://cloud.maptiler.com).
## Installation and more usage examples
- [With MapTiler SDK](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/sdk-js/)
- [With MapLibre GL](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/maplibre-gl-js/)
- [With Leaflet](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/leaflet/)
- [With OpenLayers](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/openlayers/)
- [As a React component](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/react/)
- [As Svelte component](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/svelte/)
- [As vanilla JavaScript module](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/vanilla-js/)
## API Documentation
In addition to the details and examples provided in this `README.md` and our documentation, check out
- [The complete Geocoding service API documentation](https://docs.maptiler.com/cloud/api/geocoding/)
- [The complete Geocoding control reference](https://docs.maptiler.com/sdk-js/modules/geocoding/api/api-reference/)
- [UMD global variables](https://docs.maptiler.com/sdk-js/modules/geocoding/#umd-global-variables)
## Development
### Building
```bash
npm install && npm run build
```
You will find compilation result in the `dist` directory.
### Running in dev mode
```bash
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.
