Markers are not shown on leaflet map - vue.js

Question

I am working on a task in which I have to show coordinates from an API.
Currently i am successfully able to fetch the data. But when I show it on the Map, Markers are not visible.
When i look in console the following errors appears:-
Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at eval
I have individually tried to pin point the source of error by putting console.log("done") at regular intervals and the exception occurs after the following line in my code:
this.map.addLayer(this.markers);
I have marked this line using comment in my code.
here's what i put in my html
<div id="mapApp">
<div class="container-fluid" style="padding: 0px; position:
relative; min-height: 90vh">
<div id="map" class="map"></div>
</div>
</div>
here's my Full JavaScript File
import Vue from 'vue'
import axios from 'axios'
import L from 'leaflet'
import googleMutant from 'leaflet.gridlayer.googlemutant'
import markercluster from 'leaflet.markercluster'
const baseUrl = 'http://127.0.0.1:8000/';
const vm = new Vue({
el: '#mapApp',
data: {
map: null,
tileLayer: null,
layers: [],
properties: [],
panState: 'closed',
foodIconUnselected: null,
foodIconSelected:null,
realEstateIconUnselected:null,
realEstateIconSelected:null,
zoomlevel:8,
firstLatitude:null,
firstLongitude:null,
roadMutant:null,
markers:null,
allPropertyLayer:null,
mcdPropertyLayer:null,
subwayPropertyLayer:null,
burgerkingPropertyLayer:null,
chickeriaPropertyLayer:null,
starbucksPropertyLayer:null,
kfcPropertyLayer:null,
spettacoloPropertyLayer:null,
holycowPropertyLayer:null,
query:'',
iconLabel:null,
labelName:null,
},
created(){
// execute the method to fetch propertis
let searchParams = new URLSearchParams(window.location.search);
let search_term_value = searchParams.get("search_term")
this.fetchPropertyData(search_term_value);
},
methods: {
initMap() {
this.$data.map = L.map('map').setView([this.$data.firstLatitude, this.$data.firstLongitude], this.$data.zoomlevel);
this.$data.roadMutant = L.gridLayer.googleMutant({
maxZoom: 24,
type: 'roadmap',
styles: /*removed on purpose to reduce size */,
}).addTo(this.$data.map);
L.control.zoom({
position:'topright'
}).addTo(this.$data.map);
this.$data.markers = L.markerClusterGroup({
iconCreateFunction: function (cluster) {
var markers = cluster.getAllChildMarkers();
var html = '<div class="marker-cluster">' + markers.length + '</div>';
return L.divIcon({html: html, className: 'mycluster', iconSize: L.point(40, 40)});
},
spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: true,
});
this.$data.allPropertyLayer = new L.FeatureGroup();
this.$data.mcdPropertyLayer = new L.FeatureGroup();
this.$data.subwayPropertyLayer = new L.FeatureGroup();
this.$data.burgerkingPropertyLayer = new L.FeatureGroup();
this.$data.chickeriaPropertyLayer = new L.FeatureGroup();
this.$data.starbucksPropertyLayer = new L.FeatureGroup();
this.$data.kfcPropertyLayer = new L.FeatureGroup();
this.$data.spettacoloPropertyLayer = new L.FeatureGroup();
this.$data.holycowPropertyLayer = new L.FeatureGroup();
console.log("Done Till Here");
this.fillDataInMap();
},
fillFirstData(){
this.$data.firstLatitude = this.$data.properties[0].latitude;
this.$data.firstLongitude = this.$data.properties[0].longitude;
},
fetchPropertyData(search_term_value){
const self = this;
axios.get(baseUrl + 'api/search/property', {
params:{
'search_term': search_term_value
}
}).then(function (response) {
self.$data.properties = response.data.search_results.data;
self.fillFirstData();
self.initMap();
}).catch(function (error) {
alert(error.response.data);
console.log(error);
})
},
fillDataInMap(){
for(let i =0;i<this.$data.properties.length;i++){
this.$data.iconLabel = this.getPropertyIconLabelUnSelected(this.$data.properties[i]);
this.$data.labelName = this.getPropertyLabelName(this.$data.properties[i]);
let marker = L.marker(new L.LatLng(this.$data.properties[i].latitude, this.$data.properties[i].longitude), {icon: this.$data.iconlabel, id: i+1});
marker.bindTooltip(this.$data.labelName, {permanent: true, direction: 'auto', className: 'map-icon-label',});
marker.bindPopup(this.$data.properties[i].address);
marker.title = this.$data.properties[i].id;
marker.on('click', function (e) {
//showDetails(e, e.target.title);
//changeMarkerIconOnClick(e);
});
marker.on('mouseover',function (e) {
e.target.openPopup();
});
marker.on('mouseout',function (e) {
e.target.closePopup();
});
this.$data.allPropertyLayer.addLayer(marker);
this.addMarkerToRespectiveLayer(this.$data.properties[i].property_sub_type,marker);
}
this.$data.markers.addLayer(this.$data.allPropertyLayer);
Next line throws the exception
this.map.addLayer(this.markers);
},
searchWithQuery(){
this.fetchPropertyData(this.$data.query)
},
showPropertyDetails(id) {
alert('property id is: ' + id)
},
}
});

Answer 1

I found the reason why it was causing exception. I declared variable for custom markers but somehow forgot to initialise them. After removing the Custom markers, markers show on the map but then i am unable to interact with map. It remains static like an image.