How can I help you?
Bing Maps integration in EJ2 TypeScript Maps component
6 Feb 202612 minutes to read
Bing Maps is a online Maps provider, owned by Microsoft. As like OSM, it provide Maps tile images based on our requests and combines those images into a single one to display Maps area.
Prerequisites
Before using Bing Maps with the Maps component, the following prerequisites must be met:
- Microsoft account - A Microsoft account is required to access the Bing Maps portal
- Bing Maps key - A valid Bing Maps API key must be obtained for authentication
To obtain a Bing Maps key, visit the Bing Maps Dev Center and follow the instructions to create a new key. The key must be appended to the Bing Maps URL before passing it to the getBingUrlTemplate method.
Adding Bing Maps
Bing Maps can be rendered using the urlTemplate property with a URL generated by the getBingUrlTemplate method. Since Bing Maps uses a different URL format compared to other map providers, the Maps component provides a built-in getBingUrlTemplate method that converts the Bing Maps URL into the required format.
The getBingUrlTemplate method is asynchronous and returns a Promise. Replace the key=? placeholder in the Bing Maps URL with the actual API key obtained from the Bing Maps Dev Center. The URL returned by this method should be assigned to the urlTemplate property within the Promise’s then callback.
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');Types of Bing Maps
Bing Maps provides different map styles, all of which are supported in the Maps component.
- Aerial - Displays satellite images to highlight roads and major landmarks for easy identification.
- AerialWithLabel - Displays aerial maps with labels for continents, countries, oceans, and other geographic features.
- Road - Displays the default map view of roads, buildings, and geographic features.
- CanvasDark - Displays a dark version of the road maps.
- CanvasLight - Displays a light version of the road maps.
- CanvasGray - Displays a grayscale version of the road maps.
To render a specific map style, specify the desired type (such as CanvasLight) in the URL passed to the getBingUrlTemplate method, as demonstrated in the following code sample.
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/CanvasLight?output=json&uriScheme=https&key=?").then(function(url) {
args.maps.layers[0].urlTemplate= url;
});
},
zoomSettings: {
zoomFactor: 12,
},
centerPosition : {
latitude: 38.8951,
longitude: -77.0364
},
layers:[{
}]
});
map.appendTo('container');Enabling zooming and panning
The Bing Maps layer supports zooming and panning interactions for enhanced map exploration. Zooming provides a closer view of specific areas for detailed analysis, while panning allows navigation across different regions of the map. These features can be enabled using the zoomSettings property with toolbar controls for user interaction.
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;
});
},
zoomSettings: {
enable: true,
toolbarSettings: {
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}
},
layers:[{
}]
});
map.appendTo('container');Adding markers and navigation line
Markers can be added to Bing Maps layers to highlight specific locations by setting the latitude and longitude coordinates using markerSettings. Navigation lines can be drawn on top of the Bing Maps layer to visualize routes or connections between locations by configuring the navigationLineSettings with corresponding latitude and longitude coordinates.
import { Maps } from '@syncfusion/ej2-maps';
Maps.Inject(NavigationLine, Marker, Zoom);
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;
});
},
zoomSettings: {
zoomFactor: 4
},
centerPosition: {
latitude: 29.394708
longitude: -94.954653
},
layers: [{
markerSettings: [{
visible: true,
height: 25,
width: 15,
dataSouce: [{
latitude: 34.060620,
longitude: -118.330491,
name: "California"
},
{
latitude: 40.724546,
longitude: -73.850344,
name: "New York"
}],
}],
navigationLineSettings: [{
visible: true,
color: "blue",
angle: 0.1,
latitude: {
34.060620, 40.724546
},
longitude: {
-118.330491, -73.850344
}
}]
}]
});
map.appendTo('container');Adding sublayer
GeoJSON shapes can be rendered as a sublayer on top of the Bing Maps base layer to highlight specific regions such as continents, countries, or custom geographic areas. This is accomplished by adding an additional layer and setting the type property to SubLayer. The sublayer overlays the Bing Maps tiles while maintaining interactivity with the base map.
import { Maps } from '@syncfusion/ej2-maps';
import { Africa_Continent } from './Africa_Continent.ts';
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: [
{
// Add bing map.
},
{
type: 'SubLayer',
shapeData: Africa_Continent,
shapeSettings: {
fill: 'blue'
}
}
]
});
map.appendTo("#container");Enabling legend
The legend can be added to the tile Maps by setting the visible property of legendSettings to true.
import { Maps } from '@syncfusion/ej2-maps';
import { markerDataSource } from './markerdata.ts';
Maps.Inject(Legend, Marker);
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;
});
},
legendSettings: {
visible: true,
type: 'Markers',
useMarkerShape:true,
toggleLegendSettings: {
enable: true,
applyShapeSettings: false,
border: {
color: 'green',
width: 2
}
}
},
layers: [
{
shapeDataPath: 'name',
shapePropertyPath: 'name',
shapeSettings: {
fill: '#E5E5E5'
},
markerSettings: [
{
dataSource: markerDataSource,
colorValuePath: 'color',
shapeValuePath:'shape',
legendText: 'country',
visible: true
}
]
}
]
});
map.appendTo("#container");