-
Notifications
You must be signed in to change notification settings - Fork 8
/
geocoder.js
60 lines (54 loc) · 1.28 KB
/
geocoder.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import lonlat from '@conveyal/lonlat'
import get from 'lodash/get'
import React from 'react'
import Select from 'react-select/async'
import mapboxSearch from 'lib/utils/mapbox-search'
import {selectStyles} from '../select'
const geocoderStyle = {
position: 'absolute',
top: '10px',
left: '10px',
width: '296px',
zIndex: '1000'
}
export default function Geocoder(p) {
function panToResult(r) {
const map = p.getMap()
if (r && map) {
if (r.bbox) {
const [west, south, east, north] = r.bbox
const bounds = [
[south, west],
[north, east]
]
map.fitBounds(bounds)
} else {
map.setView([r.center[1], r.center[0]], 19)
}
map.fire('geocode', r)
}
}
function searchWithProximity(t, callback) {
const map = p.getMap()
mapboxSearch(
t,
{
proximity: map ? lonlat.toString(map.getCenter()) : ''
},
callback
)
}
return (
<div style={geocoderStyle}>
<Select
isDisabled={p.disabled}
getOptionLabel={f => get(f, 'place_name')}
getOptionValue={f => get(f, 'id')}
loadOptions={searchWithProximity}
onChange={panToResult}
placeholder='Search map...'
styles={selectStyles}
/>
</div>
)
}