Layer control

Control component adding functionality to parent Map component.

This component adds possibility to change used map layer, based on set default layers in MapProviders prop mapLayers.

By using this control, map will render Layer changer in top left corner in map container, with selection of all provided map layers from mentioned mapLayers prop.

How to use it

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

<Map>
    <LayerControl width={65} pageSize={3} />
</Map>;

Props

Name	Type	Default	Description	Required
width	number	65	Width of each item in layer control. Not necessary for 90% of usecases	❌
pageSize	number	3	Enable keyboard zoom control - + - keys	❌

Example

Live Editor

<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="homepage-map-static-example" zoom={15} mapLayers={[ BASE_LAYERS.BASE_NEW, BASE_LAYERS.TURIST_NEW, BASE_LAYERS.GEOGRAPHY, BASE_LAYERS.HISTORIC, BASE_LAYERS.TURIST_WINTER, ]} > <Map height="300px"> <LayerControl width={65} pageSize={3} /> </Map> </MapProvider>

<MapProvider
    center={{ lat: 50.096406, lng: 14.463071 }}
    id="homepage-map-static-example"
    zoom={15}
    mapLayers={[
        BASE_LAYERS.BASE_NEW,
        BASE_LAYERS.TURIST_NEW,
        BASE_LAYERS.GEOGRAPHY,
        BASE_LAYERS.HISTORIC,
        BASE_LAYERS.TURIST_WINTER,
    ]}
>
    <Map height="300px">
        <LayerControl width={65} pageSize={3} />
    </Map>
</MapProvider>

Result

Loading...