2014-12-11 17:26:15 +00:00
|
|
|
$(document).ready(function() {
|
2020-05-22 20:01:41 +00:00
|
|
|
Handlebars.registerHelper("date", function (ddmyyyy) {
|
|
|
|
return ddmyyyy.replace(/-/g, "/");
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2020-05-22 20:35:28 +00:00
|
|
|
L.Icon.Default.imagePath = "img";
|
2015-04-13 09:15:31 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
var popuptemplate = Handlebars.compile($("#popup-template").html());
|
2020-05-20 23:44:14 +00:00
|
|
|
|
2020-05-22 19:59:01 +00:00
|
|
|
var BlueIcon = L.Icon.Default.extend({});
|
2014-12-11 17:26:15 +00:00
|
|
|
var RedIcon = L.Icon.Default.extend({
|
|
|
|
options: {
|
2020-05-22 20:35:28 +00:00
|
|
|
iconUrl: "img/red-marker.png"
|
2014-12-11 17:26:15 +00:00
|
|
|
}
|
|
|
|
});
|
2015-12-24 16:50:50 +00:00
|
|
|
var ChristmasIcon = L.Icon.Default.extend({
|
|
|
|
options: {
|
2020-05-22 20:35:28 +00:00
|
|
|
iconUrl: "img/christmas-marker.png"
|
2015-12-24 16:50:50 +00:00
|
|
|
}
|
|
|
|
});
|
2020-05-20 23:44:14 +00:00
|
|
|
|
2020-05-22 19:59:01 +00:00
|
|
|
var blueIcon = new BlueIcon();
|
2014-12-11 17:26:15 +00:00
|
|
|
var redIcon = new RedIcon();
|
2015-12-24 16:50:50 +00:00
|
|
|
var christmasIcon = new ChristmasIcon();
|
2020-05-20 23:44:14 +00:00
|
|
|
|
|
|
|
var now = new Date();
|
|
|
|
var christmasSeason =
|
|
|
|
now.getTime() > new Date(now.getFullYear() + "-12-20").getTime() ||
|
|
|
|
now.getTime() < new Date(now.getFullYear() + "-01-04").getTime();
|
2014-12-11 17:26:15 +00:00
|
|
|
|
|
|
|
function onEachFeature(feature, layer) {
|
|
|
|
if (feature.properties) {
|
2019-02-17 15:57:08 +00:00
|
|
|
layer.bindPopup(popuptemplate(feature.properties), {
|
2020-05-20 15:58:11 +00:00
|
|
|
showOnMouseOver: true
|
2019-02-17 15:57:08 +00:00
|
|
|
});
|
2014-12-11 17:26:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function pointToLayer(feature, latlng) {
|
2020-05-20 23:44:14 +00:00
|
|
|
var icon = redIcon;
|
2020-05-22 20:00:43 +00:00
|
|
|
var iconDescription = "red";
|
2020-05-20 15:58:11 +00:00
|
|
|
if (feature.properties) {
|
2020-05-20 23:44:14 +00:00
|
|
|
if (feature.properties.holidays && christmasSeason) {
|
|
|
|
icon = christmasIcon;
|
2020-05-22 20:00:43 +00:00
|
|
|
iconDescription = "christmas";
|
2020-05-20 23:44:14 +00:00
|
|
|
} else if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {
|
|
|
|
icon = blueIcon;
|
2020-05-22 20:00:43 +00:00
|
|
|
iconDescription = "blue";
|
2020-05-20 15:58:11 +00:00
|
|
|
}
|
2014-12-11 17:26:15 +00:00
|
|
|
}
|
2020-05-20 23:44:14 +00:00
|
|
|
return new HoverMarker(latlng, { icon: icon, riseOnHover: true});
|
2014-12-11 17:26:15 +00:00
|
|
|
}
|
|
|
|
|
2020-08-01 21:42:56 +00:00
|
|
|
var map = L.map("map", {zoomControl: false}).setView([50.702, 4.335], 9);
|
2020-08-04 23:19:31 +00:00
|
|
|
var osm = L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
|
|
|
|
id: 'mapbox/streets-v11',
|
|
|
|
tileSize: 512,
|
|
|
|
zoomOffset: -1,
|
|
|
|
// account name = zeuswpi, details are in password manager
|
|
|
|
// token has a restriction to only work with our domains and localhost
|
|
|
|
accessToken: 'pk.eyJ1IjoiemV1c3dwaSIsImEiOiJja2QzMDZ1NmcwMjBtMnlxbXV2bXVpaXhuIn0.-ViXZUT9SqRI3IvB8209LQ',
|
|
|
|
attribution: 'Achtergrondkaart © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-bijdragers, <span lang="en">Imagery © <a href="https://www.mapbox.com/">Mapbox</a></span>. | <span lang="en">Made with ❤ by <a href="https://zeus.gent/">Zeus WPI</a></span> | <a href="https://zeus.gent/about/privacy/">Privacybeleid</a>',
|
2020-06-22 11:10:15 +00:00
|
|
|
maxZoom: 18
|
2015-02-13 17:52:57 +00:00
|
|
|
}).addTo(map);
|
2014-12-11 17:26:15 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
$.getJSON("https://blokdata.zeus.gent/data.json")
|
|
|
|
.done(function(data) {
|
|
|
|
var geojson = L.geoJson(data, {
|
|
|
|
onEachFeature: onEachFeature,
|
|
|
|
pointToLayer: pointToLayer
|
|
|
|
});
|
|
|
|
map.addLayer(geojson);
|
2014-12-11 17:26:15 +00:00
|
|
|
});
|
|
|
|
|
2014-12-11 21:54:02 +00:00
|
|
|
var SimpleControl = L.Control.extend({
|
2020-05-20 15:58:11 +00:00
|
|
|
initialize: function(templateId, divClass, options) {
|
|
|
|
this.template = Handlebars.compile($(templateId).html());
|
|
|
|
this.divClass = divClass;
|
|
|
|
L.Util.setOptions(this, options);
|
|
|
|
},
|
|
|
|
|
|
|
|
onAdd: function (map) {
|
|
|
|
this._div = L.DomUtil.create("div", this.divClass);
|
|
|
|
this._div.innerHTML = this.template();
|
|
|
|
|
|
|
|
return this._div;
|
|
|
|
}
|
2014-12-11 21:54:02 +00:00
|
|
|
});
|
2020-05-20 15:58:11 +00:00
|
|
|
|
2019-02-17 15:57:08 +00:00
|
|
|
// code copied from http://jsfiddle.net/sowelie/3JbNY/
|
|
|
|
var HoverMarker = L.Marker.extend({
|
2020-05-20 15:58:11 +00:00
|
|
|
bindPopup: function(htmlContent, options) {
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
if (options && options.showOnMouseOver) {
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]);
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
this.off("click", this.openPopup, this);
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
this.on("mouseover", function(e) {
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
// get the element that the mouse hovered onto
|
|
|
|
var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
|
2020-05-21 00:26:44 +00:00
|
|
|
var ancestor = this._findAncestorWithClass(target, "leaflet-popup");
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
// check to see if the element is a popup, and if it is this marker's popup
|
2020-05-21 00:26:44 +00:00
|
|
|
if (ancestor && ancestor === this._popup._container)
|
2020-05-20 15:58:11 +00:00
|
|
|
return true;
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
this.openPopup();
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
}, this);
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
this.on("mouseout", function(e) {
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
// get the element that the mouse hovered onto
|
|
|
|
var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
// check to see if the element is a popup
|
2020-05-21 00:26:44 +00:00
|
|
|
if (this._findAncestorWithClass(target, "leaflet-popup")) {
|
2020-05-20 15:58:11 +00:00
|
|
|
L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
|
|
|
|
return true;
|
|
|
|
}
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
this.closePopup();
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
}, this);
|
2019-02-17 15:57:08 +00:00
|
|
|
}
|
2020-05-20 15:58:11 +00:00
|
|
|
},
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
_popupMouseOut: function(e) {
|
|
|
|
// detach the event
|
|
|
|
L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this);
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
// get the element that the mouse hovered onto
|
|
|
|
var target = e.toElement || e.relatedTarget;
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
// check to see if the element is a popup
|
2020-05-21 00:26:44 +00:00
|
|
|
if (this._findAncestorWithClass(target, "leaflet-popup"))
|
2020-05-20 15:58:11 +00:00
|
|
|
return true;
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
// check to see if the marker was hovered back onto
|
2020-05-21 00:26:44 +00:00
|
|
|
if (target === this._icon)
|
2020-05-20 15:58:11 +00:00
|
|
|
return true;
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
this.closePopup();
|
|
|
|
},
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-21 00:26:44 +00:00
|
|
|
_findAncestorWithClass: function(element, className) {
|
|
|
|
while (element) {
|
|
|
|
if (element.className && L.DomUtil.hasClass(element, className))
|
|
|
|
return element;
|
|
|
|
element = element.parentNode;
|
2020-05-20 15:58:11 +00:00
|
|
|
}
|
2020-05-20 14:12:27 +00:00
|
|
|
|
2020-05-21 00:26:44 +00:00
|
|
|
return null;
|
2019-02-17 15:57:08 +00:00
|
|
|
}
|
|
|
|
});
|
2014-12-11 20:36:36 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
var info = new SimpleControl("#info-template", "info", {
|
|
|
|
position: "topright"
|
2014-12-11 21:54:02 +00:00
|
|
|
}).addTo(map);
|
2014-12-11 20:36:36 +00:00
|
|
|
|
2020-05-20 15:58:11 +00:00
|
|
|
var sharePane = new SimpleControl("#share-template", "info", {
|
|
|
|
position: "bottomleft"
|
2014-12-11 21:54:02 +00:00
|
|
|
}).addTo(map);
|
2014-12-11 20:36:36 +00:00
|
|
|
|
2020-05-20 23:44:14 +00:00
|
|
|
var legend = new SimpleControl("#legend-template", christmasSeason ? "holiday-legend" : "legend", {
|
2020-05-20 15:58:11 +00:00
|
|
|
position: "bottomright"
|
2014-12-11 21:54:02 +00:00
|
|
|
}).addTo(map);
|
2020-08-01 21:42:56 +00:00
|
|
|
|
2020-08-01 21:53:03 +00:00
|
|
|
var notice = new SimpleControl("#notice-template", "notice", {
|
|
|
|
position: "bottomleft"
|
|
|
|
}).addTo(map);
|
|
|
|
|
2020-08-01 21:42:56 +00:00
|
|
|
L.control.zoom().addTo(map);
|
2014-12-11 17:26:15 +00:00
|
|
|
});
|