chore: run linter

This commit is contained in:
Stephan Meijer
2020-05-22 20:47:45 +02:00
parent 1592d7418b
commit 72196de4c6
18 changed files with 566 additions and 1086 deletions

View File

@@ -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.

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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
},
});
```

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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
},
});
```

View File

@@ -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
}
```