Bing maps integration in React Maps component
6 Feb 202624 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
function load(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;
});
}
export function App() {
return(
<MapsComponent load={load}>
<LayersDirective>
<LayerDirective />
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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 thegetBingUrlTemplate method, as demonstrated in the following code sample.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
function load(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;
});
}
export function App() {
return(
<MapsComponent zoomSettings= {{ zoomFactor: 4 }}
centerPosition = {{
latitude : 38.8951,
longitude : -77.0364
}} load={load}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective />
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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 * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
function load(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;
});
}
export function App() {
return(
<MapsComponent load={load} zoomSettings= {{
enable : true,
toolbarSettings:{
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}}}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective />
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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 MarkerDirective. Navigation lines can be drawn on top of the Bing Maps layer to visualize routes or connections between locations by configuring the NavigationLineDirective with corresponding latitude and longitude coordinates.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, MarkersDirective, NavigationLineDirective, NavigationLinesDirective, MarkerDirective, LayersDirective, LayerDirective, Inject, Zoom, Marker, NavigationLine } from '@syncfusion/ej2-react-maps';
function load(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;
});
}
export function App() {
return (
<MapsComponent load={load} zoomSettings= {{
zoomFactor : 4
}}
centerPosition = {{
latitude: 29.394708,
longitude: -94.954653
}}>
<Inject services={[Zoom, Marker, NavigationLine]} />
<LayersDirective>
<LayerDirective>
<MarkersDirective>
<MarkerDirective visible={true}
height={25}
width={15}
dataSource={[
{
latitude: 34.060620,
longitude: -118.330491,
name: "California"
},
{
latitude: 40.724546,
longitude: -73.850344,
name: "New York"
}
]}
>
</MarkerDirective>
</MarkersDirective>
<NavigationLinesDirective>
<NavigationLineDirective visible={true}
latitude={[34.060620, 40.724546]}
longitude={[-118.330491,-73.850344]}
color="blue"
angle={90}
width={5} />
</NavigationLinesDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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 { africa } from 'africa_continent.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
function load(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;
});
}
export function App() {
return(
<MapsComponent load={load}>
<LayersDirective>
<LayerDirective/>
<LayerDirective shapeData= {africa_continent}
type= 'SubLayer'
shapeSettings= {{
fill: 'blue'
}}
/>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enabling legend
The legend can be added to the tile Maps by setting the visible property of legendSettings to true.
import { markerDataSource } from 'markerdata.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Marker, MarkersDirective, MarkerDirective, Legend, Inject } from '@syncfusion/ej2-react-maps';
function load(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;
});
}
export function App() {
return(
<MapsComponent
load={load}
legendSettings={{
visible: true,
type: 'Markers',
useMarkerShape: true,
toggleLegendSettings: {
enable: true,
applyShapeSettings: false,
border: {
color: 'green',
width: 2,
},
},
}}
>
<Inject services={[Marker, Legend]} />
<LayersDirective>
<LayerDirective>
<MarkersDirective>
<MarkerDirective
visible={true}
dataSource={markerDataSource}
colorValuePath="color"
shapeValuePath="shape"
legendText="country"
></MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);