I am working on a project where I have an array of places that are being displayed in both a table and a map. Each element in the table is represented by a marker, and either a circle or polygon. When an element is selected from the table, the marker icon changes for that specific element. Additionally, there is a slider to adjust the radius of the circles for each element. Currently, all these elements are updated together, but I want to separate the marker, circle, and polygon layers and then group them using layerGroup. This way, when I change the radius, only the circle layer will be updated without affecting the markers and polygons. Similarly, if I select an element from the table, only the marker layer should be updated without impacting the other layers. I have attempted to group the layers like this:
updateLayers(layerData) {
this.marker = [];
for (const ld of layerData) {
this.marker.push(
marker([ld['latitude'], ld['longitude']], {
icon: icon({
iconSize: [20, 32],
iconAnchor: [10, 16],
iconUrl: this.selectedPlaces.indexOf(ld) !== -1 ? this.iconEnablelink : this.iconDisableLink
})
}),
// ld['geofence_type'] && ld['geofence_type'] == 'POLYGON' ? polygon([ld['geofence']['coordinates'][0][0]]) : circle([ld['latitude'], ld['longitude']], { radius: this.radius }),
);
}
console.log('lg', layerGroup([this.marker]));
this.layers = layerGroup([this.marker]);
}
The response I receive is as follows:
options: {}
_initHooksCalled: true
_layers: {45: Array(25)}
__proto__: NewClass
However, I encounter the following error: "Error trying to diff '[object Object]'. Only arrays and iterables are allowed."
I am looking for an efficient solution to implement this functionality.
Edit: I have included a snippet of the functioning code below. Whenever I click on a checkbox, I add or remove that element to selectedPlaces. Then I call the function again. Even when the slider is changed, I must continue calling this function repeatedly. The layers currently include markers, polygons, and sliders, but I aim to separate these into three distinct parts so that selecting an element updates only the marker (ideally for that particular element), and changing the radius via the slider updates only the circles without affecting the markers and polygons.
updateLayers(layerData) {
this.layers = [];
for (const ld of layerData) {
this.layers.push(
marker([ld['latitude'], ld['longitude']], {
icon: icon({
iconSize: [20, 32],
iconAnchor: [10, 16],
iconUrl: this.selectedPlaces.indexOf(ld) !== -1 ? this.iconEnablelink : this.iconDisableLink
})
}),
ld['geofence_type'] && ld['geofence_type'] == 'POLYGON' ? polygon([ld['geofence']['coordinates'][0][0]]) : circle([ld['latitude'], ld['longitude']], { radius: this.radius }),
);
}