Skip to content

Commit c0ece1b

Browse files
committed
Update README to reflect v2 changes
1 parent 16a89f9 commit c0ece1b

File tree

1 file changed

+50
-34
lines changed

1 file changed

+50
-34
lines changed

README.md

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ React wrapper for mapbox-gl-geocoder for use with react-map-gl.
66

77

88
## Demo
9-
10-
https://codesandbox.io/s/vv29y730q3
9+
https://codesandbox.io/s/l7p179qr6m
1110

1211
## Installation
1312
NPM
@@ -22,46 +21,63 @@ Yarn
2221
$ yarn add react-map-gl-geocoder
2322
```
2423

24+
## Styling
25+
Import:
26+
```js
27+
import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css'
28+
```
29+
30+
or
31+
32+
Link tag in header:
33+
```html
34+
<link href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.1.2/mapbox-gl-geocoder.css' rel='stylesheet' />
35+
```
36+
2537

2638
## Props
27-
- `mapRef` {Object} Required.
28-
- `containerRef` {Object?} This can be used to place the geocoder outside of the map. The `position` prop is ignored if this is passed in. Example: https://codesandbox.io/s/v0m14q5rly
29-
- `onViewportChange` {Function} Is passed updated viewport values after executing a query.
30-
- `mapboxApiAccessToken` {String} Required.
31-
- `inputValue` {String?} Sets the search input value
32-
- `zoom` {Number} On geocoded result what zoom level should the map animate to when a `bbox` isn't found in the response. If a `bbox` is found the map will fit to the `bbox`. (optional, default `16`)
33-
- `placeholder` {String} Override the default placeholder attribute value. (optional, default `"Search"`)
34-
- `proximity` {Object?} A proximity argument: this is
35-
a geographical point given as an object with latitude and longitude
36-
properties. Search results closer to this point will be given
37-
higher priority.
38-
- `trackProximity` {Boolean} If true, the geocoder proximity will automatically update based on the map view. (optional, default `false`)
39-
- `bbox` {Array?} A bounding box argument: this is
40-
a bounding box given as an array in the format [minX, minY, maxX, maxY].
41-
Search results will be limited to the bounding box.
42-
- `types` {String?} A comma seperated list of types that filter
43-
results to match those specified. See <https://www.mapbox.com/developers/api/geocoding/#filter-type>
44-
for available types.
45-
- `country` {String?} A comma separated list of country codes to
46-
limit results to specified country or countries.
47-
- `minLength` {Number} Minimum number of characters to enter before results are shown. (optional, default `2`)
48-
- `limit` {Number} Maximum number of results to show. (optional, default `5`)
49-
- `language` {String?} Specify the language to use for response text and query result weighting. Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script. More than one value can also be specified, separated by commas.
50-
- `filter` {Function?} A function which accepts a Feature in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format to filter out results from the Geocoding API response before they are included in the suggestions list. Return `true` to keep the item, `false` otherwise.
51-
- `localGeocoder` {Function?} A function accepting the query string which performs local geocoding to supplement results from the Mapbox Geocoding API. Expected to return an Array of GeoJSON Features in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format.
52-
- `position` {String} Position on the map to which the geocoder control will be added. Valid values are `"top-left"`, `"top-right"`, `"bottom-left"`, and `"bottom-right"`. (optional, default `"top-right"`)
53-
- `onInit` {Function} Is passed Mapbox geocoder instance as param and is executed after Mapbox geocoder is initialized
54-
- `onClear` {Function} Executed when the input is cleared
55-
- `onLoading` {Function} Is passed `{ query }` as a param and is executed when the geocoder is looking up a query
56-
- `onResults` {Function} Is passed `{ results }` as a param and is executed when the geocoder returns a response
57-
- `onResult` {Function} Is passed `{ result }` as a param and is executed when the geocoder input is set
58-
- `onError` {Function} Is passed `{ error }` as a param and is executed when an error occurs with the geocoder
39+
Only `mapRef` and `mapboxApiAccessToken` are required.
40+
41+
| Name | Type | Default | Description |
42+
|--- | --- | --- | --- |
43+
| mapRef | Object | | Ref for react-map-gl map component.
44+
| containerRef | Object | | This can be used to place the geocoder outside of the map. The `position` prop is ignored if this is passed in. Example: https://codesandbox.io/s/v0m14q5rly
45+
| onViewportChange | Function | () => {} | Is passed updated viewport values after executing a query.
46+
| mapboxApiAccessToken | | | https://www.mapbox.com/
47+
| inputValue | String | | Sets the search input value
48+
| origin | String | "https://api.mapbox.com" | Use to set a custom API origin.
49+
| zoom | Number | 16 | On geocoded result what zoom level should the map animate to when a `bbox` isn't found in the response. If a `bbox` is found the map will fit to the `bbox`.
50+
| placeholder | String | "Search" | Override the default placeholder attribute value.
51+
| proximity | Object | | A proximity argument: this is a geographical point given as an object with latitude and longitude properties. Search results closer to this point will be given higher priority.
52+
| trackProximity | Boolean | false | If true, the geocoder proximity will automatically update based on the map view.
53+
| collapsed | Boolean | false | If true, the geocoder control will collapse until hovered or in focus.
54+
| clearAndBlurOnEsc | Boolean | false | If true, the geocoder control will clear it's contents and blur when user presses the escape key.
55+
| clearOnBlur | Boolean | false | If true, the geocoder control will clear its value when the input blurs.
56+
| bbox | Array | | A bounding box argument: this is a bounding box given as an array in the format [minX, minY, maxX, maxY]. Search results will be limited to the bounding box.
57+
| types | String | | A comma seperated list of types that filter results to match those specified. See <https://www.mapbox.com/developers/api/geocoding/#filter-type> for available types.
58+
| countries | String | | A comma separated list of country codes to limit results to specified country or countries.
59+
| minLength | Number | 2 | Minimum number of characters to enter before results are shown.
60+
| limit | Number | 5 | Maximum number of results to show.
61+
| language | String | | Specify the language to use for response text and query result weighting. Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script. More than one value can also be specified, separated by commas.
62+
| filter | Function | | A function which accepts a Feature in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format to filter out results from the Geocoding API response before they are included in the suggestions list. Return `true` to keep the item, `false` otherwise.
63+
| localGeocoder | Function | | A function accepting the query string which performs local geocoding to supplement results from the Mapbox Geocoding API. Expected to return an Array of GeoJSON Features in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format.
64+
| reverseGeocode | Boolean | false | Enable reverse geocoding. Defaults to false. Expects coordinates to be lat, lon.
65+
| enableEventLogging | Boolean | true | Allow Mapbox to collect anonymous usage statistics from the plugin.
66+
| render | Function | | A function that specifies how the results should be rendered in the dropdown menu. Accepts a single Carmen GeoJSON object as input and return a string. Any html in the returned string will be rendered. Uses mapbox-gl-geocoder's default rendering if no function provided.
67+
| position | String | "top-right" | Position on the map to which the geocoder control will be added. Valid values are `"top-left"`, `"top-right"`, `"bottom-left"`, and `"bottom-right"`.
68+
| onInit | Function | () => {} | Is passed Mapbox geocoder instance as param and is executed after Mapbox geocoder is initialized.
69+
| onClear | Function | () => {} | Executed when the input is cleared.
70+
| onLoading | Function | () => {} | Is passed `{ query }` as a param and is executed when the geocoder is looking up a query.
71+
| onResults | Function | () => {} | Is passed `{ results }` as a param and is executed when the geocoder returns a response.
72+
| onResult | Function | () => {} | Is passed `{ result }` as a param and is executed when the geocoder input is set.
73+
| onError | Function | () => {} | Is passed `{ error }` as a param and is executed when an error occurs with the geocoder.
5974

6075

6176

6277
## Example
6378
```js
6479
import 'mapbox-gl/dist/mapbox-gl.css'
80+
import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css'
6581
import React, { Component } from 'react'
6682
import MapGL from 'react-map-gl'
6783
import Geocoder from 'react-map-gl-geocoder'

0 commit comments

Comments
 (0)