Navigation line in EJ2 JavaScript Maps control
27 Apr 202313 minutes to read
To navigate a particular country by setting the center position zooming using the centerPosition and zoomFactor property as demonstrated in the following sample. The center position is used to configure the zoom level of maps, and zoom factor is used to specify the center position where the map should be displayed.
To navigate to a particular country, follow the given steps:
Step 1:
Initialize the maps and add country list for drop-down elements in the load event.
var maps = new ej.maps.Maps({
zoomSettings: {
enable: true,
zoomOnClick: true
},
layers: [
{
animationDuration:1000,
shapeData: world_map,
dataSource: latLongPoints,
shapePropertyPath: 'name',
shapeDataPath: 'name',
selectionSettings: {
enable: true,
fill: 'red'
},
shapeSettings: {
autofill: true,
palette: ['#4A3825', '#736F3D', '#F2DABD', '#BF9D7E', '#7F6039', '#7F715F', '#70845D', '#CC995C', '#736F3D', '#89541B']
},
}
],
load: function (args) {
var element = document.getElementById("countriesCombo");
for (var i = 0; i < latLongPoints.length; i++) {
var item = latLongPoints[i];
var selectBoxOption = document.createElement("option");
var value = item.name;
selectBoxOption.text = item.name;
element.add(selectBoxOption, null);
}
}
});
maps.appendTo('#container');
document.getElementById("countriesCombo").onchange = function () {
var lat = latLongPoints[this.selectedIndex].latitude;
var long = latLongPoints[this.selectedIndex].longitude;
maps.centerPosition.latitude = lat;
maps.centerPosition.longitude = long;
maps.zoomSettings.zoomFactor = 5;
maps.layers[0].animationDuration = 1000;
maps.refresh();
var group = document.getElementById("container_LayerIndex_0_Polygon_Group");
for (var j = 0; j < group.children.length; j ++) {
if (group.children[j].getAttribute("aria-label") === this.value) {
var element = group.children[j];
element.setAttribute("fill", "red");
break;
}
}
}<!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="latLongPoints.js"></script>
<script src="https://cdn.syncfusion.com/ej2/25.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div>
<select size="1" style="margin: 10px;width: 180px;margin-top: 15px; border-width: 1px;border-color: lightgray;margin-left: 15px;height: 30px" id="countriesCombo">
</select>
</div>
<div id="container">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Step 2:
Set the center position latitude and longitude as latitude and longitude of selected country by drop-downs, and then set the zoomFactor to navigate to the particular selected country.
To refresh the maps, invoke the refresh method.
var maps = new ej.maps.Maps({
zoomSettings: {
enable: true,
zoomOnClick: true
},
layers: [
{
animationDuration:1000,
shapeData: world_map,
dataSource: latLongPoints,
shapePropertyPath: 'name',
shapeDataPath: 'name',
selectionSettings: {
enable: true,
fill: 'red'
},
shapeSettings: {
autofill: true,
palette: ['#4A3825', '#736F3D', '#F2DABD', '#BF9D7E', '#7F6039', '#7F715F', '#70845D', '#CC995C', '#736F3D', '#89541B']
},
}
],
load: function (args) {
var element = document.getElementById("countriesCombo");
for (var i = 0; i < latLongPoints.length; i++) {
var item = latLongPoints[i];
var selectBoxOption = document.createElement("option");
var value = item.name;
selectBoxOption.text = item.name;
element.add(selectBoxOption, null);
}
}
});
maps.appendTo('#container');
document.getElementById("countriesCombo").onchange = function () {
var lat = latLongPoints[this.selectedIndex].latitude;
var long = latLongPoints[this.selectedIndex].longitude;
maps.centerPosition.latitude = lat;
maps.centerPosition.longitude = long;
maps.zoomSettings.zoomFactor = 5;
maps.layers[0].animationDuration = 1000;
maps.refresh();
var group = document.getElementById("container_LayerIndex_0_Polygon_Group");
for (var j = 0; j < group.children.length; j ++) {
if (group.children[j].getAttribute("aria-label") === this.value) {
var element = group.children[j];
element.setAttribute("fill", "red");
break;
}
}
}<!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="latLongPoints.js"></script>
<script src="https://cdn.syncfusion.com/ej2/25.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div>
<select size="1" style="margin: 10px;width: 180px;margin-top: 15px; border-width: 1px;border-color: lightgray;margin-left: 15px;height: 30px" id="countriesCombo">
</select>
</div>
<div id="container">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>