Skip to content

Commit 7e0e111

Browse files
basgrootbasgroot
committed
Icons
1 parent bc7aa5b commit 7e0e111

File tree

8 files changed

+135
-43
lines changed

8 files changed

+135
-43
lines changed

‎favicon.ico

220 KB
Binary file not shown.

‎img/aanvraag.png

3.73 KB
Loading

‎img/apv.png

1.85 KB
Loading

‎img/bar.png

1.76 KB
Loading

‎img/constructie.png

1.99 KB
Loading

‎img/hotel.png

1.53 KB
Loading

‎index.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,16 @@
1111
<body>
1212

1313
<div id="idHeader">
14-
14+
<center>
15+
<label>
16+
Toon publicaties: <select id="idCbxPeriod">
17+
<option value="3d">Laatste drie dagen</option>
18+
<option value="7d">Laatste week</option>
19+
<option value="14d" selected>Laatste twee weken</option>
20+
<option value="all">Alle vergunningen</option>
21+
</select>
22+
</label>
23+
</center>
1524
</div>
1625

1726
<div id="overzicht-bekendmakingen"></div>

‎map.js

Lines changed: 125 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
/*jslint browser: true, for: true, long: true, unordered: true */
22
/*global window console google */
33

4+
/*
5+
tedoen:
6+
- "Verzonden naar aanvrager op :" (https://zoek.officielebekendmakingen.nl/gmb-2022-441976.html)
7+
..en https://zoek.officielebekendmakingen.nl/gmb-2022-463945.html
8+
9+
Verzonden naar aanvrager op: --
10+
- https://zoek.officielebekendmakingen.nl/gmb-2022-440164.html
11+
*/
12+
413
// This function is called by Google Maps API, after loading the library. Function name is sent as query parameter.
514
function initBekendmakingenMap() {
615
var mapDetails = {
@@ -13,7 +22,7 @@ function initBekendmakingenMap() {
1322
var map;
1423
var infoWindow;
1524
var inputData;
16-
//var markersArray = [];
25+
var markersArray = [];
1726

1827
function convertRijksdriehoekToLatLng(x, y) {
1928
// The city "Amsterfoort" is used as reference "Rijksdriehoek" coordinate.
@@ -61,10 +70,15 @@ function initBekendmakingenMap() {
6170
);
6271
}
6372

73+
function getDaysPassed(date) {
74+
const today = new Date(new Date().toDateString()); // Rounded date
75+
const dateFrom = new Date(date.toDateString());
76+
return Math.round((today.getTime() - dateFrom.getTime()) / (1000 * 60 * 60 * 24));
77+
}
78+
6479
function parseBekendmaking(responseXml, datumGepubliceerd, gmbNumber) {
6580
const identifier = "Verzonden naar aanvrager op: ";
6681
const alineas = getAlineas(responseXml);
67-
const today = new Date(new Date().toDateString());
6882
const maxLooptijd = (6 * 7) + 1; // 6 weken de tijd om bezwaar te maken
6983
const dateFormatOptions = {"weekday": "long", "year": "numeric", "month": "long", "day": "numeric"};
7084
var datumBekendgemaakt; // Datum verzonden aan belanghebbende(n)
@@ -88,11 +102,7 @@ function initBekendmakingenMap() {
88102
// Remove time from dates:
89103
datumBekendgemaakt = new Date(value.substr(35, 4) + "-" + value.substr(32, 2) + "-" + value.substr(29, 2));
90104
datumBekendgemaakt = new Date(datumBekendgemaakt.toDateString());
91-
looptijd = Math.round((today.getTime() - datumGepubliceerd.getTime()) / (1000 * 60 * 60 * 24));
92-
console.log("today.getTime(): " + today.getTime());
93-
console.log("datumGepubliceerd.getTime(): " + datumGepubliceerd.getTime());
94-
console.log("looptijd: " + looptijd);
95-
console.log("maxLooptijd: " + maxLooptijd);
105+
looptijd = getDaysPassed(datumBekendgemaakt);
96106
resterendAantalDagenBezwaartermijn = maxLooptijd - looptijd;
97107
document.getElementById(gmbNumber).innerHTML = "Gepubliceerd: " + datumGepubliceerd.toLocaleDateString("nl-NL", dateFormatOptions) + ".<br />Bekendgemaakt aan belanghebbende: " + datumBekendgemaakt.toLocaleDateString("nl-NL", dateFormatOptions) + ".<br />" + (
98108
resterendAantalDagenBezwaartermijn > 0
@@ -142,44 +152,123 @@ function initBekendmakingenMap() {
142152
return websiteUrl.substr(40, websiteUrl.length - 45);
143153
}
144154

145-
function addMarker(feature) {
155+
function getIcon(title) {
156+
const aanvraagFilters = [
157+
"verlenging",
158+
"aanvraag"
159+
];
160+
var apvFilter = "besluit apv";
161+
var isAanvraag = false;
162+
title = title.toLowerCase();
163+
aanvraagFilters.forEach(function (filter) {
164+
if (title.substring(0, filter.length) === filter) {
165+
isAanvraag = true;
166+
}
167+
});
168+
if (isAanvraag) {
169+
return "img/aanvraag.png";
170+
}
171+
if (title.substring(0, apvFilter.length) === apvFilter) {
172+
return "img/apv.png";
173+
}
174+
if (title.indexOf("exploitatievergunning") >= 0 || title.indexOf("alcoholwetvergunning") >= 0) {
175+
return "img/bar.png";
176+
}
177+
if (title.indexOf("bed & breakfast") >= 0 || title.indexOf("vakantieverhuur") >= 0) {
178+
return "img/hotel.png";
179+
}
180+
return "img/constructie.png";
181+
}
182+
183+
function findUniquePosition(proposedCoordinate) {
184+
185+
function isCoordinateAvailable(coordinate) {
186+
var isAvailable = true; // Be positive
187+
var i;
188+
var marker;
189+
for (i = 0; i < markersArray.length; i += 1) {
190+
// Don't use forEach, to gain some performance.
191+
marker = markersArray[i];
192+
if (marker.position.lat === coordinate.lat && marker.position.lng === coordinate.lng) {
193+
isAvailable = false;
194+
break;
195+
}
196+
}
197+
return isAvailable;
198+
}
199+
200+
while (!isCoordinateAvailable(proposedCoordinate)) {
201+
proposedCoordinate.lat = proposedCoordinate.lat + 0.000017;
202+
proposedCoordinate.lng = proposedCoordinate.lng + 0.000016;
203+
}
204+
return proposedCoordinate;
205+
}
206+
207+
function isMarkerVisible(age, periodToShow) {
208+
switch (periodToShow) {
209+
case "3d":
210+
return age <= 3;
211+
case "7d":
212+
return age <= 7;
213+
case "14d":
214+
return age <= 14;
215+
default:
216+
return true;
217+
}
218+
}
219+
220+
function addMarker(feature, periodToShow) {
146221
// 2022-09-05T09:04:57.175Z;
147222
// https://zoek.officielebekendmakingen.nl/gmb-2022-396401.html;
148223
// "Besluit apv vergunning Verleend Monnikendammerweg 27";
149224
// "TVM- 7 PV reserveren - Monnikendammerweg 27-37 - 03-07/10/2022, Monnikendammerweg 27";
150225
// 125171;
151226
// 488983
152227
// https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
228+
var datumGepubliceerd = new Date(feature.properties.datum_tijdstip);
229+
var position = findUniquePosition(convertRijksdriehoekToLatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]));
230+
var age = getDaysPassed(datumGepubliceerd);
153231
var marker = new google.maps.Marker({
154232
"map": map,
155-
"position": convertRijksdriehoekToLatLng(feature.geometry.coordinates[0], feature.geometry.coordinates[1]),
233+
"position": position,
156234
"clickable": true,
157235
"optimized": true,
158-
"visible": true,
159-
//"icon": "https://elektrischdeelrijden.nl/wp-content/include-me/map/auto.png",
236+
"visible": isMarkerVisible(age, periodToShow),
237+
//"icon": "wegwerkzaamheden-40.svg",
238+
"icon": {
239+
"url": getIcon(feature.properties.titel)
240+
},
160241
//"zIndex": property.zIndex,
161242
"title": feature.properties.titel
162243
});
163244
marker.addListener(
164245
"click",
165246
function () {
166247
var gmbNumber = getGmbNumberFromUrl(feature.properties.url);
167-
var datumGepubliceerd = new Date(feature.properties.datum_tijdstip);
168248
var description = feature.properties.beschrijving + "<br /><br />Meer info: <a href=\"" + feature.properties.url + "\" target=\"blank\">" + feature.properties.url + "</a>.";
169249
showInfoWindow(marker, feature.properties.titel, "<div id=\"" + gmbNumber + "\"><br /><br /><br /></div>" + description);
170250
collectBezwaartermijn(gmbNumber, datumGepubliceerd);
171251
}
172252
);
173-
//markersArray.push({
174-
// "marker": marker,
175-
// "maxZoomLevel": property.maxZoomLevel,
176-
// "minZoomLevel": property.minZoomLevel
177-
//});
178-
return marker;
253+
markersArray.push({
254+
"age": age,
255+
"position": position,
256+
"marker": marker
257+
});
179258
}
180259

181260
function addMarkers() {
182-
inputData.features.forEach(addMarker);
261+
const periodToShow = document.getElementById("idCbxPeriod").value;
262+
inputData.features.forEach(function (feature) {
263+
addMarker(feature, periodToShow);
264+
});
265+
}
266+
267+
function updateDisplayLevel() {
268+
const periodToShow = document.getElementById("idCbxPeriod").value;
269+
markersArray.forEach(function (marker) {
270+
marker.marker.setVisible(isMarkerVisible(marker.age, periodToShow));
271+
});
183272
}
184273

185274
function internalInitMap() {
@@ -197,37 +286,30 @@ function initBekendmakingenMap() {
197286
}
198287
);
199288
map.addListener("zoom_changed", function () {
289+
var periodElm = document.getElementById("idCbxPeriod");
200290
var zoom = map.getZoom();
201-
// // Iterate over markers and call setVisible
202-
// markersArray.forEach(function (marker) {
203-
// marker.marker.setVisible(isMarkerVisible(zoom, marker.minZoomLevel, marker.maxZoomLevel));
204-
// });
205-
// infoWindow.close();
291+
// Iterate over markers and call setVisible
292+
if (zoom <= 13 && (periodElm.value === "7d" || periodElm.value === "14d" || periodElm.value === "all")) {
293+
// Set to 3 days
294+
periodElm.value = "3d";
295+
updateDisplayLevel();
296+
} else if (zoom <= 14 && (periodElm.value === "14d" || periodElm.value === "all")) {
297+
// Set to 7 days
298+
periodElm.value = "7d";
299+
updateDisplayLevel();
300+
} else if (zoom <= 15 && (periodElm.value === "all")) {
301+
// Set to 14 days
302+
periodElm.value = "14d";
303+
updateDisplayLevel();
304+
}
305+
infoWindow.close();
206306
console.log("ZoomLevel: " + zoom);
207307
});
208308
map.addListener("center_changed", function () {
209309
console.log("New center: " + map.getCenter());
210310
});
211311
}
212312

213-
function isKnownBekendmakingType(titel) {
214-
const filters = [
215-
"besluit",
216-
"ontwerpbesluit",
217-
"gemeente amsterdam",
218-
"verlenging",
219-
"aanvraag",
220-
"vergunning verleend"
221-
];
222-
var isKnown = false;
223-
filters.forEach(function (filter) {
224-
if (titel.substring(0, filter.length).toLowerCase() === filter) {
225-
isKnown = true;
226-
}
227-
});
228-
return isKnown;
229-
}
230-
231313
function loadData() {
232314

233315
function sortBekendmakingen(a, b) {
@@ -259,4 +341,5 @@ function initBekendmakingenMap() {
259341

260342
internalInitMap();
261343
loadData();
344+
document.getElementById("idCbxPeriod").addEventListener("change", updateDisplayLevel);
262345
}

0 commit comments

Comments
 (0)