Skip to main content

ZoomControl

Add + and - zoom buttons.

Example​

Pigeon | © OpenStreetMap contributors

Code​

import React from "react";
import { Map, ZoomControl } from "pigeon-maps";

export function MyMap() {
  return (
    <Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={11}>
      <ZoomControl />
    </Map>
  );
}

Options​

style​

Add extra style attributes to the container div. For example: { right: 10, top: 10, zIndex: 100 } to change its position.

buttonStyle​

Override the style of the buttons themselves. For example: { background: 'black', color: 'white' } to invert its colors.