Marker type in EJ2 TypeScript Maps control

27 Apr 202310 minutes to read

Add different types of markers

Different marker objects can be added to the Maps component using the marker settings. To update different marker settings in Maps, please follow the given steps:

Step 1:

Initialize the Maps control with marker settings. Here, a marker has been added with specified latitude and longitude of California by using the dataSource property. To customize the shape of the marker using the shape property and change the border color and width of the marker using the border property as mentioned in the following example.

import { world_map } from './world-map.ts';
import { Maps , Marker, MarkerSettings } from '@syncfusion/ej2-maps';

// Initialize Map component.
let map: Maps = new Maps({
    // Initializing Map with Marker settings.
    layers: [
        {
            shapeData: world_map,
            markerSettings: [
                {
                    dataSource: [
                       { latitude: 40.7424509, longitude: -74.0081468, city: 'New York' }
                    ],
                    visible:true,
                    shape:'Circle',
                    fill:'white',
                    width:3,
                    animationDuration:0,
                    border:{width:2,color:'#333'}
                }
            ]
        }
    ]
});
map.appendTo('#element');  // render initialized Map.
<!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="world-map.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>
</body>

</html>

Step 2:

Customize the above option for n number of markers as mentioned in the following example.

import { world_map } from './world-map.ts';
import { Maps , Marker, MarkerSettings } from '@syncfusion/ej2-maps';
Maps.Inject(Marker);
// initialize Maps component
let map: Maps = new Maps({
    layers: [
        {
            shapeData: world_map,
            markerSettings: [
                {
                    dataSource: [
                       { latitude: 37.6276571, longitude: -122.4276688, city: 'San Bruno' },
                    ],
                    visible:true,
                    shape:'Circle',
                    fill:'white',
                    width:3,
                    animationDuration:0,
                    border:{width:2,color:'#333'}
                },
                {
                    dataSource: [
                        { latitude: 33.5302186, longitude: -117.7418381, city: 'Laguna Niguel' },
                    ],
                    visible:true,
                    shape:'Rectangle',
                    fill:'yellow',
                    width:15,
                    height:4,
                    animationDuration:0,
                    border:{width:2,color:'#333'}
                },
                {
                    dataSource: [
                         { latitude: 40.7424509, longitude: -74.0081468, city: 'New York' }
                    ],
                    visible:true,
                    shape:'Diamond',
                    fill:'white',
                    width:10,
                    height:10,
                    animationDuration:0,
                    border:{width:2,color:'blue'}
                }
            ]
        }
    ]
});
map.appendTo('#element'); // render initialized Map.
<!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="world-map.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>