Element UI vue js open street map
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings= 'zoomSettings'>
<e-layers>
<e-layer :layerType= 'layerType' >
</e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, MapsComponent, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
toolBars: ["Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset"]
},
layerType: 'OSM'
}
},
provide: {
maps: [ Zoom ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>