MapContext
allows components to interact with InteractiveMap
or StaticMap
via React's context API.
import * as React from 'react';
import MapGL, {MapContext} from '@goongmaps/goong-map-react';
function CurrentZoomLevel() {
const context = React.useContext(MapContext);
return <div>{context.viewport.zoom}</div>;
}
function App() {
return (
<MapGL latitude={37.78} longitude={-122.41} zoom={8}>
<div style={{position: 'absolute', right: 20, bottom: 20}}>
<CurrentZoomLevel />
</div>
</MapGL>
);
}
It is also possible to consume MapContext
outside the map component, if you render your own Provider
. Note that not all context fields are available if you use it this way.
import * as React from 'react';
import MapGL, {MapContext} from '@goongmaps/goong-map-react';
function MyComponent() {
const {map} = React.useContext(MapContext);
if (map) {
// do something
}
return null;
}
function App() {
return (
<MapContext.Provider>
<div>
<MapGL latitude={37.78} longitude={-122.41} zoom={8}>
<div style={{position: 'absolute', right: 20, bottom: 20}}>
<CurrentZoomLevel />
</div>
</MapGL>
<div>
<MyComponent />
</div>
</div>
</MapContext.Provider>
);
}
The context value object may contain the following fields:
map
(Map) - the goong-js Map instanceviewport
(WebMercatorViewport) - the current viewportcontainer
(HTMLDivElement) - the outer container of the map componentonViewportChange
(Function) - a callback invoked when a map control requests a viewport change, with the signature onViewportChange(viewState, interactionState, oldViewState)
onViewStateChange
(Function) - an alternative callback invoked when a map control requests a viewport change, with the signature onViewStateChange({viewState, interactionState, oldViewState})
eventManager
(EventManager) - an EventManager instance used to register all interactive events