Skip to main content

​
ZoomControl

The ZoomControl component adds interactive zoom controls (+/-) to the map.

​
Props

​
alignment
string
Position of the zoom control on the mapOptions:
  • 'left-top'
  • 'left-middle'
  • 'left-bottom'
  • 'right-top' (default)
  • 'right-middle'
  • 'right-bottom'
  • 'top-left'
  • 'top-center'
  • 'top-right'
  • 'bottom-left'
  • 'bottom-center'
  • 'bottom-right'
​
disabled
boolean
default:false
Disable the zoom control
​
visibility
boolean
default:true
Control visibility of the zoom control

​
Basic Usage

import { HereMap, ZoomControl } from '@rodrito/react-here-maps';

function MapWithZoom() {
  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
    >
      <ZoomControl />
    </HereMap>
  );
}

​
Custom Position

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
  <ZoomControl alignment="left-top" />
</HereMap>

​
Multiple Controls

Position controls at different locations: 
import { HereMap, ZoomControl, ScaleBar, MapSettings } from '@rodrito/react-here-maps';

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
  <ZoomControl alignment="right-top" />
  <ScaleBar alignment="bottom-right" />
  <MapSettings alignment="right-bottom" />
</HereMap>

​
Conditional Visibility

import { useState } from 'react';

function ConditionalControls() {
  const [showControls, setShowControls] = useState(true);

  return (
    <>
      <button onClick={() => setShowControls(!showControls)}>
        Toggle Controls
      </button>

      <HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
        <ZoomControl visibility={showControls} />
      </HereMap>
    </>
  );
}

​
Disabled State

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
  <ZoomControl disabled />
</HereMap>

​
Alignment Options

Top Alignments

  • left-top
  • top-center
  • right-top

Middle Alignments

  • left-middle
  • right-middle

Bottom Alignments

  • left-bottom
  • bottom-center
  • right-bottom

​
Keyboard Shortcuts

Users can also zoom using:
  • + / - keys
  • Mouse wheel
  • Double-click to zoom in
  • Shift + Double-click to zoom out
  • Pinch gesture on touch devices

​
Accessibility

The zoom control is keyboard accessible and screen reader friendly:
  • Tab to focus
  • Enter/Space to activate
  • Proper ARIA labels

​
See Also

ScaleBar

Distance scale indicator

MapSettings

Map configuration controls

HereMap

Main map component