2.9 KiB
NavigationControl
This is a React equivalent of Mapbox's NavigationControl, which provides zoom buttons and a compass button.
import * as React from 'react';
import ReactMapGL, {NavigationControl} from 'react-map-gl';
const navControlStyle= {
right: 10,
top: 10
};
function App() {
const [viewport, setViewport] = React.useState({
longitude: -122.45,
latitude: 37.78,
zoom: 14
});
return (
<ReactMapGL {...viewport} width="100vw" height="100vh" onViewportChange={setViewport}>
<NavigationControl style={navControlStyle} />
</ReactMapGL>
);
}
Properties
onViewportChange (Function)
Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing InteractiveMap's onViewportChange.
showCompass (Boolean)
- default:
true
Show or hide the compass button
showZoom (Boolean)
- default:
true
Show or hide the zoom buttons
zoomInLabel (String)
- default:
Zoom In
Label applied to the zoom in control button.
zoomOutLabel (String)
- default:
Zoom Out
Label applied to the zoom out control button.
compassLabel (String)
- default:
Reset North
Label applied to the compass control button.
className (String)
Assign a custom class name to the container of this control.
style (Object)
- default:
{position: 'absolute'}
A React style object applied to this control.
captureScroll (Boolean)
- default:
false
Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.
captureDrag (Boolean)
- default:
true
Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.
captureClick (Boolean)
- default:
true
Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.
captureDoubleClick (Boolean)
- default:
true
Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.
capturePointerMove (Boolean)
- default:
false
Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.
Styling
Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.