Zoom control

Control component adding functionality to parent Map component.

This component adds zoom buttons to right side of map, enabling user to zoom in or out by clicking on them.

How to use it

import { Map, ZoomControl } from 'mapy-cz-react';

<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="map-example">
    <Map>
        <ZoomControl />
    </Map>
</MapProvider>;

Props

Name	Type	Default	Description	Required
labels	object	undefined	Object with keys being zoom value and value being label for that value. Visible only when showZoomMenu prop is truthy.	❌
showZoomMenu	bool	false	Flag showing zoom menu. Label for menu are defined in prop labels.	❌
sliderHeight	number	16	Sets slider element height in zoom menu	❌
stepHeight	number	9	Height of single step in zoom menu	❌

Example

Live Editor

<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="homepage-map-static-example" zoom={15} > <Map height="300px"> <ZoomControl /> </Map> </MapProvider>

<MapProvider
    center={{ lat: 50.096406, lng: 14.463071 }}
    id="homepage-map-static-example"
    zoom={15}
>
    <Map height="300px">
        <ZoomControl />
    </Map>
</MapProvider>

Result

Loading...