I have a case so I was assigned by my lecturer to create a map with leaflet.js in Vue.js framework which can show map and can search location globally and also can change the map layer with 2 map layers, how to do it using vue.js??
import this code
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-search/dist/leaflet-search.min.css';
import LControlSearch from 'leaflet-search';
import 'leaflet-search';
and export this code as function for running depedency
data() {
return {
baseLayer: null,
satelliteLayer: null,
map: null,
searchControl: null,
}
},
and now the component, put this code into mounted() this code for baseLayer
this.map = L.map('map').setView([-0.9085086842426627, 118.1511063353415], 5)
this.baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}).addTo(this.map);
this.satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 18
});
under baseLayer you need put searchBox here the code
new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat','lon'],
marker: L.circleMarker([0,0],{radius:30}),
autoCollapse: true,
autoType: false,
minLength: 2
}).addTo(this.map);
under searchBox put this code for layerControl
L.control.layers({
'Peta Display': this.baseLayer,
'Peta Satelit': this.satelliteLayer
},{},{
collapsed: true,
}).addTo(this.map);
import the map into vue like this one.
<template>
<div>
<div id="map" class="map">
</div>
</div>
</template>
and finally you can search global location in map can change map layer.
if your map doesn't appear on the screen add this code.
<style>
.map{
height: 575px;
width: auto;
}
</style>
and this is the full code if you find it difficult.
<template>
<div>
<div id="map" class="map">
</div>
</div>
</template>
<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-search/dist/leaflet-search.min.css';
import LControlSearch from 'leaflet-search';
import 'leaflet-search';
export default {
data() {
return {
baseLayer: null,
satelliteLayer: null,
map: null,
searchControl: null,
}
},
mounted() {
this.map = L.map('map').setView([-0.9085086842426627, 118.1511063353415], 5)
this.baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}).addTo(this.map);
this.satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 18
});
new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat','lon'],
marker: L.circleMarker([0,0],{radius:30}),
autoCollapse: true,
autoType: false,
minLength: 2
}).addTo(this.map);
L.control.layers({
'Peta Display': this.baseLayer,
'Peta Satelit': this.satelliteLayer
},{},{
collapsed: true,
}).addTo(this.map);
},
}
</script>
<style>
.map{
height: 575px;
width: auto;
}
</style>
I hope this help you....