I've encountered an issue while trying to integrate LayerGroup into my map in order to enable Leaflet Control Search for city-based searches. The problem seems to be related to an undefined return value or something similar. Since I'm relatively new to Leaflet, I'm not entirely certain if that's the root cause of the problem.
I am using vue-leaflet for the map display. Below is the code snippet:
HTML:
<template>
<div id="actingMapDiv" class = "vh-100 d-flex justify-content-center align-items-center">
<div style="height: 900px; width: 90%" class = "map d-flex flex-column justify-content-center align-items-center">
<h2>Check in our map the situation of requests in your area</h2>
<div class = "void05"></div>
<l-map ref="map"
v-if="showMap"
:zoom="zoom"
:center="center"
:options="mapOptions"
style="height: 80%"
@update:center="centerUpdate"
@update:zoom="zoomUpdate"
class = "d-flex flex-column justify-content-center align-items-center"
>
<l-tile-layer :url="url" :attribution="attribution" />
</l-map>
</div>
</div>
</template>
The script:
<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer } from "vue2-leaflet";
import L from 'leaflet';
export default {
name: "Example",
components: {
LMap,
LTileLayer
},
data() {
return {
zoom: 8,
center: latLng(42.886027, -7.970126),
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
mapOptions: {
zoomSnap: 0.5
},
showMap: true
};
},
methods: {
zoomUpdate(zoom) {
this.currentZoom = zoom;
},
centerUpdate(center) {
this.currentCenter = center;
}
},
mounted: function() {
var map = this.$refs.map;
console.log("My Map", map);
console.log("L", L);
var searchLayer = L.layerGroup().addTo(map);
map.addControl( new L.Control.Search({layer: searchLayer}) );
}
}
</script>
Console errors:
TypeError: "t is undefined"
addLayer leaflet-src.js:6665
addLayer LMap.js:357
addTo leaflet-src.js:6559
mounted actingMapPage.vue:74
VueJS 12
This error then lead me to the following line:
var searchLayer = L.layerGroup().addTo(map);
AFTER FIX:
Additional imports were added:
import 'leaflet-search';
import "leaflet-search/dist/leaflet-search.src.css";
Furthermore, here is the fix solution provided by the verified answer:
mounted: function() {
var map = this.$refs.map.mapObject;
var searchLayer = L.layerGroup().addTo(map);
map.addControl( new L.Control.Search({layer: searchLayer}));
}