@opencage/leaflet-opencage-geosearch
A Leaflet plugin that lets you quickly add a search box and help your users find locations on the map
Check out a demo page in /leaflet-plugin-example. Or take a look at the live demo.
Leaflet version
Tested with latest version 1.7.1, and 1.8.0
Other external dependencies
This plugin at the moment uses the Opencage geoseach SDK bundle with alogolia's autocomplete. Check the instructions.
Browser / device compatibility
This plugin will be compatible with the same browsers / device than the leaflet library is.
Usage
Load the plugin's CSS and JavaScript files:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@opencage/leaflet-opencage-geosearch/leaflet-opencage-geosearch.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@opencage/geosearch-bundle"></script>
<script src="https://cdn.jsdelivr.net/npm/@opencage/leaflet-opencage-geosearch"></script>
and insert this new control to your leaflet map:
const options = {
key: 'YOUR_OPENCAGE_GEOSEARCH_KEY',
// you will need to become a customer to get a geosearch key
//
// limit: 3,
// noResults: 'Pas de résultat.',
//
// leafletjs options:
position: 'topright', // Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'
};
var geosearchControl = L.Control.openCageGeosearch(options).addTo(map);
NB: You can specify a specific version of the plugin and geosearch bundle using
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@opencage/leaflet-opencage-geosearch@0.0.5/leaflet-opencage-geosearch.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@opencage/geosearch-bundle@0.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/@opencage/leaflet-opencage-geosearch@0.0.6"></script>
API reference
-
the
options
parameter has the same API as the core sdk -
the
events
from the core sdk can be included directly in theoptions
parameter.| example:
const options = {
key: window.OPENCAGE_GEOSEARCH_KEY,
// you will need to become a customer to get a geosearch key
//
onActive: () => {
console.log('Happy Geosearch');
},
//
// leafletjs options:
position: 'topright', // Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'
};
License
Licensed under the MIT License
A copy of the license is available in the repository's LICENSE file.
Who is OpenCage GmbH?
We run the OpenCage Geocoding API. Learn more about us.
We also run Geomob, a series of regular meetups for location based service creators, where we do our best to highlight geoinnovation. If you like geo stuff, you will probably enjoy the Geomob podcast.