React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Map Providers in React Maps component

02 Feb 2023 / 2 minutes to read

Maps component support map providers such as OpenStreetMap that can be added to any layers in maps.

Open Street Map

OpenStreetMap(OSM) is a online map provider. The OpenStreetMap allows you to view, edit and use geographical data in a collaborative way from any place on the Earth. One of the most important features in Maps component is the built-in online map provider support. By using this feature, you can render OpenStreetMaps in the maps component. This provides the ability to visualize street map tiles without using any external shape files.

Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';

export function App() {
    return (
    <MapsComponent id="element">
        <LayersDirective>
            <LayerDirective urlTemplate="http://a.tile.openstreetmap.org/level/tileX/tileY.png">
            </LayerDirective>
        </LayersDirective>
    </MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
    return (<MapsComponent id="element">
        <LayersDirective>
            <LayerDirective urlTemplate="http://a.tile.openstreetmap.org/level/tileX/tileY.png">
            </LayerDirective>
        </LayersDirective>
    </MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Bing Maps

Bing Maps is a online map provider for accessing the external geospatial imagery services for deep-zoom satellite view which is supported in the Maps component. This provides the ability to visualize satellite, aerial, and street maps without using any external shape files.

Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
    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;
        });
    }
    return (
        <MapsComponent id="element" load={load}>
            <LayersDirective>
                <LayerDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
    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;
        });
    }
    return (<MapsComponent id="element" load={load}>
            <LayersDirective>
                <LayerDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Previous
Next