Providers

Usage

There are two ways in which leaflet-geosearch can be used. Direct usage, for example for address forms, or embedded in a leaflet map to search for points of interest.

Using the providers directly

All providers can be used without leaflet. You might want to bind them to a form;

<Search provider="OpenStreetMap" />

<Search provider="OpenStreetMap" />

import { OpenStreetMapProvider } from 'leaflet-geosearch';

const provider = new OpenStreetMapProvider();
const results = await provider.search({ query: input.value });

Using the leaflet control

Or add the GeoSearchControl to the leaflet map instance, to render a search control on your map;

See Leaflet Control for more info about the the options this control provides.

Leaflet

<Map provider="OpenStreetMap" />

<Map provider="OpenStreetMap" />

import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';

const searchControl = new GeoSearchControl({
  provider: new OpenStreetMapProvider(),
  style: 'bar',
  resetButton: '🔍', // Example of using a magnifying glass icon
});

map.addControl(searchControl);

Results

The search event of all providers return an array of result objects. The base structure is uniform between the providers. It contains objects matching the following interface:

interface result {
  x: number; // lon
  y: number; // lat
  label: string; // formatted address
  bounds: [
    [number, number], // south, west - lat, lon
    [number, number], // north, east - lat, lon
  ];
  raw: any; // raw provider result
}