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)

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)

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)

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)

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)

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)

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