2014-12-11 18:26:15 +01:00
|
|
|
$(document).ready(function() {
|
2015-04-13 11:15:31 +02:00
|
|
|
/* change image path */
|
2020-05-20 16:12:27 +02:00
|
|
|
L.Icon.Default.imagePath = 'img/';
|
2015-04-13 11:15:31 +02:00
|
|
|
|
2014-12-11 18:26:15 +01:00
|
|
|
var popuptemplate = Handlebars.compile($('#popup-template').html());
|
|
|
|
var RedIcon = L.Icon.Default.extend({
|
|
|
|
options: {
|
2020-05-20 16:12:27 +02:00
|
|
|
iconUrl: 'red-marker.png'
|
2014-12-11 18:26:15 +01:00
|
|
|
}
|
|
|
|
});
|
2015-12-24 17:50:50 +01:00
|
|
|
var ChristmasIcon = L.Icon.Default.extend({
|
|
|
|
options: {
|
2020-05-20 16:12:27 +02:00
|
|
|
iconUrl: 'christmas-marker.png'
|
2015-12-24 17:50:50 +01:00
|
|
|
}
|
|
|
|
});
|
2014-12-11 18:26:15 +01:00
|
|
|
var redIcon = new RedIcon();
|
|
|
|
var BlueIcon = L.Icon.Default.extend({});
|
|
|
|
var blueIcon = new BlueIcon();
|
2015-12-24 17:50:50 +01:00
|
|
|
var christmasIcon = new ChristmasIcon();
|
|
|
|
var christmasHoliday = Date.now() < new Date("2016-01-04").getTime();
|
2014-12-11 18:26:15 +01:00
|
|
|
|
|
|
|
function onEachFeature(feature, layer) {
|
|
|
|
if (feature.properties) {
|
2019-02-17 16:57:08 +01:00
|
|
|
layer.bindPopup(popuptemplate(feature.properties), {
|
|
|
|
showOnMouseOver: true
|
|
|
|
});
|
2014-12-11 18:26:15 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function pointToLayer(feature, latlng) {
|
2019-02-18 11:06:58 +01:00
|
|
|
var marker = new HoverMarker(latlng, { icon: redIcon, riseOnHover: true});
|
2019-02-14 12:30:31 +01:00
|
|
|
if (feature.properties) {
|
|
|
|
if (feature.properties.holidays && christmasHoliday) {
|
2019-02-18 11:06:58 +01:00
|
|
|
var marker = new HoverMarker(latlng, { icon: christmasIcon, riseOnHover: true});
|
2019-02-14 12:30:31 +01:00
|
|
|
}
|
|
|
|
if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {
|
2019-02-18 11:06:58 +01:00
|
|
|
var marker = new HoverMarker(latlng, { icon: blueIcon, riseOnHover: true});
|
2014-12-11 18:26:15 +01:00
|
|
|
}
|
2019-02-14 12:30:31 +01:00
|
|
|
}
|
|
|
|
return marker
|
2014-12-11 18:26:15 +01:00
|
|
|
}
|
|
|
|
|
2020-05-18 20:01:08 +02:00
|
|
|
var map = L.map('map').setView([50.702, 4.335], 9);
|
2016-05-14 14:37:30 +02:00
|
|
|
var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}{r}.png', {
|
2016-05-14 14:23:42 +02:00
|
|
|
attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> | © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-contributors | Made with ❤ by <a href="https://zeus.ugent.be">Zeus WPI</a>',
|
|
|
|
detectRetina: true
|
2015-02-13 18:52:57 +01:00
|
|
|
}).addTo(map);
|
2014-12-11 18:26:15 +01:00
|
|
|
|
2020-05-13 17:02:38 +02:00
|
|
|
$.getJSON('https://blokdata.zeus.gent/data.json')
|
2014-12-11 22:54:02 +01:00
|
|
|
.done(function(data) {
|
2014-12-11 18:26:15 +01:00
|
|
|
var geojson = L.geoJson(data, {
|
|
|
|
onEachFeature: onEachFeature,
|
|
|
|
pointToLayer: pointToLayer
|
|
|
|
});
|
|
|
|
map.addLayer(geojson);
|
|
|
|
});
|
|
|
|
|
2014-12-11 22:54:02 +01:00
|
|
|
var SimpleControl = L.Control.extend({
|
|
|
|
initialize: function(templateId, divClass, options) {
|
|
|
|
this.template = Handlebars.compile($(templateId).html());
|
|
|
|
this.divClass = divClass;
|
|
|
|
L.Util.setOptions(this, options);
|
|
|
|
},
|
2014-12-11 18:26:15 +01:00
|
|
|
|
2014-12-11 22:54:02 +01:00
|
|
|
onAdd: function (map) {
|
|
|
|
this._div = L.DomUtil.create('div', this.divClass);
|
|
|
|
this._div.innerHTML = this.template();
|
2014-12-11 18:26:15 +01:00
|
|
|
|
2014-12-11 22:54:02 +01:00
|
|
|
return this._div;
|
|
|
|
}
|
|
|
|
});
|
2019-02-17 16:57:08 +01:00
|
|
|
// code copied from http://jsfiddle.net/sowelie/3JbNY/
|
|
|
|
var HoverMarker = L.Marker.extend({
|
|
|
|
bindPopup: function(htmlContent, options) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
if (options && options.showOnMouseOver) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// call the super method
|
|
|
|
L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]);
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// unbind the click event
|
|
|
|
this.off("click", this.openPopup, this);
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// bind to mouse over
|
|
|
|
this.on("mouseover", function(e) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// get the element that the mouse hovered onto
|
|
|
|
var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
|
|
|
|
var parent = this._getParent(target, "leaflet-popup");
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// check to see if the element is a popup, and if it is this marker's popup
|
|
|
|
if (parent == this._popup._container)
|
|
|
|
return true;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// show the popup
|
|
|
|
this.openPopup();
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
}, this);
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// and mouse out
|
|
|
|
this.on("mouseout", function(e) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// get the element that the mouse hovered onto
|
|
|
|
var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// check to see if the element is a popup
|
|
|
|
if (this._getParent(target, "leaflet-popup")) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
|
|
|
|
return true;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
}
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// hide the popup
|
|
|
|
this.closePopup();
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
}, this);
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
}
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
},
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
_popupMouseOut: function(e) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// detach the event
|
|
|
|
L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this);
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// get the element that the mouse hovered onto
|
|
|
|
var target = e.toElement || e.relatedTarget;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// check to see if the element is a popup
|
|
|
|
if (this._getParent(target, "leaflet-popup"))
|
|
|
|
return true;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// check to see if the marker was hovered back onto
|
|
|
|
if (target == this._icon)
|
|
|
|
return true;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
// hide the popup
|
|
|
|
this.closePopup();
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
},
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
_getParent: function(element, className) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
var parent = element.parentNode;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
while (parent != null) {
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
if (parent.className && L.DomUtil.hasClass(parent, className))
|
|
|
|
return parent;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
parent = parent.parentNode;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
}
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
return false;
|
2020-05-20 16:12:27 +02:00
|
|
|
|
2019-02-17 16:57:08 +01:00
|
|
|
}
|
|
|
|
});
|
2014-12-11 21:36:36 +01:00
|
|
|
|
2014-12-11 22:54:02 +01:00
|
|
|
var info = new SimpleControl('#info-template', 'info', {
|
|
|
|
position: 'topright'
|
|
|
|
}).addTo(map);
|
2014-12-11 21:36:36 +01:00
|
|
|
|
2014-12-11 22:54:02 +01:00
|
|
|
var sharePane = new SimpleControl('#share-template', 'info', {
|
|
|
|
position: 'bottomleft'
|
|
|
|
}).addTo(map);
|
2014-12-11 21:36:36 +01:00
|
|
|
|
2015-12-24 17:50:50 +01:00
|
|
|
var legend = new SimpleControl('#legend-template', christmasHoliday ? "holiday-legend" : "legend", {
|
2014-12-12 09:50:35 +01:00
|
|
|
position: 'bottomright'
|
2014-12-11 22:54:02 +01:00
|
|
|
}).addTo(map);
|
2014-12-11 18:26:15 +01:00
|
|
|
});
|