Let me start by mentioning that I am a design student utilizing Vue.js for prototyping my senior project. This is merely a prototype of a diary app and not an actual working project.
The issue at hand involves a map component created with Vue2Leaflet, which includes a Tile Layer. On top of the Tile Layer, I have rendered a GeoJSON file containing two sets of coordinates.
In addition, there is a datepicker component that emits values through an EventBus.
The goal is to toggle the visibility of different <l-geo-json> components based on the emitted value from the datepicker. The visibility parameter of each <l-geo-json> is controlled by changing it according to the boolean value from the datepicker. While this parameter does change dynamically, it does not reflect in the map rendering.
I suspect that this might be due to the map component not re-rendering properly.
This is how my map component looks:
<template>
<div v-if="refresh" id="MapView2">
<i class="material-icons geoLocate" v-on:click="geoLoc">location_searching</i>
<l-map :zoom="zoom" :options="{ zoomControl: false }" class="map" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-geo-json :visible="yesterday.day" :geojson="bus.geojson" :options="bus.options"></l-geo-json>
<l-geo-json :visible="today.day" :geojson="today.geojson" :options="today.options"></l-geo-json>
</l-map>
</div>
</template>
... more code ...
Furthermore, my geojson.js file includes:
import Vue from 'vue';
export const EventBus2 = new Vue();
export const data = {
today: {
"type": "FeatureCollection",
"id": "0520",
"visible": false,
"features": [ // geojson features and coordinates ]
},
yesterday: {
"type": "FeatureCollection",
"id": "0520",
"visible": false,
"features": [ // geojson features and coordinates ]
}
}
The datepicker emits values in MMDD format and the switch statement checks these values against the id property in the GeoJSON data. If a match is found, the corresponding visible property is changed. Although this property is updated upon emission from the datepicker, the changes are not reflected in the map display.
How can this issue be resolved? Is using watch or another method advisable, and if so, how should it be implemented?