![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
leaflet-control-geocoder
Advanced tools
A simple geocoder for Leaflet that by default uses OSM/Nominatim to locate places, but also supports Bing Locations API and can easily be extended to support other providers.
See the Leaflet Control Geocoder Demo.
Load the CSS and Javascript:
<link rel="stylesheet" href="../Control.Geocoder.css" />
<script src="Control.Geocoder.js"></script>
Add the control to a map instance:
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.Control.geocoder().addTo(map);
By default, when a geocoding result is found, the control will center the map on it and place
a marker at its location. This can be customized by overwriting the control's markGeocode
function, to perform any action desired.
For example:
var geocoder = L.Control.geocoder().addTo(map);
geocoder.markGeocode = function(result) {
var bbox = result.bbox;
L.polygon([
bbox.getSouthEast(),
bbox.getNorthEast(),
bbox.getNorthWest(),
bbox.getSouthWest()
]).addTo(map);
};
This will add a polygon representing the result's boundingbox when a result is selected.
This is the geocoder control. It works like any other Leaflet control, and is added to the map.
L.Control.Geocoder(options)
Option | Type | Default | Description |
---|---|---|---|
collapsed | Boolean | true | Collapse control unless hovered/clicked |
position | String | "topright" | Control position |
placeholder | String | "Search..." | Placeholder text for text input |
errorMessage | String | "Nothing found." | Message when no result found / geocoding error occurs |
geocoder | IGeocoder | new L.Control.Geocoder.Nominatim() | Object to perform the actual geocoding queries |
showResultIcons | Boolean | false | Show icons for geocoding results (if available); supported by Nominatim |
Method | Returns | Description |
---|---|---|
markGeocode( result) | this | Marks a geocoding result on the map |
Uses Nominatim to respond to geocoding queries. This is the default
geocoding service used by the control, unless otherwise specified in the options. Implements IGeocoder
.
Unless using your own Nominatim installation, please refer to the Nominatim usage policy.
L.Control.Geocoder.Nominatim(options)
Option | Type | Default | Description |
---|---|---|---|
serviceUrl | String | "http://nominatim.openstreetmap.org/" | URL of the service |
Uses Bing Locations API to respond to geocoding queries. Implements IGeocoder
.
Note that you need an API key to use this service.
L.Control.Geocoder.Bing(<String> key)
An interface implemented to respond to geocoding queries.
Method | Returns | Description |
---|---|---|
geocode( query, callback, context) | GeocodingResult[] | Performs a geocoding query and returns the results to the callback in the provided context |
reverse(<L.LatLng> location, scale, callback, context) | GeocodingResult[] | Performs a reverse geocoding query and returns the results to the callback in the provided context |
An object that represents a result from a geocoding query.
Property | Type | Description |
---|---|---|
name | String | Name of found location |
bounds | L.LatLngBounds | The bounds of the location |
center | L.LatLng | The center coordinate of the location |
icon | String | URL for icon representing result; optional |
<small>0.2.1 (2014-03-12)</small>
FAQs
Extendable geocoder with builtin support for OpenStreetMap Nominatim, Bing, Google, Mapbox, MapQuest, What3Words, Photon, Pelias, HERE, Neutrino, Plus codes
The npm package leaflet-control-geocoder receives a total of 0 weekly downloads. As such, leaflet-control-geocoder popularity was classified as not popular.
We found that leaflet-control-geocoder demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.