How to Add and Customize Markers in the React Maps Component

Learn how easily you can display and customize markers in the Syncfusion React Maps component. This video shows a world map with markers that provide information about the top 15 cities by population. To use the markers feature, inject the Marker module into the Maps component.

Markers are enabled by setting the visible property of MarkersDirective to true and binding the list data to the dataSource property. By default, the maps component displays markers based on latitudes and longitudes in the given data source. So, the data source must contain latitudes and longitudes. You can customize the markers using properties such as the ‘border’, ‘dash array’, 'fill' color, 'opacity', 'animation delay', 'animation duration', and more.

Using the Maps component, you can visualize the Earth's surface and display static or interactive regions, zones, boundaries, or any geographic area on the land. The Syncfusion React Maps component offers a rich set of features, including markers, navigation lines, bubbles, zooming, panning, and drill-down functionality, allowing you to easily explore interactive zones.

Download the example from GitHub:

TRIAL LICENSE KEY
---------------------- 


BOOKMARK DETAILS
----------------------- 
[00:00] Introduction
[01:12] Enable markers
[03:08] Change the marker shape
[04:03] Customize the markers
[04:37] Set the marker color from the data source
[05:08] Display an image as the marker
[05:38] Add tooltips to markers
[06:34] Format the marker tooltips

REACT MAPS
--------------

SUBSCRIBE
-------------

SOCIAL COMMUNITIES
-----------------------------

#react #maps #markers