How to plot latitude and longitude values in the World map
How to plot latitude and longitude values in the World map?
The latitude and longitude values can be plot in the EJ2 maps control using marker feature. A marker is an object which is used to indicate the location of the plotted latitude and longitude values with anyone of the following.
- Various shapes
- Image marker
- Marker template
To render markers, specify the data which holds latitude and longitude values to the dataSource property in markerSettings. By default, the maker will render with balloon shape.
import { Maps, Marker } from '@syncfusion/ej2-maps';
import { map } from './world_map';
Maps.Inject(Marker);
let maps: Maps = new Maps({
layers: [{
shapeData: map,
markerSettings: [
{
visible: true,
dataSource: [
{ latitude: 37.0000, longitude: -120.0000 },
{ latitude: 40.7127, longitude: -74.0059 },
{ latitude: 42, longitude: -93 }
]
}]
}]
});
maps.appendTo('#container');
The below screenshot shows the output of the above code snippet.
Various shapes
Set any one of the following shapes for the marker using the shape property in markerSettings.
- Circle
- Rectangle
- Balloon
- Cross
- Polyline
- Diamond
- Star
- Triangle
- HorizontalLine
- VerticalLine
import { Maps, Marker } from '@syncfusion/ej2-maps';
import { map } from './world_map';
Maps.Inject(Marker);
let maps: Maps = new Maps({
layers: [{
shapeData:map,
markerSettings: [
{
//..
shape: 'Circle'
}]
}]
});
maps.appendTo('#container');
The below screenshot shows the output of the above code snippet
Sample link - MarkerShape
Customize the marker shape by setting width and height. You can also customize the shape’s fill color and border options.
import { Maps, Marker } from '@syncfusion/ej2-maps';
import { map } from './world_map';
Maps.Inject(Marker);
let maps: Maps = new Maps({
layers: [{
shapeData: map,
markerSettings: [
{
//..
shape: 'Balloon',
width: 40,
height: 40,
fill: ' #F0BB8E',
border: {
width: 4,
color: ' #E3264E'
}
}]
}]
});
maps.appendTo('#container');
Sample link - Marker Customization
Image marker
Apart from the shapes, you can also add a custom image at the specified latitude and longitude, using the imageUrl property and set the shape as ‘Image’ in markerSettings.
import { Maps, Marker } from '@syncfusion/ej2-maps';
import { map } from './world_map';
Maps.Inject(Marker);
let maps: Maps = new Maps({
layers: [{
shapeData: map,
markerSettings: [
{
shape: 'Image',
imageUrl: 'ballon1.png'
//..
},
{
shape: 'Image',
imageUrl: ' ballon2.png'
//..
},
{
shape: 'Image',
imageUrl: ' ballon3.png'
//..
}]
}]
});
maps.appendTo('#container');
Sample link - Marker Custom Image
Marker template
You can add the HTML element in the layers at the specified latitude and longitude values in the markerSettings dataSource property. Using template property, you can set a marker template in maps.
import { Maps, Marker } from '@syncfusion/ej2-maps';
import { map } from './world_map';
Maps.Inject(Marker);
let maps: Maps = new Maps({
layers: [{
shapeData: world_Map,
shapeSettings: {
fill: 'lightGrey'
},
markerSettings: [
{
visible: true,
dataSource: [
{ latitude: 37.0000, longitude: -120.0000, city: 'California', Temperature: 31.6 },
{ latitude: 40.7127, longitude: 74.0059, city: 'Tajikistan', Temperature: 26.4 }
],
template: '<div id="marker1"><img class="markerTemplate" style="width:50px;height:50px" src="weather-clear.png"/>' +
'<p>{{:city}}:{{:Temperature}}°C</p></div>'
}]
}]
});
maps.appendTo('#container');
Sample link - Marker Template
