samsamskies / react-map-gl-geocoder Goto Github PK
View Code? Open in Web Editor NEWReact wrapper for mapbox-gl-geocoder for use with react-map-gl
License: MIT License
React wrapper for mapbox-gl-geocoder for use with react-map-gl
License: MIT License
When I provide an inputValue
the value is simply displayed in the box but no search is done. How do you also tell the geocoder to also do the search?
Hi,
First, thank you for all the hard work.
Is there a way I can show only a part of the result in input field? For example, after selecting a value from the dropdown Orlando International Airport, Orlando, Florida 32827, United States
, the input field shows only Orlando International Airport
.
I tried to set it manually in onResult
, but the input is back to the original value after the component reloads.
Thank you.
For example, the screenshot image in the README does not need to be distributed with the package. This file is unnecessarily bloating the package.
First off, useful thing that you made. Thanks!
I'm attempting to add geocoder functionality to our map component for Civic (https://github.com/hackoregon/civic), and decided to give using your package a try.
I was able to get it working, but the geocoder won't render on initial load until after you interact with the map.
Looking at your code, you are using componentDidUpdate to check for the presence and render the geocoder. This means that the geocoder will only appear after component updates, not on initial load. A quick fix would be to call the same code in componentDidMount.
Here's my code:
https://github.com/hackoregon/civic/pull/363/files#diff-d00726a23a264cadbb4187a041e71c16
Let me know if you have questions!
Thanks for providing this wrapper.
I updated packages in the codesandbox example and it's not running any more.
"deck.gl": "6.3.2",
"react-map-gl": "4.0.5",
"react-map-gl-geocoder": "1.5.6",
The errors occur only when adding the Geocoder component.
import React from "react"
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css"
import "mapbox-gl/dist/mapbox-gl.css"
import ReactMapGL from "react-map-gl"
import Geocoder from "react-map-gl-geocoder"
export default function StationMap() {
const settings = {
dragPan: true,
dragRotate: true,
scrollZoom: false,
touchZoom: true,
touchRotate: true,
keyboard: true,
doubleClickZoom: true,
minZoom: 0,
maxZoom: 20,
minPitch: 0,
maxPitch: 85,
}
const [viewport, setViewport] = React.useState({
latitude: 42.444,
longitude: -76.5019,
zoom: 8,
width: "100%",
height: "100%",
})
const myMap = React.createRef()
return (
<ReactMapGL
ref={myMap}
{...viewport}
{...settings}
mapboxApiAccessToken={process.env.GATSBY_MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/streets-v11"
onViewportChange={viewport => setViewport(viewport)}
>
<Geocoder
mapRef={myMap}
mapboxApiAccessToken={process.env.GATSBY_MAPBOX_TOKEN}
>
</Geocoder>
</ReactMapGL>
)
}
index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
at i.e.initializeGeocoder (index.m.js:1)
at i.o.componentDidMount (index.m.js:1)
at i.<anonymous> (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:21963)
at commitLayoutEffects (react-dom.development.js:25287)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at commitRootImpl (react-dom.development.js:25023)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at commitRoot (react-dom.development.js:24864)
at finishSyncRender (react-dom.development.js:24250)
at performSyncWorkOnRoot (react-dom.development.js:24222)
at react-dom.development.js:12239
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
at flushSyncCallbackQueue (react-dom.development.js:12222)
at flushPassiveEffectsImpl (react-dom.development.js:25367)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushPassiveEffects (react-dom.development.js:25304)
at react-dom.development.js:25183
at workLoop (scheduler.development.js:759)
at flushWork (scheduler.development.js:714)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
e.initializeGeocoder @ index.m.js:1
o.componentDidMount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
commitLifeCycles @ react-dom.development.js:21963
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
index.m.js:1 Uncaught TypeError: Cannot read property 'remove' of undefined
at Gt.off (index.m.js:1)
at i.e.unsubscribeEvents (index.m.js:1)
at i.e.removeGeocoder (index.m.js:1)
at i.o.componentWillUnmount (index.m.js:1)
at i.<anonymous> (react-hot-loader.development.js:704)
at callComponentWillUnmountWithTimer (react-dom.development.js:21756)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at safelyCallComponentWillUnmount (react-dom.development.js:21763)
at commitUnmount (react-dom.development.js:22256)
at commitNestedUnmounts (react-dom.development.js:22350)
at unmountHostComponents (react-dom.development.js:22682)
at commitDeletion (react-dom.development.js:22768)
at commitMutationEffects (react-dom.development.js:25266)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at commitRootImpl (react-dom.development.js:24989)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at commitRoot (react-dom.development.js:24864)
at finishSyncRender (react-dom.development.js:24250)
at performSyncWorkOnRoot (react-dom.development.js:24222)
at react-dom.development.js:12239
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
at flushSyncCallbackQueue (react-dom.development.js:12222)
at flushPassiveEffectsImpl (react-dom.development.js:25367)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushPassiveEffects (react-dom.development.js:25304)
at react-dom.development.js:25183
at workLoop (scheduler.development.js:759)
at flushWork (scheduler.development.js:714)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
off @ index.m.js:1
e.unsubscribeEvents @ index.m.js:1
e.removeGeocoder @ index.m.js:1
o.componentWillUnmount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
callComponentWillUnmountWithTimer @ react-dom.development.js:21756
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
safelyCallComponentWillUnmount @ react-dom.development.js:21763
commitUnmount @ react-dom.development.js:22256
commitNestedUnmounts @ react-dom.development.js:22350
unmountHostComponents @ react-dom.development.js:22682
commitDeletion @ react-dom.development.js:22768
commitMutationEffects @ react-dom.development.js:25266
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:24989
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 7 more frames
index.js:2177 The above error occurred in the <i> component:
in i (at stationsMap.js:68)
in div (created by Context.Consumer)
in div (created by AutoSizer)
in AutoSizer (created by StaticMap)
in div (created by StaticMap)
in StaticMap (created by InteractiveMap)
in div (created by InteractiveMap)
in InteractiveMap (at stationsMap.js:59)
in div (at stationsMap.js:47)
in div (at stationsMap.js:37)
in StationMap (at pages/index.js:63)
in div (at pages/index.js:62)
in div (at pages/index.js:60)
in section (at pages/index.js:59)
in main (at layout.js:24)
in Layout (at pages/index.js:15)
in IndexPage (created by HotExportedIndexPage)
in AppContainer (created by HotExportedIndexPage)
in HotExportedIndexPage (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in SessionCheck (at gatsby-browser.js:75)
in _default (at app.js:67)
React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21703
logError @ react-dom.development.js:21740
callback @ react-dom.development.js:23144
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:21997
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.js:2177 TypeError: Cannot read property 'addControl' of null
at i.e.initializeGeocoder (index.m.js:1)
at i.o.componentDidMount (index.m.js:1)
at i.<anonymous> (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:21963)
at commitLayoutEffects (react-dom.development.js:25287)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at commitRootImpl (react-dom.development.js:25023)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at commitRoot (react-dom.development.js:24864)
at finishSyncRender (react-dom.development.js:24250)
at performSyncWorkOnRoot (react-dom.development.js:24222)
at react-dom.development.js:12239
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
at flushSyncCallbackQueue (react-dom.development.js:12222)
at flushPassiveEffectsImpl (react-dom.development.js:25367)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushPassiveEffects (react-dom.development.js:25304)
at react-dom.development.js:25183
at workLoop (scheduler.development.js:759)
at flushWork (scheduler.development.js:714)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:219) "
in AppContainer (created by HotExportedIndexPage)
in HotExportedIndexPage (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Context.Consumer (created by Location)
in Location (at root.js:118)
in Root (at root.js:126)"
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
error @ react-hot-loader.development.js:294
componentDidCatch @ react-hot-loader.development.js:2401
callback @ react-dom.development.js:23149
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:21997
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
at i.e.initializeGeocoder (index.m.js:1)
at i.o.componentDidMount (index.m.js:1)
at i.<anonymous> (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:21963)
at commitLayoutEffects (react-dom.development.js:25287)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at commitRootImpl (react-dom.development.js:25023)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at commitRoot (react-dom.development.js:24864)
at finishSyncRender (react-dom.development.js:24250)
at performSyncWorkOnRoot (react-dom.development.js:24222)
at react-dom.development.js:12239
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
at flushSyncCallbackQueue (react-dom.development.js:12222)
at flushPassiveEffectsImpl (react-dom.development.js:25367)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushPassiveEffects (react-dom.development.js:25304)
at react-dom.development.js:25183
at workLoop (scheduler.development.js:759)
at flushWork (scheduler.development.js:714)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
e.initializeGeocoder @ index.m.js:1
o.componentDidMount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
commitLifeCycles @ react-dom.development.js:21963
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
index.js:2177 The above error occurred in the <AppContainer> component:
in AppContainer (created by HotExportedIndexPage)
in HotExportedIndexPage (created by PageRenderer)
in PageRenderer (at json-store.js:93)
in JSONStore (at root.js:51)
in RouteHandler (at root.js:73)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:64)
in RouteUpdates (at root.js:63)
in EnsureResources (at root.js:61)
in LocationHandler (at root.js:119)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in SessionCheck (at gatsby-browser.js:75)
in _default (at app.js:67)
React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21703
logError @ react-dom.development.js:21740
callback @ react-dom.development.js:23144
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:21997
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
at i.e.initializeGeocoder (index.m.js:1)
at i.o.componentDidMount (index.m.js:1)
at i.<anonymous> (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:21963)
at commitLayoutEffects (react-dom.development.js:25287)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at commitRootImpl (react-dom.development.js:25023)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at commitRoot (react-dom.development.js:24864)
at finishSyncRender (react-dom.development.js:24250)
at performSyncWorkOnRoot (react-dom.development.js:24222)
at react-dom.development.js:12239
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
at flushSyncCallbackQueue (react-dom.development.js:12222)
at flushPassiveEffectsImpl (react-dom.development.js:25367)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushPassiveEffects (react-dom.development.js:25304)
at react-dom.development.js:25183
at workLoop (scheduler.development.js:759)
at flushWork (scheduler.development.js:714)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
e.initializeGeocoder @ index.m.js:1
o.componentDidMount @ index.m.js:1
componentDidMount @ react-hot-loader.development.js:704
commitLifeCycles @ react-dom.development.js:21963
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
index.js:2177 The above error occurred in the <LocationProvider> component:
in LocationProvider (created by Context.Consumer)
in Location (at root.js:118)
in Root (at root.js:126)
in SessionCheck (at gatsby-browser.js:75)
in _default (at app.js:67)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2177
r @ backend.js:6
logCapturedError @ react-dom.development.js:21703
logError @ react-dom.development.js:21740
update.callback @ react-dom.development.js:23108
callCallback @ react-dom.development.js:13863
commitUpdateEffects @ react-dom.development.js:13901
commitUpdateQueue @ react-dom.development.js:13889
commitLifeCycles @ react-dom.development.js:22022
commitLayoutEffects @ react-dom.development.js:25287
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:467
commitRootImpl @ react-dom.development.js:25023
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
commitRoot @ react-dom.development.js:24864
finishSyncRender @ react-dom.development.js:24250
performSyncWorkOnRoot @ react-dom.development.js:24222
(anonymous) @ react-dom.development.js:12239
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushSyncCallbackQueueImpl @ react-dom.development.js:12234
flushSyncCallbackQueue @ react-dom.development.js:12222
flushPassiveEffectsImpl @ react-dom.development.js:25367
unstable_runWithPriority @ scheduler.development.js:815
runWithPriority$2 @ react-dom.development.js:12189
flushPassiveEffects @ react-dom.development.js:25304
(anonymous) @ react-dom.development.js:25183
workLoop @ scheduler.development.js:759
flushWork @ scheduler.development.js:714
performWorkUntilDeadline @ scheduler.development.js:219
Show 2 more frames
index.m.js:1 Uncaught TypeError: Cannot read property 'addControl' of null
at i.e.initializeGeocoder (index.m.js:1)
at i.o.componentDidMount (index.m.js:1)
at i.<anonymous> (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:21963)
at commitLayoutEffects (react-dom.development.js:25287)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:467)
at commitRootImpl (react-dom.development.js:25023)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at commitRoot (react-dom.development.js:24864)
at finishSyncRender (react-dom.development.js:24250)
at performSyncWorkOnRoot (react-dom.development.js:24222)
at react-dom.development.js:12239
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushSyncCallbackQueueImpl (react-dom.development.js:12234)
at flushSyncCallbackQueue (react-dom.development.js:12222)
at flushPassiveEffectsImpl (react-dom.development.js:25367)
at unstable_runWithPriority (scheduler.development.js:815)
at runWithPriority$2 (react-dom.development.js:12189)
at flushPassiveEffects (react-dom.development.js:25304)
at react-dom.development.js:25183
at workLoop (scheduler.development.js:759)
at flushWork (scheduler.development.js:714)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:219)
As a user, I don't want to have to look at the source code to know that you can pass Mapbox Geocoder options as a prop and that there's a method to get access to the Mapbox Geocoder instance. It would also be nice to have a link directly to the Mapbox Geocoder docs.
As a user, I'd be more confident in using this library if it was well tested.
Hey there! I'm having some issues rendering the GeoJsonLayer with the searchResultLayer...
I am using the Demo as a base code (https://codesandbox.io/s/l7p179qr6m) and everything works fine, but the red circle isn't showing up in the results. Any guess? Thanks in advance!
Importing mapbox-gl-geocoder.css from within this component forces users to have a build system setup to accommodate importing CSS files. Users should include the CSS however they'd like to, similar to how react-map-gl does it. https://uber.github.io/react-map-gl/#/Documentation/getting-started/get-started
Will do a major version bump when this is implemented.
When I am trying to search some places(like country names), viewport does not update and I receive next error:
Uncaught Error: Pixel project matrix not invertible
at WebMercatorViewport.Viewport (viewport.js:38)
at new WebMercatorViewport (web-mercator-viewport.js:61)
at fitBounds (index.js:42)
at EventEmitter.Geocoder._this.handleResult (index.js:201)
at EventEmitter../node_modules/events/events.js.EventEmitter.emit (events.js:81)
at MapboxGeocoder._onChange (index.js:162)
at Suggestions../node_modules/suggestions/src/suggestions.js.Suggestions.value (suggestions.js:174)
at List../node_modules/suggestions/src/list.js.List.handleMouseUp (list.js:77)
at List. (list.js:71)
On the other hand, when I type city name, everything is fine.
What may cause it and how to fix ?
My code is here https://github.com/NetisGod/Viewpoints-app
Demo section
Example code displayed
Hello,
Separate question from my other one (#8), how do I add a onResults or onResult handler to the component?
Do you know how I could implement this into kepler.gl's module?
I tried this.... but no luck
`
import React, {Component} from 'react';
import {connect} from 'react-redux';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import KeplerGl from 'kepler.gl';
const MAPBOX_TOKEN = 'XXXX'; // eslint-disable-line
import Geocoder from 'react-map-gl-geocoder'
class App extends Component {
render() {
return (
<div style={{position: 'absolute', width: '100%', height: '100%', minHeight: '70vh'}}>
{({height, width}) => (
<KeplerGl
mapboxApiAccessToken={MAPBOX_TOKEN}
id="map"
ref={this.mapRef}
width={width}
height={height}
>
<Geocoder
mapRef={this.mapRef}
onViewportChange={this.handleGeocoderViewportChange}
mapboxApiAccessToken={MAPBOX_TOKEN}
position="top-left"
/>
</KeplerGl>
)}
</AutoSizer>
</div>
);
}
}
const mapStateToProps = state => state;
const dispatchToProps = dispatch => ({dispatch});
export default connect(mapStateToProps, dispatchToProps)(App);
`
After incorporating this library, I keep getting the following error:
./node_modules/react-map-gl-geocoder/node_modules/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
| /* Basics */
> .mapboxgl-ctrl-geocoder,
| .mapboxgl-ctrl-geocoder *,
| .mapboxgl-ctrl-geocoder *:after,
The React app uses the NextJS framework (v8.0.4) and react-map-gl-geocoder version 1.8.0.
I'm guessing this could be a webpack config related problem since NextJS manages webpack for you. I will see if I can come up with anything there and report back.
This is probably a noob question on my part so apologies in advance.
I am currently trying to add geo-filtering to my map to lock things down to a city but search suggestions still show areas outside the target zone which tells me I'm probably doing something wrong.
Here's my code:
<MapGL
ref={this.mapRef}
{...viewport}
onViewportChange={this.handleViewportChange}
mapboxApiAccessToken={MAPBOX_TOKEN}
>
<Geocoder
mapRef={this.mapRef}
onResult={this.handleOnResult}
containerRef={this.geocoderContainerRef}
onViewportChange={this.handleGeocoderViewportChange}
mapboxApiAccessToken={MAPBOX_TOKEN}
reverseGeocode={true}
bbox={[-0.489,51.28,0.236,51.686]}
filter={event => {
// returns true if item contains New South Wales region
return event.context.map( i => {
return (i.id.split('.').shift() === 'place' && i.text === 'London');
}).reduce(function (acc, cur) {
return acc || cur;
});;
}}
/>
<DeckGL {...viewport} layers={[searchResultLayer]} />
</MapGL>
I guess the question here would be; what should go in the reduce function arguments?
Allow users to pass in an inputValue
prop which will give them the ability to set the input value.
Is there any way to prevent the map from zooming into the selected address? I'm trying to use the geocoder to basically just allow the user to type in an address, then setting the lat/lng into the state without actually moving the viewport there.
essentially i was to use this value from the state to filter my markers based of a proximity around result.result.center
coords
handleGeocoderViewportChange = viewport => {
const geocoderDefaultOverrides = { transitionDuration: 1000 };
return this._onViewportChange({
...viewport,
...geocoderDefaultOverrides
});
};
handleGeocoderResult = result => {
this.setState({
searchLngLat: result.result.center
});
};
<Geocoder
mapRef={this.mapRef}
onViewportChange={this.handleGeocoderViewportChange}
onResult={this.handleGeocoderResult}
mapboxApiAccessToken={"***"}/>
In your example code, the MapGL viewport state does not update when a location is changed in the geocoder, and I don't think there is an easy way to do it with your module as structured.
When the location is updated from the geocoder, the state of the MapGL component will not be up to date with the map, and if you're doing anything else that relies on the viewport (e.g. Deck.GL layers), you'll have issues.
NavigationControl in react-map-gl implements an onViewportChange prop, which I think is a pattern that could be implemented here.
https://github.com/uber/react-map-gl/blob/master/src/components/navigation-control.js
This forked sandbox logs viewport adds NavigationControl showing use of the onViewportChange prop and logs viewport to the console.
https://codesandbox.io/s/1zk0wz3n87
I could work up a PR if you'd prefer.
Instead of having a search box can I feed in an address from dataset and get back Lat and Long to use in Mapbox?
Please check this out: https://codesandbox.io/s/2oml8ypklp
Try clicking once on the map. You will see the geocoder. Click again. nothing happens (it should hide)
Click again, a second geocoder appears.
And like that forever
Thanks!
Hello and thanks for this nice library!
I'm passing a queryParams
prop to geocoder but it doesn't change the request. Am I doing it wrong?
const bbox = {
ne: { lng: -34.31067179238596, lat: 46.03500843336249 },
sw: { lng: -113.41223429238529, lat: -9.32997469975038 },
};
const center = {
latitude: 20.827873989993776,
longitude: -73.86145304236818,
};
const queryParams = {
bbox: [bbox.sw.lng, bbox.sw.lat, bbox.ne.lng, bbox.sw.lng],
proximity: [center.longitude, center.latitude],
};
<Geocoder
mapboxApiAccessToken={mapboxApiAccessToken}
mapRef={this.mapRef}
containerRef={this.geocoderContainerRef}
queryParams={queryParams}
clearAndBlurOnEsc
onViewportChange={this.onViewportChange}
/>
Result in network console stays the same and does not include my params:
https://api.mapbox.com/geocoding/v5/mapbox.places/me.json?limit=5&language=fr-FR&access_token=[secret]
I get an error when the map is unmount:
index.js:247 Uncaught TypeError: Cannot read property 'removeControl' of null
at Geocoder._this.removeGeocoder (index.js:247)
at Geocoder.componentWillUnmount (index.js:334)
at callComponentWillUnmountWithTimer (react-dom.development.js:16816)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
It seems to happen because the MapGL unmount first, so its ref becomes null, and then the Geocoder unmount after and try to use the ref in the removeGeocoder()
function.
Put props documentation into a table to make it easier to read.
Need to export a bundle instead of just the transpiled code.
Steps to recreate:
Hong Kong
and select first option.g
and the end of Hong Kong
and then select Hong Kong International Airport
by clicking on it.Result ends up being Hong Kong
instead of Hong Kong International Airport
as expected. 🙁
For step 2, if you hit Enter
instead of clicking on the option it works as expected.
I'm trying to display the address of the location on click but it's not showing in the geocoder.
<MapGl
{...viewport}
ref={mapRef}
mapboxApiAccessToken={token}
onViewportChange={viewState => setViewport(viewState)}
transitionInterpolator={new FlyToInterpolator()}
onClick={e => {
handleGeocoderViewportChange({ latitude: e.lngLat[1], longitude: e.lngLat[0] });
>
<Geocoder
mapRef={mapRef}
mapboxApiAccessToken={token}
onViewportChange={handleGeocoderViewportChange}
proximity={{ ...viewport }}
trackProximity
reverseGeocode
/>
</MapGl>
Shouldn't assume that all users already have prop-types as a dependency in their app.
Allow user to pick which corner of the map to place the geocoder widget.
When hovering the cursor over the geocoder control, clicking and dragging with the cursor moves the map below. The map also zooms when double-clicking over the search bar (see below). This can cause issue when drag-selecting the string in the control.
The issue is replicated in the demo in this repo (https://codesandbox.io/s/l7p179qr6m).
Does anyone have a workaround for this? I've tried modifying the z-index so far with no luck.
Thanks @SamSamskies for this great library!
Thanks for making this! I've tried incorporating it into my Map
component, but it's not showing up at all, for some reason. Here is my code:
import React, { Component } from 'react';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapGL, { NavigationControl } from 'react-map-gl';
import Geocoder from 'react-map-gl-geocoder';
const token = process.env.REACT_APP_API_KEY;
class Map extends Component {
constructor(props) {
super(props);
this.state = {
viewport: {
latitude: 35.9555072,
longitude: -83.9901184,
zoom: 12,
width: 500,
height: 500
}
};
}
mapRef = React.createRef()
render() {
const { viewport } = this.state;
const updateViewport = (viewport) => {
this.setState({ viewport })
};
return (
<MapGL {...viewport} mapRef={this.mapRef} mapStyle='mapbox://styles/mapbox/streets-v9' mapboxApiAccessToken={token} onViewportChange={updateViewport}>
<div className="nav">
<NavigationControl onViewportChange={updateViewport} />
</div>
<div className="geocoder">
<Geocoder mapRef={this.mapRef} onViewportChange={updateViewport} mapboxApiAccessToken={token} />
</div>
</MapGL>
);
}
}
export default Map;
I'm just not seeing any geocoder component appearing on my screen at all. Is there something I'm missing?
Hi, when running your codesandbox, console shows error 422 (unprocessable entity).
Hi @SamSamskies,
I just integrated this into my project and noticed that the animation is very slow when updating location. Is there a way to change the settings to update this? Thanks for your hard work!
<DeckGL
ref={this.deckGl}
layers={renderLayers({
gridData,
gridDataMax,
selectedData,
radiusSelection,
layers,
zoom: Math.trunc(viewState.zoom),
onClick: (click, ev) => this.onClick(click, ev),
poiOnClick: e => this.poiOnClick(e),
layerSettings,
colorRange,
})}
initialViewState={{ ...viewState, dragRotate: false, pitchWithRotate: false, doubleClickZoom: false }}
onWebGLInitialized={this.onInitialized}
onViewStateChange={this.onViewStateChange}
onDragEnd={this.onDragEnd}
controller={controller}
getCursor={() => 'pointer'}
>
<StaticMap
ref={ref => { this.staticMap = ref && ref.getMap() }}
reuseMaps
mapStyle={this.state.mapStyle}
preventStyleDiffing
mapboxApiAccessToken={MAPBOX_TOKEN}
onLoad={this.onLoadStaticMap}
>
{popup.clickedObject && selectedDataOnSameZoomLevel && (
<Popup
longitude={popup.x}
latitude={popup.y}
closeButton={false}
>
<div className={compareView ? 'split-view' : ''}>
{compareView &&
((mapKey === 'mainMap') ? <span className="viewId viewIdMain">View 1</span> : <span className="viewId viewIdSecondary">View 2</span>)
}
<strong>{popup.label}</strong><br />
{
zoomLevel >= 13 &&
(<span className="location-capitalize">{popup.location}</span>)
}
</div>
</Popup>
)}
{layers.layersPopup && zoomLevel >= 13 && (
<Popup
className='popup-poi'
longitude={layers.layersPopup.x}
latitude={layers.layersPopup.y}
onClose={this.poiOnClose}
>
<div>
<h3 className="title">{layers.layersPopup.title}</h3>
<p className="category">{layers.layersPopup.category}</p>
</div>
</Popup>
)}
</StaticMap>
<Geocoder
mapRef={this.deckGl}
onViewportChange={this.onViewStateChange}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
</DeckGL>
For my example code above, I cannot use <Geocoder>
component inside <DeckGL>
. I got this error.
@SamSamskies please help me for this, thanks 😄
i updated packages and now i get this error
Failed to compile.
./node_modules/react-map-gl-geocoder/node_modules/viewport-mercator-project/dist/esm/viewport.js
Module not found: Can't resolve 'gl-mat4/invert' in '...'
react: 16.8.1,
deck.gl: 6.4.1,
react-map-gl: 4.0.10,
react-map-gl-geocode": 1.6.3,
Example: mount with position="top-left" and try to change it to position="top-right"
After click on a result from the geocoder, I'm getting this error:
assert.js:3 Uncaught Error: viewport-mercator-project: assertion failed.
at assert (assert.js:3)
at pixelsToWorld (web-mercator-utils.js:194)
at WebMercatorViewport.unproject (viewport.js:102)
at InteractiveMap._onMouseClick (interactive-map.js:265)
at Array.<anonymous> (event-manager.js:360)
at Manager.emit (hammer.js:2525)
at TapRecognizer.emit (hammer.js:2130)
at TapRecognizer.tryEmit (hammer.js:1572)
at TapRecognizer.<anonymous> (hammer.js:2109)
at boundFn (hammer.js:197)
And the whole screen is turning white.
Here is the error - https://www.loom.com/share/557cb7a2172342d3b7968dac4a197b90
When I am selecting a search result it doesn't show up on the input field and sometimes shows the wrong one(previous one).
Some of my users are experiencing 422 errors in production.
Here is an example of log received through Sentry.io :
{
"body": {
"message": "Query too long - 21/20 tokens"
},
"type": "HttpError",
"message": "Query too long - 21/20 tokens",
"request": {
"body": null,
"origin": "https://api.mapbox.com",
"file": null,
"_options": {
"path": "/geocoding/v5/:mode/:query.json",
"params": "[Object]",
"method": "GET",
"query": "[Object]"
},
"response": null,
"id": 15,
"headers": {},
"client": {
"origin": "https://api.mapbox.com",
"accessToken": "[FILTERED]"
},
"params": {
"query": "jade & Spa, Calle 55 Supermanzana II, Manzana 4 Lote I-0I, Puerto Morelos Benito Juárez, Puerto Morelos, Quintana Roo 77580, Mexic",
"mode": "mapbox.places"
},
"aborted": false,
"error": "[Circular ~]",
"path": "/geocoding/v5/:mode/:query.json",
"method": "GET",
"query": {
"country": "[undefined]",
"proximity": "[Array]",
"limit": 5,
"language": "[Array]"
},
"emitter": {
"_events": "[Object]",
"_eventsCount": 0
},
"sent": true
},
"statusCode": 422
}
As seen in Mapbox documentation, we may have to filter words in query so it never sends more than 20 words: https://docs.mapbox.com/api/search/#geocoding-api-errors
Let me know if you have the same issue and if I can do anything.
Thanks
Hi there,
I copied the code from https://codesandbox.io/s/vv29y730q3 to my project and getting this error from the MapboxGeocoder constructor:
Uncaught TypeError: EventEmitter is not a constructor
at new MapboxGeocoder (index.js?b9d5:43)
at Geocoder._this.initializeGeocoder (index.js?05ab:98)
at Geocoder.componentDidMount (index.js?05ab:231)
at commitLifeCycles (react-dom.development.js?9a03:17128)
at commitAllLifeCycles (react-dom.development.js?9a03:18530)
at HTMLUnknownElement.callCallback (react-dom.development.js?9a03:149)
"react": "^16.8.2",
"react-map-gl": "^4.0.13",
"react-map-gl-geocoder": "^1.6.4"
Thank you.
You might not need a map when you are not using flyTo from mapbox gl.
I'm not able to load the plugin at all via pnpm.
window is not defined
ReferenceError: window is not defined
at Object.<anonymous> (../..//node_modules/.registry.npmjs.org/suggestions/1.6.0/node_modules/suggestions/index.js:57:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/./..//node_modules/.registry.npmjs.org/@mapbox/mapbox-gl-geocoder/4.1.2/node_modules/@mapbox/mapbox-gl-geocoder/lib/index.js:3:17)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.