mirror of
https://github.com/jlengrand/leaflet-geosearch.git
synced 2026-03-10 08:31:26 +00:00
chore: run linter
This commit is contained in:
@@ -8,8 +8,8 @@ import Playground from './components/Playground';
|
||||
import Map from './components/Map';
|
||||
|
||||
# Introduction
|
||||
`leaflet-geosearch` adds support for geocoding (address lookup, a.k.a. geoseaching) to your (web) application. It comes with controls to be embedded in your Leaflet map.
|
||||
|
||||
`leaflet-geosearch` adds support for geocoding (address lookup, a.k.a. geoseaching) to your (web) application. It comes with controls to be embedded in your Leaflet map.
|
||||
|
||||
We support the following providers out-of-the-box; [Bing](/providers/bing), [Esri](/providers/esri), [Google](/providers/google), [OpenStreetMap](/providers/openstreetmap), [LocationIQ](/providers/locationiq), [OpenCage](/providers/opencage).
|
||||
|
||||
@@ -26,6 +26,7 @@ npm install leaflet-geosearch
|
||||
```
|
||||
|
||||
## Providers
|
||||
|
||||
`leaflet-geosearch` uses so-called "providers" to take care of building the correct service URL and parsing the retrieved data into a uniform format. Thanks to this architecture, it is trivial to add your own providers, so you can use your own geocoding service.
|
||||
|
||||
When [`OpenStreetMap`](/providers/openstreet) does not match your needs; you can also choose to use the [`Bing`](/providers/bing), [`Esri`](/providers/esri), [`Google`](/providers/google), [`LocationIQ`](/providers/locationiq), or [`OpenCage`](/providers/opencage) providers. Most of those providers do however require `API keys`. See the documentation pages on the relevant organisations on how to obtain these keys.
|
||||
@@ -35,6 +36,7 @@ In case you decide to write your own provider, please consider submitting a PR t
|
||||
Providers are unaware of any options you can give them. They are simple proxies to their endpoints. There is only one special property, and that is the `params` option. The difference being; that `params` will be included in the endpoint url. Being Often used for `API KEYS`, while the other attributes can be used for provider configuration.
|
||||
|
||||
## Browser support / Polyfills
|
||||
|
||||
This project is written with the latest technologies in mind. Thereby it is required to include some polyfills when you wish to support older browsers. These polyfills are recommended for IE and Safari support:
|
||||
|
||||
- [babel-polyfill][1], for `array.includes` support.
|
||||
|
||||
@@ -16,7 +16,7 @@ Or add the `SearchControl` to the leaflet map instance, to render a search contr
|
||||
See [Leaflet Control](/leaflet-control) for more info about the the options this control provides.
|
||||
|
||||
<Playground>
|
||||
<Map provider="OpenStreetMap" />
|
||||
<Map provider="OpenStreetMap" />
|
||||
</Playground>
|
||||
|
||||
```js
|
||||
@@ -32,7 +32,7 @@ map.addControl(searchControl);
|
||||
## Style
|
||||
|
||||
<Playground>
|
||||
<Map provider="OpenStreetMap" controlOptions={{ style: 'button' }} />
|
||||
<Map provider="OpenStreetMap" controlOptions={{ style: 'button' }} />
|
||||
</Playground>
|
||||
|
||||
```js
|
||||
|
||||
@@ -15,7 +15,6 @@ For more options and configurations, see the [Algolia docs][1].
|
||||
<Map provider="Algolia" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { AlgoliaProvider } from 'leaflet-geosearch';
|
||||
|
||||
@@ -24,9 +23,11 @@ const provider = new AlgoliaProvider();
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
[1]: https://community.algolia.com/places/api-clients.html#rest-api
|
||||
|
||||
@@ -16,22 +16,23 @@ For more options and configurations, see the [Microsoft developer docs][2].
|
||||
<Map provider="Bing" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { BingProvider } from 'leaflet-geosearch';
|
||||
|
||||
const provider = new BingProvider({
|
||||
params: {
|
||||
key: '__YOUR_BING_KEY__'
|
||||
key: '__YOUR_BING_KEY__',
|
||||
},
|
||||
});
|
||||
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
[1]: https://docs.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key
|
||||
|
||||
@@ -58,7 +58,7 @@ class MyProvider extends JsonProvider {
|
||||
parse({ data }) {
|
||||
// Note that `data` is the raw result returned by the server. This
|
||||
// method should return data in the SearchResult format.
|
||||
return data.map(x => ({
|
||||
return data.map((x) => ({
|
||||
x: data.x,
|
||||
y: data.y,
|
||||
label: data.label,
|
||||
@@ -69,6 +69,7 @@ class MyProvider extends JsonProvider {
|
||||
```
|
||||
|
||||
## Sharing
|
||||
|
||||
When you've build a custom provider that can be used by others, please consider opening a [pull-request][2], or publishing it to `npm`.
|
||||
|
||||
[1]: /providers/openstreetmap
|
||||
|
||||
@@ -8,13 +8,13 @@ import Playground from '../components/Playground';
|
||||
import Map from '../components/Map';
|
||||
|
||||
# Esri Provider
|
||||
|
||||
For more options and configurations, see the [ArcGIS developer docs][1].
|
||||
|
||||
<Playground>
|
||||
<Map provider="Esri" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { EsriProvider } from 'leaflet-geosearch';
|
||||
|
||||
@@ -23,9 +23,11 @@ const provider = new EsriProvider();
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
[1]: https://developers.arcgis.com/rest/geocode/api-reference/overview-world-geocoding-service.htm
|
||||
|
||||
@@ -16,22 +16,23 @@ For more options and configurations, see the [Google Maps developer docs][2].
|
||||
<Map provider="Google" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { GoogleProvider } from 'leaflet-geosearch';
|
||||
|
||||
const provider = new GoogleProvider({
|
||||
params: {
|
||||
key: '__YOUR_GOOGLE_KEY__'
|
||||
key: '__YOUR_GOOGLE_KEY__',
|
||||
},
|
||||
});
|
||||
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
## Optional parameters
|
||||
@@ -45,7 +46,7 @@ const provider = new GoogleProvider({
|
||||
params: {
|
||||
key: '__YOUR_GOOGLE_KEY__',
|
||||
language: 'nl', // render results in Dutch
|
||||
region: 'nl', // prioritize matches within The Netherlands
|
||||
region: 'nl', // prioritize matches within The Netherlands
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -16,22 +16,23 @@ For more options and configurations, see the [Here developer docs][2].
|
||||
<Map provider="Here" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { HereProvider } from 'leaflet-geosearch';
|
||||
|
||||
const provider = new HereProvider({
|
||||
params: {
|
||||
apiKey: '__YOUR_HERE_KEY__'
|
||||
apiKey: '__YOUR_HERE_KEY__',
|
||||
},
|
||||
});
|
||||
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
[1]: https://developer.here.com
|
||||
|
||||
@@ -16,22 +16,23 @@ For more options and configurations, see the [LocationIQ developer docs][2].
|
||||
<Map provider="LocationIQ" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { LocationIQProvider } from 'leaflet-geosearch';
|
||||
|
||||
const provider = new LocationIQProvider({
|
||||
params: {
|
||||
key: '__YOUR_LOCATIONIQ_KEY__'
|
||||
key: '__YOUR_LOCATIONIQ_KEY__',
|
||||
},
|
||||
});
|
||||
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
[1]: https://locationiq.org
|
||||
|
||||
@@ -16,22 +16,23 @@ For more options and configurations, see the [OpenCage developer docs][2].
|
||||
<Map provider="OpenCage" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { OpenCageProvider } from 'leaflet-geosearch';
|
||||
|
||||
const provider = new OpenCageProvider({
|
||||
params: {
|
||||
key: '__YOUR_OPENCAGE_KEY__'
|
||||
key: '__YOUR_OPENCAGE_KEY__',
|
||||
},
|
||||
});
|
||||
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
[1]: https://geocoder.opencagedata.com
|
||||
|
||||
@@ -15,18 +15,20 @@ For more options and configurations, see the [OpenStreetMap Nominatim wiki][1].
|
||||
<Map provider="OpenStreetMap" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { OpenStreetMapProvider } from 'leaflet-geosearch';
|
||||
|
||||
const provider = new OpenStreetMapProvider();
|
||||
|
||||
// add to leaflet
|
||||
import { GeoSearchControl } from 'leaflet-geosearch'; import {OpenStreetMapProvider} from "./index";
|
||||
import { GeoSearchControl } from 'leaflet-geosearch';
|
||||
import { OpenStreetMapProvider } from './index';
|
||||
|
||||
map.addControl(new GeoSearchControl({
|
||||
provider,
|
||||
}));
|
||||
map.addControl(
|
||||
new GeoSearchControl({
|
||||
provider,
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
## Authentication
|
||||
@@ -51,7 +53,7 @@ All options defined next to the `params` key, would have been added to the reque
|
||||
const provider = new OpenStreetMapProvider({
|
||||
params: {
|
||||
'accept-language': 'nl', // render results in Dutch
|
||||
'countrycodes': 'nl', // limit search results to the Netherlands
|
||||
countrycodes: 'nl', // limit search results to the Netherlands
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -16,7 +16,7 @@ There are two ways in which `leaflet-geosearch` can be used. Direct usage, for e
|
||||
All providers can be used without leaflet. You might want to bind them to a form;
|
||||
|
||||
<Playground>
|
||||
<Search provider="OpenStreetMap" />
|
||||
<Search provider="OpenStreetMap" />
|
||||
</Playground>
|
||||
|
||||
```js
|
||||
@@ -27,15 +27,15 @@ 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](/leaflet-control) for more info about the the options this control provides.
|
||||
|
||||
<Playground>
|
||||
<Map provider="OpenStreetMap" />
|
||||
<Map provider="OpenStreetMap" />
|
||||
</Playground>
|
||||
|
||||
|
||||
```js
|
||||
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
|
||||
|
||||
@@ -52,13 +52,13 @@ The search event of all providers return an array of `result` objects. The base
|
||||
|
||||
```ts
|
||||
interface result {
|
||||
x: number; // lon
|
||||
y: number; // lat
|
||||
label: string; // formatted address
|
||||
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
|
||||
[number, number], // south, west - lat, lon
|
||||
[number, number], // north, east - lat, lon
|
||||
];
|
||||
raw: any; // raw provider result
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user