Markers are notes used to leave some message on the map. There are two ways to set marker for map.
Marker and marker template
Adding marker objects to map.
The markerSettings.dataSource property has a list of objects that contains the data for Annotation. By default, it displays the bound data at the specified latitude and longitude. The markerSettings.template property is used for customizing the template for markers.
Note: markerSettings is an Array property.
var map = new ej.maps.Maps({
layers: [{
shapeData: world_map,
markerSettings: [
{
visible: true,
template: '<div id="marker4" class="markerTemplate">Europe' +
'</div>',
dataSource: [
{ latitude: 49.95121990866204, longitude: 18.468749999999998 }
],
animationDuration: 0,
},
{
visible: true,
template: '<div id="marker5" class="markerTemplate" style="width:50px">North America' +
'</div>',
dataSource: [
{ latitude: 59.88893689676585, longitude: -109.3359375 }
],
animationDuration: 0
},
{
visible: true,
template: '<div id="marker6" class="markerTemplate" style="width:50px">South America' +
'</div>',
dataSource: [
{ latitude: -6.64607562172573, longitude: -55.54687499999999 }
],
animationDuration: 0
},
]
}]
});
map.appendTo('#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Maps</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>n number of markers can be added to shape layers with markerSettings.dataSource property. Each dataSource object contains the following list of properties.
label - Text that displays some information about the annotation in text format. latitude - Latitude point determine the Y-axis position of annotation. longitude - Longitude point determine the X-axis position of annotation.
var map = new ej.maps.Maps({
layers: [{
shapeData: world_map,
markerSettings: [
{
visible: true,
template: '<div> {{:city}}<div>',
dataSource: [
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]
}
]
}]
});
map.appendTo('#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Maps</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Legend can be enabled for marker using legendSettings.type as Markers and legend visible as true.Refer the code snippet to enable the legend for the markers.
var map = new ej.maps.Maps({
legendSettings: {
visible: true,
type: 'Markers'
},
layers: [{
shapeData: world_map,
markerSettings: [
{
visible: true,
legendText: 'city',
dataSource: [
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]
}
]
}]
});
map.appendTo('#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Maps</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Maps 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 of the cluster locations, the number on the cluster will decrease and you will begin to see the individual markers on the map. When zooming out, the overlapping marker will increase so that you can cluster it again and increase the count over the cluster.
Using the markerClusterSettings.allowClustering API, you can enable or disable this cluster support. The markerClusterSettings API also helps to customize clusters.
The MarkerClusterRendering event occurs when each cluster is rendered. You can also use this to customize the cluster. The markerClusterClick and markerClusterMouseMove events on mouse move and on clicking the cluster.
var maps = new ej.maps.Maps({
useGroupingSeparator: true,
format: 'n',
zoomSettings: {
enable: true
},
titleSettings: {
text: 'Top 13 largest cities in the World',
textStyle: {
size: '16px'
}
},
layers: [
{
shapeData: world_map,
shapeSettings: {
fill: '#C1DFF5'
},
markerClusterSettings: {
allowClustering: true,
shape: 'Circle',
height: 40,
width: 40,
labelStyle : { color: 'white'},
},
markerSettings: [
{
visible: true,
dataSource: cluster,
shape: 'Balloon',
tooltipSettings: {
visible: true,
valuePath: 'area',
format: 'City: ${city} <br> Area: ${area}'
},
height: 20,
width: 20,
animationDuration: 0
},
]
}
]
});
maps.appendTo('#container');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Maps</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Refer the API for Marker feature.