Skip to content

Commit

Permalink
Prepare everything for enabling slider
Browse files Browse the repository at this point in the history
  • Loading branch information
ut committed Sep 6, 2024
1 parent 1dc8808 commit f2d6802
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 53 deletions.
28 changes: 18 additions & 10 deletions src/components/LeafletMap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -142,16 +142,12 @@ export default {
let layer_color = ''
let data_id = 1
console.log('Cluster: Zigzgag', cluster.getChildCount())
console.log('Cluster: Childmarkers', cluster.getAllChildMarkers())
// console.log('Cluster: Zigzgag', cluster.getChildCount())
// console.log('Cluster: Childmarkers', cluster.getAllChildMarkers())
// TODO: add color from data
// TODO: build array of colors of all Childmarkers
let childmarker_colors = []
cluster.getAllChildMarkers().forEach(function (marker) {
console.log('Cluster: Childmarker Data', marker)
console.log('Cluster: Childmarker Data Color', marker.data)
console.log('Cluster: Childmarker Data Color', marker.data.color)
// console.log('Cluster: Childmarker Data Color', marker.data.color)
if (marker.data) {
childmarker_colors.push(marker.data.color)
}
Expand Down Expand Up @@ -243,7 +239,7 @@ export default {
selectedYear = summary.minYear
}
// const filteredData =
await filter_and_update(map, data, allMarkers, overlayLayers,summary.minYear, summary.maxYear, selectedYear)
await filter_and_update(map,data,overlayLayers,selectedYear)
} catch (error) {
console.error('Error loading JSON data:', error)
}
Expand Down Expand Up @@ -305,7 +301,7 @@ export default {
darkcolor = '#92c460';
}
const icon = LargeMarkerIcon.create({ color: darkcolor, mtype: mtype })
const marker = L.marker([place.lat, place.lon], { icon: icon, id: place.id, data: place })
Expand All @@ -314,12 +310,24 @@ export default {
marker.data = [];
marker.data.title = place.title;
marker.data.color = darkcolor;
marker.data.mtype = mtype;
marker.data.layer_id = layer.id;
if ( place.startdate && !place.enddate ) {
place.enddate = parseInt(place.startdate.substring(0, 4))+"-12-31T00:00:00.000Z";
console.log("Set enddate with startdate", place.startdate,place.enddate);
}
if ( place.startdate && place.enddate ) {
marker.data = setFromToYears(place.startdate,place.enddate);
}
function setFromToYears (startdate,enddate) {
var startYear = parseInt(startdate.substring(0, 4));
var endYear = parseInt(enddate.substring(0, 4));
return {
fromYear: startYear,
endYear: endYear
};
}
const popupContent = `
Expand Down
2 changes: 2 additions & 0 deletions src/components/TimeSlider.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

<script>
import { computed } from 'vue'
import { filter_and_update } from '@/helpers/filter_and_update'
export default {
props: {
Expand Down Expand Up @@ -57,6 +58,7 @@
} else {
console.warn('TimeSlider - Invalid slider value:', event.target.value)
}
filter_and_update(map,data,overlayLayers,selectedYear)
}
return {
Expand Down
87 changes: 44 additions & 43 deletions src/helpers/filter_and_update.js
Original file line number Diff line number Diff line change
@@ -1,64 +1,65 @@
import { LargeMarkerIcon } from '@/helpers/marker'

export function filter_and_update(map,data,allMarkers, overlayLayers,minYear,maxYear,selectedYear) {
export function filter_and_update(map,data,overlayLayers,selectedYear) {

let AllMarkerLayers = new L.LayerGroup();
selectedYear == '' ? 1900 : selectedYear;

console.log("Timeline: filterMarkers",selectedYear);
console.log("Timeline: allMarkers", allMarkers.length);
console.log("Timeline: overlayLayers", overlayLayers.value);
Object.keys(overlayLayers.value).forEach((layerName) => {
const layer = overlayLayers.value[layerName];

if (layer instanceof L.MarkerClusterGroup) {
console.log("Timeline: layer name", layer);
console.log("Timeline: layer title", layer.options.title);



layer.eachLayer((marker) => {
if (marker instanceof L.Marker) {
console.log("marker.data",marker.options.data.title);
console.log("marker.data",marker.options.data.startdate);
// checkForDates(layer, marker);

}
});
}
});
return;
allMarkers.forEach(function(marker) {
if (!marker.data) {
AllMarkerLayers.removeLayer(marker);
return;
function checkForDates(layer, marker) {

if (!marker.data) {
layer.removeLayer(marker);
return;
}
if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) {
console.log("1", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
console.log("Timeslider marker color",marker.data.color);
// let icon = LargeMarkerIcon.create({color: marker.data.color, opacity: 0.72, mtype: marker.data.mtype })
// marker.setIcon(icon);
marker.addTo(layer);
}
// selecting past years
else if ( marker.data.endYear <= selectedYear) {

console.log("X Past", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);

layer.removeLayer(marker);
let icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.72, mtype: marker.data.mtype })
marker.setIcon(icon);
marker.addTo(layer);
// TODO: remove relations and other elements!

// selecting future years
} else {
console.log("X Future", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
layer.removeLayer(marker);

}
// Check which layers are currently visible
map.value.eachLayer((layer) => {
if (layer instanceof L.MarkerClusterGroup) {
// layer.refreshClusters();
}
})
}
if (marker.data.fromYear <= selectedYear && marker.data.endYear >= selectedYear) {
console.log("1", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
icon = LargeMarkerIcon.create({color: marker.data.color});
marker.setIcon(icon);
marker.addTo(allMarkers);
}
// selecting past years
else if ( marker.data.endYear <= selectedYear) {

console.log("X Past", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
}


if ( $('#map').hasClass('darken-icons2') ) {
icon = LargeMarkerIcon.create({color: '#333', opacity: 0.2});
} else if ( $('#map').hasClass('darken-icons') ) {
icon = LargeMarkerIcon.create({color: '#555', opacity: 0.2});
} else {
icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.42});
}
// window.map.removeLayer(marker);
allMarkers.removeLayer(marker);
marker.setIcon(icon);
marker.addTo(allMarkers);
// TODO: remove relations and other elements!

// selecting future years
} else {
console.log("X Future", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);
// window.map.removeLayer(marker);
allMarkers.removeLayer(marker);
}
});
allMarkers.refreshClusters();
}

0 comments on commit f2d6802

Please sign in to comment.