Markers
Markers are notes that are used to leave a message on the Maps component. It indicates or marks a specific location with desired symbols on the maps.
The DataSource property has a list of objects that contains data for markers. By default, it displays the bound data at the specified latitude and longitude. Using the Visible API, you can enable or disable the markers.
@using Syncfusion.EJ2.Blazor.Maps
<EjsMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}'>
<MapsMarkerSettings>
<MapsMarker Visible="true" DataSource="@California" Height="25" Width="15"></MapsMarker>
<MapsMarker Visible="true" DataSource="@NewYork" Height="25" Width="15"></MapsMarker>
<MapsMarker Visible="true" DataSource="@Iowa" Height="25" Width="15"></MapsMarker>
</MapsMarkerSettings>
<MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</EjsMaps>
@code {
public class City
{
public double Latitude;
public double Longitude;
};
public List<City> California = new List<City> {
new City {Latitude=35.145083,Longitude=-117.960260}
};
public List<City> NewYork = new List<City> {
new City { Latitude=40.724546, Longitude=-73.850344 }
};
public List<City> Iowa = new List<City> {
new City {Latitude= 41.657782, Longitude=-91.533857}
};
}
Adding marker objects to map
The n number of markers can be added to shape layers using the DataSource property. Each dataSource object contains the following list of properties:
- city - Displays some information about the annotation in text format.
- Latitude - Determines the y-axis position of annotation.
- Longitude - Determines the x-axis position of annotation.
@using Syncfusion.EJ2.Blazor.Maps
<EjsMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}'>
<MapsMarkerSettings>
<MapsMarker Visible="true" DataSource="@cities" Height="25" Width="15">
<MapsMarkerTooltipSettings ValuePath="Name" Visible="true">
</MapsMarkerTooltipSettings>
</MapsMarker>
</MapsMarkerSettings>
<MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</EjsMaps>
@code {
public class City
{
public double Latitude;
public double Longitude;
public string Name;
};
private List<City> cities = new List<City> {
new City {Latitude=35.145083,Longitude=-117.960260, Name= "Californiya"},
new City { Latitude=40.724546, Longitude=-73.850344, Name="New York"},
new City {Latitude= 41.657782, Longitude=-91.533857, Name="Iowa"}
};
}
Marker shapes
The Maps component contains the following marker shapes. You can select any shape using the Shape property in MapsMarker.
- Ballon
- Circle
- Cross
- Diamond
- Image
- Rectangle
- Start
- Triangle
- VerticalLine
- HorizontalLine
Multiple marker groups
You can specify multiple marker groups and customize each group of markers separately as demonstrated in the following example.
@using Syncfusion.EJ2.Blazor.Maps
<EjsMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>
<MapsMarkerSettings>
<MapsMarker Visible="true" DataSource="@citiesInUS" Shape="MarkerType.Diamond" Height="15" Fill="green" Width="15">
<MapsMarkerTooltipSettings ValuePath="Name" Visible="true"></MapsMarkerTooltipSettings>
</MapsMarker>
<MapsMarker Visible="true" DataSource="@citiesInIndia" Shape="MarkerType.Circle" Fill="blue" Height="10" Width="10">
<MapsMarkerTooltipSettings ValuePath="Name" Visible="true"></MapsMarkerTooltipSettings>
</MapsMarker>
</MapsMarkerSettings>
</MapsLayer>
</MapsLayers>
</EjsMaps>
@code {
public class City
{
public double Latitude;
public double Longitude;
public string Name;
};
private List<City> citiesInUS = new List<City> {
new City { Latitude = 37.0000, Longitude = -120.0000, Name = "California"},
new City { Latitude= 40.7127, Longitude = -74.0059, Name = "New York" },
new City { Latitude = 42, Longitude = -93, Name = "Iowa"}
};
private List<City> citiesInIndia = new List<City> {
new City {Latitude = 19.228825, Longitude = 72.854118, Name= "Mumbai"},
new City {Latitude = 28.610001, Longitude = 77.230003, Name= "Delhi"},
new City {Latitude = 13.067439, Longitude = 80.237617, Name= "Chennai"}
};
}
Enabling legend for markers
The legend can be enabled for markers using Type as Markers and setting Visible to true in MapsLegendSettings.
The following code snippet demonstrates how to enable legend for markers.
@using Syncfusion.EJ2.Blazor.Maps
<EjsMaps>
@* To enable legend for marker *@
<MapsLegendSettings Visible="true" Type="LegendType.Markers"></MapsLegendSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>
<MapsMarkerSettings>
<MapsMarker Visible="true"
DataSource="@cities"
Height="25"
Width="15"
LegendText="Name">
</MapsMarker>
</MapsMarkerSettings>
<MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</EjsMaps>
@code {
public class City
{
public double Latitude;
public double Longitude;
public string Name;
};
private List<City> cities = new List<City> {
new City {Latitude=35.145083, Longitude=-117.960260, Name= "Californiya"},
new City { Latitude=40.724546, Longitude=-73.850344, Name="New York"},
new City {Latitude= 41.657782, Longitude=-91.533857, Name="Iowa"}
};
}
Please refer to legend section for more information on legend settings.
Marker clustering
The Maps component provides support to hide and cluster markers when they overlap each other.
The number on a cluster indicates how many overlapped markers it contains. If you zoom any cluster location, the number on the cluster is decreased, and you can see the individual marker on the maps. When zooming out, the overlapping marker is increased, so that you can cluster it again and increase the count over the cluster.
Using the AllowClustering API in MapsMarkerClusterSettings option, you can enable or disable the cluster support. The MapsMarkerClusterSettings also helps to customize clusters.
@using Syncfusion.EJ2.Blazor.Maps
<EjsMaps>
<MapsZoomSettings Enable="true"></MapsZoomSettings>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'>
<MapsMarkerSettings>
<MapsMarker Visible="true"
DataSource="@largestCities"
Height="25"
Width="15">
</MapsMarker>
</MapsMarkerSettings>
<MapsMarkerClusterSettings AllowClustering="true"
Shape="MarkerType.Circle"
Fill="#008CFF"
Height="25"
Width="25">
<MapsLayerMarkerClusterLabelStyle Color="white"></MapsLayerMarkerClusterLabelStyle>
</MapsMarkerClusterSettings>
<MapsShapeSettings Fill="lightgray">
</MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</EjsMaps>
@code {
public class City
{
public double Latitude { get; set; }
public double Longitude { get; set; }
public string Name { get; set; }
public double Area { get; set; }
};
private List<City> largestCities = new List<City> {
new City { Latitude=40.6971494, Longitude= -74.2598747, Name="New York", Area=8683 },
new City { Latitude=40.0024137, Longitude= -75.2581194, Name="Philadelphia", Area=4661 },
new City { Latitude=42.3142647, Longitude= -71.11037, Name="Boston", Area=4497 },
new City { Latitude=42.3526257, Longitude= -83.239291, Name="Detroit", Area=3267 },
new City { Latitude=47.2510905, Longitude= -123.1255834, Name="Washington", Area=2996 },
new City { Latitude=25.7823907, Longitude= -80.2994995, Name="Miami", Area=2891 },
new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 }
};
}