midgard/blokmap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Grijze pinnen toegevoegd

Browse source 
Grijze pinnen indiceren dat een locatie niet open is, maar binnenkort opent.
This commit is contained in:
7734485917411998476 2021-05-08 13:47:19 +02:00 committed by GitHub
parent ddc034e6b2
commit 10c385975c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/css/map.css
View file

@ -114,7 +114,7 @@ a.img-and-text-link:hover span {
} }
.legend { .legend {
height: 52px; height: 77px;
width: 130px; width: 130px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,0.65); box-shadow: 0 1px 5px rgba(0,0,0,0.65);

BIN
src/img/grey-marker.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

6
src/index.html
View file

@ -114,9 +114,13 @@
<div style="height: 10px; width: 10px; background: rgb(36, 126, 202); margin-top: 1px; margin-left: 5px;"></div> <div style="height: 10px; width: 10px; background: rgb(36, 126, 202); margin-top: 1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 30px;">Enkel week</span> <span style="position: absolute; left: 25px; top: 30px;">Enkel week</span>
</div> </div>
<div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
<div style="height: 10px; width: 10px; background: rgb(120,120,120); margin-top: 1px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 55px;">Opent binnenkort</span>
</div>
<div style="width: 140px; height: 18px; padding-top: 5px; padding-left: 5px;" class="holiday"> <div style="width: 140px; height: 18px; padding-top: 5px; padding-left: 5px;" class="holiday">
<div style="height: 10px; width: 10px; background: rgb(121, 230, 121); margin-top: 0px; margin-left: 5px;"></div> <div style="height: 10px; width: 10px; background: rgb(121, 230, 121); margin-top: 0px; margin-left: 5px;"></div>
<span style="position: absolute; left: 25px; top: 53px;">Tijdens kerstvakantie</span> <span style="position: absolute; left: 25px; top: 80px;">Tijdens kerstvakantie</span>
</div> </div>
</div> </div>
</script> </script>

14
src/js/map.js
View file

@ -19,10 +19,16 @@ $(document).ready(function() {
iconUrl: "img/christmas-marker.png" iconUrl: "img/christmas-marker.png"
} }
}); });
var GreyIcon = L.Icon.Default.extend({
options: {
iconUrl: "img/grey-marker.png"
}
});
var blueIcon = new BlueIcon(); var blueIcon = new BlueIcon();
var redIcon = new RedIcon(); var redIcon = new RedIcon();
var christmasIcon = new ChristmasIcon(); var christmasIcon = new ChristmasIcon();
var greyIcon = new GreyIcon();
var now = new Date(); var now = new Date();
var christmasSeason = var christmasSeason =
@ -41,7 +47,13 @@ $(document).ready(function() {
var icon = redIcon; var icon = redIcon;
var iconDescription = "red"; var iconDescription = "red";
if (feature.properties) { if (feature.properties) {
if (feature.properties.holidays && christmasSeason) { var startingDateString =feature.properties.period.start;
var month = (parseInt(startingDateString.substring(3,5))-1);
var startingDate = new Date("20"+startingDateString.substring(6,8),month,startingDateString.substring(0,2));
if (Date.now()<startingDate) {
icon = greyIcon;
iconDescription = "grey";
} else if (feature.properties.holidays && christmasSeason) {
icon = christmasIcon; icon = christmasIcon;
iconDescription = "christmas"; iconDescription = "christmas";
} else if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) { } else if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {