React-Map-GL – Controlling user interaction with map

In this blog post I will show you how to control user interaction with maps and how to use navigation components of react-map-gl framework.

In this post I will skip the initial application setup steps and proceed with next steps. You can read my previous blog post for initial setup process.

You can use the repo from GitHub as a base code for following blog post.

Zoom control

Users can Zoom In or Zoom Out of the map using scroll wheel of the mouse or double-clicking on the map.

Mapbox provides properties to control min and max zoom of the map. You can use minZoom and maxZoom property of ReactMapGL component to control the zoom.

<ReactMapGL {...viewport} mapboxApiAccessToken={accessToken} mapStyle={"mapbox://styles/mapbox/outdoors-v11"} onViewportChange={(viewport) => { setViewport(viewport); }} >
Code language: JavaScript (javascript)
https://gist.github.com/sureshgadupu/a6c75ec434106df12d0aec05293592a9

In below video you can see min and max zoom that we can achieve with default properties. In general minimum zoom you can achieve is around 0.5 and max zoom is 24

Based on your application needs if you want to limit the min and max zoom you can do by specifying minZoom and maxZoom properties.

<ReactMapGL {...viewport} mapboxApiAccessToken={accessToken} mapStyle={"mapbox://styles/mapbox/outdoors-v11"} onViewportChange={(viewport) => { setViewport(viewport); }} minZoom={1} maxZoom={15} >
Code language: JavaScript (javascript)
https://gist.github.com/sureshgadupu/75aef58ce4baf38394a7d5a25a8f16e9

In below video you can observe that after specifying minZoom and maxZoom properties the user is not able to go above or below specified limit.

Disabling Zoom

You can zoom in and zoom out using scroll wheel of the mouse or you can zoom in by double-clicking on the map.

You can disable the zoom functionality of the map using scrollZoom, doubleClickZoom boolean properties

<ReactMapGL {...viewport} mapboxApiAccessToken={accessToken} mapStyle={"mapbox://styles/mapbox/outdoors-v11"} onViewportChange={(viewport) => { setViewport(viewport); }} minZoom={1} maxZoom={15} doubleClickZoom={false} scrollZoom={false} >
Code language: JavaScript (javascript)
https://gist.github.com/sureshgadupu/5dcf092d64b687f2bce7015884ee6316

If you want to disable zoom on touch devices use touchZoom property.

<ReactMapGL {...viewport} mapboxApiAccessToken={accessToken} mapStyle={"mapbox://styles/mapbox/outdoors-v11"} onViewportChange={(viewport) => { setViewport(viewport); }} minZoom={1} maxZoom={15} doubleClickZoom={false} scrollZoom={false} touchZoom={false} >
Code language: JavaScript (javascript)
https://gist.github.com/sureshgadupu/da9f79c654fe9be71ad1201b36cf23d1

If you want to disable the rotation of the map use the dragRotate and touchRotate boolean properties.

Navigation Controls

react-map-gl provides in built components for navigation controls. NavigationControl Component provides zoom in, zoom out and compass controls

<ReactMapGL {...viewport} mapboxApiAccessToken={accessToken} mapStyle={"mapbox://styles/mapbox/outdoors-v11"} onViewportChange={(viewport) => { setViewport(viewport); }} minZoom={1} maxZoom={15} doubleClickZoom={false} scrollZoom={false} touchZoom={false} > <div className="viewPortnfo"> <div> <strong>Zoom:</strong> <span>{viewport.zoom}</span> </div> </div> <div style={navControlStyle}> <NavigationControl /> </div> </ReactMapGL>
Code language: JavaScript (javascript)
https://gist.github.com/sureshgadupu/b911f2499582e7fe57a7da5079fcceab

you can hide the zoom controls using showZoom and reset north control by using showCompass boolean properties.

If you want to change the label for controls you can use zoomInLabel ,zoomOutLabel, compassLabel properties. These properties are useful if your application supports multiple languages.

For example if you want to change the compass label to German language provide corresponding text to compassLabel property.

<div style={navControlStyle}> <NavigationControl compassLabel="Ruhe im Norden" /> </div>
Code language: JavaScript (javascript)
https://gist.github.com/sureshgadupu/f526b21ae08b753c42d73424a28380bf

You can download the source code for this blog post from GitHub.

Similar Posts