ZoomControl

Add zoom in/out controls to the map

ZoomControl

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

Props

alignment · string

Position of the zoom control on the map

Options:

• '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