This section explains how to populate data inputs and provide it to the Maps component.
The Shape Data collection describing geographical shape information can be obtained from GEOJSON format shapes.
.\ Maps_GeoJSON\All Countries with States
You can assign the complete contents in “WorldMap”
file to new JSON object. For better understanding, a JSON file “worldMap.json”
is already created to store JSON data in JSON object “world-map”.
The Maps control supports data binding with the dataSource
property in the shape layers.
The following properties in shape layers is be used for binding data in Maps control,
* dataSource
* shapeDataPath
* shapePropertyPath
The dataSource property accepts the collection values as input. For example, you can provide the list of objects as input.
The shapeDataPath
property is used to refer the data ID in DataSource. For example, population MapData contains data ids ‘Name’ and ‘Population’. The shapeDataPath
and the shapePropertyPath
properties are related to each other (refer to shapePropertyPath
for more details).
The shapePropertyPath
property is similar to the shapeDataPath
that refers to the column name in the data
property of shape layers to identify the shape. When the values of the shapeDataPath
property in the dataSource
property and the value of shapePropertyPath
in the data property match, then the associated object from the dataSource
is bound to the corresponding shape.
The datasource is populated with JSON data relative to shape data and stored in JSON object. The USA population as datasource is used for better understanding.
Refer both shape data and datasource as illustrated in the following code example.
var map = new ej.maps.Maps({
layers: [
{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: [ {
'code': 'AF',
'value': 53,
'name': 'Afghanistan',
'population': 29863010,
'density': 119
},
{
'code': 'AL',
'value': 117,
'name': 'Albania',
'population': 3195000,
'density': 111
},
{
'code': 'DZ',
'value': 15,
'name': 'Algeria',
'population': 34895000,
'density': 15
},
{
'code': 'AO',
'value': 15,
'name': 'Angola',
'population': 18498000,
'density': 15
},
{
'code': 'AR',
'value': 15,
'name': 'Argentina',
'population': 40091359,
'density': 14
},
{
'code': 'AM',
'value': 109,
'name': 'Armenia',
'population': 3230100,
'density': 108
},]
}]
});
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>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
You can bind the data field from data source to the maps in two different ways.
shapeDataPath
, colorValuePath
,
valuePath
and shapeValuePath
.data.field
to the properties as shapeDataPath
, colorValuePath
,
valuePath
and shapeValuePath
.Refer complex support for data source as illustrated in the following code example.
var map = new ej.maps.Maps({
layers: [
{
shapeData: world_map,
shapeDataPath: 'data.continent',
shapePropertyPath: 'continent',
dataSource: [
{ "Continent": "North America", 'color': '#71B081',
data: { "continent": "North America", 'color': '#71B081' }
},
{ "Continent": "South America", 'color': '#5A9A77',
data: { "continent": "South America", 'color': '#5A9A77' }
},
{ "Continent": "Africa", 'color': '#498770',
data: { "continent": "Africa", 'color': '#498770' }
},
{ "Continent": "Europe", 'color': '#39776C',
data: { "continent": "Europe", 'color': '#39776C' }
},
{ "Continent": "Asia", 'color': '#266665',
data: { "continent": "Asia", 'color': '#266665' }
},
{ "Continent": "Australia", 'color': '#124F5E',
data: { "continent": "Australia", 'color': '#124F5E' }
}
],
shapeSettings: {
colorValuePath: 'data.color',
},
tooltipSettings: {
visible: true,
valuePath: 'data.continent'
},
bubbleSettings: [
{
visible: true,
valuePath: 'data.value',
colorValuePath: 'data.color',
animationDuration: 0,
minRadius: 20,
maxRadius: 90,
opacity: 0.8,
dataSource: [
{ 'name': 'India', 'value': 18.89685398845257, 'population': 391292635,
data: { 'color': 'red', 'population': 391292635, 'value': 189685398845257 }
}
],
tooltipSettings: {
visible: true,
valuePath: 'data.population',
template:"<div>${data.population}</div>"
},
},
],
markerSettings: [
{
visible: true,
dataSource: [
{ latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno',
data: { x: 37.6276571, y: -122.4276688, name: 'San Bruno', shape: 'Pentagon',
color: 'red', imageUrl: 'images/ballon.png' }
},
{ latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel',
data: { x: 33.5302186, y: -117.7418381, name: 'Laguna Niguel', color: 'blue',
shape: 'Pentagon', imageUrl: 'images/ballon.png' }
}
],
shapeValuePath: "data.shape",
colorValuePath: "data.color",
height: 20,
width: 20,
offset: {
y: -10,
x: 0
},
longitudeValuePath: "data.y",
latitudeValuePath: "data.x",
tooltipSettings: {
visible: true,
valuePath: 'data.name',
format: "${data.name}: ${data.x} : ${data.y}"
},
animationDuration: 0
},
]
}]
}, '#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>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>