Navigation line in EJ2 TypeScript 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.
import { Maps, ILoadEventArgs, Zoom } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { latLongPoints } from './latLongPoints.ts';
Maps.Inject(Zoom);
// initialize Maps component
let map: Maps = new 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: ILoadEventArgs) {
let element: HTMLSelectElement = <HTMLSelectElement>document.getElementById("countriesCombo");
for (let i: number = 0; i < latLongPoints.length; i++) {
let item = latLongPoints[i];
let selectBoxOption = document.createElement("option");
selectBoxOption.value = item.name;
selectBoxOption.text = item.name;
element.add(selectBoxOption, null);
}
}
}
);
// render initialized Map
map.appendTo('#container');
document.getElementById("countriesCombo").onchange = function () {
let lat = latLongPoints[(<HTMLSelectElement>this).selectedIndex].latitude;
let long = latLongPoints[(<HTMLSelectElement>this).selectedIndex].longitude;
map.centerPosition.latitude = lat;
map.centerPosition.longitude = long;
map.layers[0].animationDuration = 1000;
map.refresh();
let group = document.getElementById("container_LayerIndex_0_Polygon_Group");
for (let j: number = 0; j < group.children.length; j ++) {
if (group.children[j].getAttribute("aria-label") === (<HTMLSelectElement>this).value) {
let 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="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="world-map.js"></script>
<script src="latLongPoints.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<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>
</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.
import { Maps, ILoadEventArgs, Zoom } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { latLongPoints } from './latLongPoints.ts';
Maps.Inject(Zoom);
// initialize Maps component
let map: Maps = new 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: ILoadEventArgs) {
let element: HTMLSelectElement = <HTMLSelectElement>document.getElementById("countriesCombo");
for (let i: number = 0; i < latLongPoints.length; i++) {
let item = latLongPoints[i];
let selectBoxOption = document.createElement("option");
selectBoxOption.value = item.name;
selectBoxOption.text = item.name;
element.add(selectBoxOption, null);
}
}
}
);
// render initialized Map
map.appendTo('#container');
document.getElementById("countriesCombo").onchange = function () {
let lat = latLongPoints[(<HTMLSelectElement>this).selectedIndex].latitude;
let long = latLongPoints[(<HTMLSelectElement>this).selectedIndex].longitude;
map.centerPosition.latitude = lat;
map.centerPosition.longitude = long;
map.zoomSettings.zoomFactor = 5;
map.layers[0].animationDuration = 1000;
map.refresh();
let group = document.getElementById("container_LayerIndex_0_Polygon_Group");
for (let j: number = 0; j < group.children.length; j ++) {
if (group.children[j].getAttribute("aria-label") === (<HTMLSelectElement>this).value) {
let 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="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="world-map.js"></script>
<script src="latLongPoints.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<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>
</body>
</html>