HelpBot Assistant

How can I help you?

OpenStreetMap integration in Vue 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.

<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :urlTemplate= 'urlTemplate'>
                    </e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return{
       urlTemplate: 'https://tile.openstreetmap.org/level/tileX/tileY.png'
    }
},
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

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.

<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps :zoomSettings= 'zoomSettings'>
                <e-layers>
                    <e-layer :urlTemplate= 'urlTemplate'>
                    </e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, Zoom, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return{
       zoomSettings: {
        enable: true,
        toolbarSettings: {
          buttonSettings: {
            toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
          }
        }
       },
       urlTemplate: 'https://tile.openstreetmap.org/level/tileX/tileY.png'
    }
},
provide: {
    maps: [ Zoom ]
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

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.

<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps :zoomSettings= 'zoomSettings' :centerPosition= 'centerPosition'>
                <e-layers>
                    <e-layer :urlTemplate= 'urlTemplate'>
                        <e-markerSettings>
                            <e-markerSetting visible= true height=25 width=15 :dataSource ="dataSource" ></e-markerSetting>
                            <e-markerSetting visible= true height=25 width=15 :dataSource ="dataSource1"></e-markerSetting>
                        </e-markerSettings>
                        <e-navigationLineSettings>
                            <e-navigationLineSetting visible = true :latitude ='latitude' :longitude ='longitude' :color ='color' :angle ='angle' :width="width">
                            </e-navigationLineSetting>
                        </e-navigationLineSettings>
                    </e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, NavigationLine, Marker, Zoom, LayerDirective, LayersDirective,
    MarkerSettingsDirective, MarkerSettingDirective, NavigationLineSettingsDirective, NavigationLineSettingDirective
 } from '@syncfusion/ej2-vue-maps';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
"e-markerSettings":MarkerSettingsDirective,
"e-markerSetting":MarkerSettingDirective,
"e-navigationLineSettings":NavigationLineSettingsDirective,
"e-navigationLineSetting":NavigationLineSettingDirective
},
data () {
    return{
       zoomSettings: {
           zoomFactor: 4
       },
       centerPosition: {
           latitude: 29.394708,
           longitude: -94.954653
       },
       urlTemplate: 'https://tile.openstreetmap.org/level/tileX/tileY.png',
       dataSource: [
            {
                latitude: 34.060620,
                longitude: -118.330491,
                name: "California"
        }],
        dataSource1: [
            {
                latitude: 40.724546,
                longitude: -73.850344,
                name: "New York"
        }],
        color: "blue",
        width: 5,
        angle: 0.1,
        latitude: [34.060620, 40.724546],
        longitude: [-118.330491,-73.850344]
    }
},
provide: {
    maps: [ NavigationLine, Marker, Zoom ]
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

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.

<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :urlTemplate= 'urlTemplate'></e-layer>
                    <e-layer :shapeData='shapeData1' :type = 'type' :shapeSettings='shapeSettings1' ></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { africa } from './africa.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return{
       urlTemplate: 'https://tile.openstreetmap.org/level/tileX/tileY.png',
       shapeData1: africa,
       type: 'SubLayer',
       shapeSettings1: {
           fill: 'blue'
       }
    }
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

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.

<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps id='container' :legendSettings='legendSettings'>
            <e-layers>
                <e-layer :urlTemplate='urlTemplate' :shapeSettings='shapeSettings' :markerSettings='markerSettings'></e-layer>
            </e-layers>
        </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, Marker, Legend, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { markerDataSource } from './marker-data.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return {
        urlTemplate: 'https://tile.openstreetmap.org/level/tileX/tileY.png',
        legendSettings: {
            visible: true,
            type: 'Markers',
            useMarkerShape:true,
            toggleLegendSettings: {
                enable: true,
                applyShapeSettings: false,
                border: {
                    color: 'green',
                    width: 2
                }
            }
        },
        shapeSettings: {
            fill: '#E5E5E5'
        },
        markerSettings: [
            {
                colorValuePath: 'color',
                shapeValuePath:'shape',
                legendText: 'country',
                visible: true,
                dataSource: markerDataSource
            }
        ]
    }
},
provide: {
    maps: [Legend, Marker]
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>