You may create your own map control components by consuming MapContext.
The following component renders a label "(longitude, latitude)" at the given coordinate:
import * as React from 'react';
import MapGL, {MapContext} from '@goongmaps/goong-map-react';
function CustomMarker(props) {
const context = React.useContext(MapContext);
const {longitude, latitude} = props;
const [x, y] = context.viewport.project([longitude, latitude]);
const markerStyle = {
position: 'absolute',
background: '#fff',
left: x,
top: y
};
return (
<div style={markerStyle} >
({longitude}, {latitude})
</div>
);
}
function App() {
return (
<MapGL longitude={-122.45} latitude={37.78} zoom={12} goongApiAccessToken={GOONG_MAPTILES_KEY}>
<CustomeMarker longitude={-122.45} latitude={37.78} />
</MapGL>
)
}
useMapControl
is an experimental API that makes it easier to create controls with event handling.
import * as React from 'react';
import MapGL, {_useMapControl as useMapControl} from '@goongmaps/goong-map-react';
function CustomControl(props) {
const [counter, setCounter] = React.useState(0);
const {context, containerRef} = useMapControl({
onDragStart: evt => {
// prevent the base map from panning
evt.stopPropagation();
},
onClick: evt => {
if (evt.type === 'click') {
setCounter(v => v + 1);
}
}
});
return (
<div ref={containerRef} >
Clicked {counter} times
</div>
);
}
function App() {
return (
<MapGL longitude={-122.45} latitude={37.78} zoom={12} goongApiAccessToken={GOONG_MAPTILES_KEY}>
<CustomControl />
</MapGL>
)
}
Calling useMapControl(opts)
returns an object containing the following fields:
context
(MapContext) - the current context valuecontainerRef
(RefObject) - this should be assigned to the ref
prop of the DOM element that the event listeners should attach to.This hook supports the following options:
onScroll
(Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled.onDragStart
(Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged.onClick
(Function) - called on click event. Can be used to stop map from calling the onClick
callback when this component is clicked.onDoubleClick
(Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked.onPointerMove
(Function) - called on pointermove event. Can be used to stop map from calling the onMouseMove
or onTouchMove
callback when this component is hovered.