Skip to main content

Marker

Marker is an active element on map, pointing to some location. Markers can be rendered only inside MarkerLayer.

Markers can be customized by providing custom image URL or overriding styles. Working with events on top of markers can be achieved by using Signals component.

When working with a lot of data (more than 100), consider using MultipleMarkers component. When Marker renders, it creates new instance of Marker class in mapy.cz API and adds this class to parent marker layer. That causes map recalculation and update. A lot of individual markers added at once can therefore significantly reduce performance of whole map.

How to use it

import { MapProvider, Map, MarkerLayer, Marker } from 'mapy-cz-react';

<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="map-example">
<Map>
<MarkerLayer>
<Marker coords={{ latitude: 50.096406, longitude: 14.463071 }} />
</MarkerLayer>
</Map>
</MapProvider>;

Props

NameTypeDefaultDescriptionRequired
coordsobjectundefinedObject with attributes longitude and latitude defining marker position.✔️
imgSrcstringundefinedCustom marker image URL. By default native mapy.cz marker image is shown.
tooltipstringundefinedMarker name, serves as title and text shown in tooltip when hovering on top of element.

Example

Live Editor
Result
Loading...