How can I help you?
OpenStreetMap integration in EJ2 TypeScript Maps component
6 Feb 202617 minutes to read
Map providers are online services that supply map tile images for rendering geographic visualizations. The Maps component supports integration with various tile-based map providers to display real-world geographic data.
OpenStreetMap (OSM) is an open-source online map provider built by a community of contributors. It is free to use under an open license and enables users to view and utilize geographic data collaboratively from anywhere on Earth. OSM provides small tile images based on requests and combines those images into a single image to display the map area in the Maps component.
Attribution and licensing
OpenStreetMap is provided under the Open Database License (ODbL). When using OSM tiles, proper attribution must be displayed as required by the license terms. Ensure compliance with OSM’s attribution requirements by including appropriate credits in the application.
Adding OpenStreetMap
OSM maps can be rendered using the urlTemplate property. The URL template specifies the tile server endpoint that provides the map tile images. The Maps component automatically requests and combines the appropriate tiles based on the current map view, zoom level, and geographic extent.
import { Maps } from '@syncfusion/ej2-maps';
let map: Maps = new Maps({
layers: [
{
urlTemplate:"https://tile.openstreetmap.org/level/tileX/tileY.png"
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="africa.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='element'>
</div>
</body>
</html>Changing the tile server of the OpenStreetMap
The OSM tile server can be changed by specifying a different tile server URL in the urlTemplate property. Various OSM tile servers are available with different styles and features. The URL template typically includes placeholders for zoom level and tile coordinates that are automatically replaced by the Maps component. For more details about available OSM tile servers and URL formats, refer to the OSM tile server documentation.
Enabling zooming and panning
The OSM 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 , Zoom} from '@syncfusion/ej2-maps';
Maps.Inject(Zoom);
let map: Maps = new Maps({
zoomSettings: {
enable: true,
toolbarSettings: {
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}
},
layers: [
{
urlTemplate:"https://tile.openstreetmap.org/level/tileX/tileY.png"
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="africa.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='element'>
</div>
</body>
</html>Adding markers and navigation line
Markers can be added to OSM layers to highlight specific locations by setting the latitude and longitude coordinates using markerSettings. Navigation lines can be drawn on top of the OSM layer to visualize routes or connections between locations by configuring the navigationLineSettings with corresponding latitude and longitude coordinates.
import { Maps, NavigationLine, Marker, Zoom } from '@syncfusion/ej2-maps';
Maps.Inject(NavigationLine, Marker, Zoom);
let map: Maps = new Maps({
zoomSettings: {
zoomFactor: 4
},
centerPosition: {
latitude: 29.394708,
longitude: -94.954653
},
layers: [
{
urlTemplate:"https://tile.openstreetmap.org/level/tileX/tileY.png",
markerSettings: [{
visible: true,
height: 25,
width: 15,
dataSource: [
{
latitude: 34.060620,
longitude: -118.330491,
name: "California"
},
{
latitude: 40.724546,
longitude: -73.850344,
name: "New York"
}
]
}],
navigationLineSettings: [{
visible: true,
color: "blue",
width: 5,
angle: 0.1,
latitude: [34.060620, 40.724546],
longitude: [-118.330491,-73.850344]
}]
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="africa.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='element'>
</div>
</body>
</html>Adding sublayer
GeoJSON shapes can be rendered as a sublayer on top of the OSM 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 OSM 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({
layers: [
{
urlTemplate:"https://tile.openstreetmap.org/level/tileX/tileY.png"
},
{
shapeData: Africa_Continent,
type: 'SubLayer',
shapeSettings: {
fill: "blue"
}
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="africa_continent.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>Enabling legend
A legend can be displayed with OSM maps to provide visual context for markers, shapes, or data classifications. The legend is enabled by setting the visible property of legendSettings to true. The legend can be configured to display marker shapes, custom icons, and interactive toggle functionality for controlling layer visibility.
import { Maps, Legend, Marker } from '@syncfusion/ej2-maps';
import { markerDataSource } from './markerdata.ts';
Maps.Inject(Legend, Marker);
let map: Maps = new Maps({
legendSettings: {
visible: true,
type: 'Markers',
useMarkerShape:true,
toggleLegendSettings: {
enable: true,
applyShapeSettings: false,
border: {
color: 'green',
width: 2
}
}
},
layers: [
{
urlTemplate:"https://tile.openstreetmap.org/level/tileX/tileY.png",
shapeDataPath: 'name',
shapePropertyPath: 'name',
shapeSettings: {
fill: '#E5E5E5'
},
markerSettings: [
{
dataSource: markerDataSource,
colorValuePath: 'color',
shapeValuePath:'shape',
legendText: 'country',
visible: true
}
]
}
]
});
map.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="markerdata.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>