Map providers in EJ2 TypeScript Maps control
27 Apr 20231 minute to read
Map control support map providers such as OpenStreetMap that can be added to any layers in maps.
Open Street Map
OpenStreetMap
is a map of the entire world. The OpenStreetMap allows you to view, edit and use geographical data in a collaborative way from any place on the Earth.
Enable OSM
You can enable this feature by using the urlTemplate
property in the Maps.
import { Maps } from '@syncfusion/ej2-maps';
let map: Maps = new Maps({
layers: [
{
urlTemplate: 'http://a.tile.openstreetmap.org/level/tileX/tileY.png'
}]
});
map.appendTo('#container');
URL Template
The urlTemplate
property determines the format of tile map. You can specify the template for the tile layer.
Bing Map
Bing Map is a key feature in accessing the external geospatial imagery services for deep-zoom satellite view.
Enable Bing Maps
You can enable this feature by using the urlTemplate
property, which is based on the URL generated by the getBingUrlTemplate
method in the Maps. To get the type of bing map as aerial, aerialwithlabel and road, set the Aerial
value is passed via the URL into the getBingUrlTemplate
method.
import { Maps } from '@syncfusion/ej2-maps';
let map: Maps = new Maps({
load: function(args){
args.maps.getBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/Aerial?output=json&uriScheme=https&key=?").then(function(url) {
args.maps.layers[0].urlTemplate= url;
});
},
layers: [{
}]
});
map.appendTo('#container');
Key
The bing Map key is provided as input to this key property. The Bing Map key can be obtained from http://www.microsoft.com/maps/create-a-bing-maps-key.aspx.