`@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 the options 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.

npm