Skip to content

Commit

Permalink
Period refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@basgroot
basgroot committed Sep 29, 2023
1 parent 10a2d0a commit 52c37b1
Show file tree
Hide file tree
Showing 4 changed files with 784 additions and 754 deletions.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<div id="map"></div>

<script type="text/javascript" src="municipalities.js" defer></script>
<script type="text/javascript" src="periods.js" defer></script>
<script type="text/javascript" src="map.js" defer></script>
<!-- Create your own key and allow your website: https://console.cloud.google.com/apis/credentials/ -->
<!-- View usage: https://console.cloud.google.com/apis/dashboard -->
Expand Down
121 changes: 55 additions & 66 deletions map.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
/*jslint browser: true, for: true, long: true, unordered: true */
/*global window console google municipalities */

// TODO: remember selected period, if historical
/*global window console google municipalities periods */

/*
* Op zoek naar de website?
Expand Down Expand Up @@ -41,20 +39,16 @@ function initMap() {

function getInitialMapSettings() {
var zoomLevel = appState.initialZoomLevel;
var center;
var urlParams;
var zoomParam;
var centerParam;
var municipality;
var center = Object.assign({}, municipalities[appState.activeMunicipality].center);
var lat;
var lng;
// ?in=Hoorn&zoom=15&center=52.6603118963%2C5.0608995325
// ?in=Oostzaan
if (window.URLSearchParams) {
urlParams = new window.URLSearchParams(window.location.search);
zoomParam = urlParams.get("zoom");
centerParam = urlParams.get("center");
municipality = urlParams.get("in");
const urlSearchParams = new window.URLSearchParams(window.location.search);
var zoomParam = urlSearchParams.get("zoom");
var centerParam = urlSearchParams.get("center");
const municipality = urlSearchParams.get("in");
if (municipality && municipalities[municipality] !== undefined) {
appState.activeMunicipality = municipality;
console.log("Adjusted municipality from URL");
Expand Down Expand Up @@ -371,17 +365,18 @@ function initMap() {
return option;
}

function createOptionEx(value) {
return createOption(value, value, value === appState.activeMunicipality);
}

function createMapsControlLoadingIndicator() {
const controlDiv = document.createElement("div"); // Create a DIV to attach the control UI to the Map.
controlDiv.appendChild(appState.loadingIndicator);
appState.map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(controlDiv);
}

function createMapsControlMunicipalities() {

function createOptionEx(value) {
return createOption(value, value, value === appState.activeMunicipality);
}

const controlDiv = document.createElement("div"); // Create a DIV to attach the control UI to the Map.
const combobox = document.createElement("select");
const municipalityNames = Object.keys(municipalities);
Expand All @@ -398,22 +393,18 @@ function initMap() {
}

function createMapsControlPeriods() {

function createOptionEx(value, displayValue) {
return createOption(value, displayValue, value === appState.period);
}

const controlDiv = document.createElement("div"); // Create a DIV to attach the control UI to the Map.
const combobox = document.createElement("select");
combobox.id = "idCbxPeriod";
combobox.add(createOption("3d", "Publicaties van laatste drie dagen", false));
combobox.add(createOption("7d", "Publicaties van laatste week", false));
combobox.add(createOption("14d", "Publicaties van laatste twee weken", true));
combobox.add(createOption("all", "Alle recente publicaties", false)); // This is also the value when an historical period is selected
combobox.add(createOption("2023-08", "August 2023", false));
combobox.add(createOption("2023-07", "Juli 2023", false));
combobox.add(createOption("2023-06", "Juni 2023", false));
combobox.add(createOption("2023-05", "Mei 2023", false));
combobox.add(createOption("2023-04", "April 2023", false));
combobox.add(createOption("2023-03", "Maart 2023", false));
combobox.add(createOption("2023-02", "Februari 2023", false));
combobox.add(createOption("2023-01", "Januari 2023", false));
combobox.addEventListener("change", updateTimeFilter);
periods.forEach(function (period) {
combobox.add(createOptionEx(period.key, period.val));
});
combobox.addEventListener("change", updatePeriodFilter);
combobox.classList.add("controlStyle");
controlDiv.appendChild(combobox);
appState.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controlDiv);
Expand Down Expand Up @@ -691,7 +682,7 @@ function initMap() {
}
}

function getTimeFilter() {
function getPeriodFilter() {

function isHistoricalPeriod(value) {
// Values of historical periods are notated like '2023-03'
Expand Down Expand Up @@ -727,7 +718,7 @@ function initMap() {
}

function addMarkers(startRecord, isMoreDataAvailable) {
const timeFilter = getTimeFilter();
const periodFilter = getPeriodFilter();
const bounds = appState.map.getBounds();
var position;
var i;
Expand All @@ -737,17 +728,17 @@ function initMap() {
publication = appState.publicationsArray[i];
if (typeof publication.location === "string") {
position = findUniquePosition(createCoordinate(publication.location));
prepareToAddMarker(publication, timeFilter.periodToShow, position, bounds);
prepareToAddMarker(publication, periodFilter.periodToShow, position, bounds);
} else if (Array.isArray(publication.location)) {
publication.location.forEach(function (locatiepunt) {
position = findUniquePosition(createCoordinate(locatiepunt));
prepareToAddMarker(publication, timeFilter.periodToShow, position, bounds);
prepareToAddMarker(publication, periodFilter.periodToShow, position, bounds);
});
} else if (publication.location === undefined) {
console.error("Publication without position: " + JSON.stringify(publication, null, 4));
// Take the center of the municipality:
position = findUniquePosition(municipalities[appState.activeMunicipality].center);
prepareToAddMarker(publication, timeFilter.periodToShow, position, bounds);
prepareToAddMarker(publication, periodFilter.periodToShow, position, bounds);
} else {
console.error("Unsupported publication location: " + JSON.stringify(publication, null, 4));
}
Expand Down Expand Up @@ -797,13 +788,13 @@ function initMap() {
});
}

function updateTimeFilter() {
const timeFilter = getTimeFilter();
if (timeFilter.isHistory) {
console.log("Loading historical data");
loadHistory(timeFilter.period);
function updatePeriodFilter() {
const periodFilter = getPeriodFilter();
if (periodFilter.isHistory) {
console.log("Loading historical data of: " + periodFilter.periodToShow);
loadHistory(periodFilter.period);
} else {
console.log("Filtering time");
console.log("Filtering period to: " + periodFilter.periodToShow);
if (appState.isHistoryActive) {
appState.isHistoryActive = false;
if (appState.isFullyLoaded) {
Expand All @@ -817,22 +808,22 @@ function initMap() {
}
}
appState.markersArray.forEach(function (markerObject) {
markerObject.marker.setVisible(isMarkerVisible(markerObject.age, timeFilter.periodToShow));
markerObject.marker.setVisible(isMarkerVisible(markerObject.age, periodFilter.periodToShow));
});
}
}

/*
* Add municipalyty and other parameters to the URL, so your view can be shared.
* Add municipality and other parameters to the URL, so the view can be shared.
*/
function updateUrl(zoom, center) {
// Add to URL: /?in=Alkmaar&zoom=15&center=52.43660651356703,4.84418395002761
if (window.URLSearchParams) {
const searchParams = new URLSearchParams(window.location.search);
searchParams.set("in", appState.activeMunicipality);
searchParams.set("zoom", zoom);
searchParams.set("center", center.toUrlValue(10));
window.history.replaceState(null, "", window.location.pathname + "?" + searchParams.toString());
const urlSearchParams = new window.URLSearchParams(window.location.search);
urlSearchParams.set("in", appState.activeMunicipality);
urlSearchParams.set("zoom", zoom);
urlSearchParams.set("center", center.toUrlValue(10));
window.history.replaceState(null, "", window.location.pathname + "?" + urlSearchParams.toString());
}
document.title = "Bekendmakingen " + appState.activeMunicipality;
}
Expand Down Expand Up @@ -875,11 +866,9 @@ function initMap() {
* Determine if the municipality is part of the URL.
*/
function isLocationInUrl() {
var urlParams;
var municipality;
if (window.URLSearchParams) {
urlParams = new window.URLSearchParams(window.location.search);
municipality = urlParams.get("in");
const urlSearchParams = new window.URLSearchParams(window.location.search);
const municipality = urlSearchParams.get("in");
if (municipality && municipalities[municipality] !== undefined) {
return true;
}
Expand Down Expand Up @@ -981,22 +970,22 @@ function initMap() {
addMunicipalitiyMarkers();
appState.map.addListener("zoom_changed", function () {
// Add to URL: /?zoom=15&center=52.43660651356703,4.84418395002761
const timeFilter = getTimeFilter();
const periodFilter = getPeriodFilter();
const zoom = appState.map.getZoom();
if (!timeFilter.isHistory) {
if (!periodFilter.isHistory) {
// Iterate over markers and call setVisible
if (zoom <= 13 && (timeFilter.period === "7d" || timeFilter.period === "14d" || timeFilter.period === "all")) {
if (zoom <= 13 && (periodFilter.period === "7d" || periodFilter.period === "14d" || periodFilter.period === "all")) {
// Set to 3 days
timeFilter.elm.value = "3d";
updateTimeFilter();
} else if (zoom <= 14 && (timeFilter.period === "14d" || timeFilter.period === "all")) {
periodFilter.elm.value = "3d";
updatePeriodFilter();
} else if (zoom <= 14 && (periodFilter.period === "14d" || periodFilter.period === "all")) {
// Set to 7 days
timeFilter.elm.value = "7d";
updateTimeFilter();
} else if (zoom <= 15 && (timeFilter.period === "all")) {
periodFilter.elm.value = "7d";
updatePeriodFilter();
} else if (zoom <= 15 && (periodFilter.period === "all")) {
// Set to 14 days
timeFilter.elm.value = "14d";
updateTimeFilter();
periodFilter.elm.value = "14d";
updatePeriodFilter();
}
}
appState.infoWindow.close(); // https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.close
Expand All @@ -1005,14 +994,14 @@ function initMap() {
appState.map.addListener("idle", function () {
// Time to display other markers..
const bounds = appState.map.getBounds();
const timeFilter = getTimeFilter();
const periodFilter = getPeriodFilter();
var delayedMarker;
var i = appState.delayedMarkersArray.length;
while (i > 0) {
i = i - 1;
delayedMarker = appState.delayedMarkersArray[i];
if (bounds.contains(delayedMarker.position)) {
addMarker(delayedMarker.publication, timeFilter.periodToShow, delayedMarker.position);
addMarker(delayedMarker.publication, periodFilter.periodToShow, delayedMarker.position);
appState.delayedMarkersArray.splice(i, 1);
}
}
Expand Down Expand Up @@ -1190,7 +1179,7 @@ function initMap() {

function loadData(isNavigationNeeded) {
const municipalityComboElm = document.getElementById("idCbxMunicipality");
const timeFilter = getTimeFilter();
const periodFilter = getPeriodFilter();
if (municipalityComboElm !== null) {
appState.activeMunicipality = municipalityComboElm.value;
clearMarkers("");
Expand All @@ -1200,7 +1189,7 @@ function initMap() {
}
if (appState.isHistoryActive) {
appState.isHistoryActive = false;
timeFilter.elm.value = "14d";
periodFilter.elm.value = "14d";
}
}
appState.isFullyLoaded = false;
Expand Down
Loading

0 comments on commit 52c37b1

Please sign in to comment.