Search results

Navigating to particular country

You can navigate to a particular country by setting the center position zooming using the centerPosition and zoomFactor APIs as demonstrated in the following code 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.

Source
Preview
index.html
index.css
<!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://cdn.syncfusion.com/ej2/dist/ej2.min.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.

Source
Preview
index.html
index.css
<!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://cdn.syncfusion.com/ej2/dist/ej2.min.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>