Improve style consistency
This commit is contained in:
parent
dff357cfca
commit
9e72a5dcc2
GPG key ID:
511C112F1331BBB4
3 changed files with 105 additions and 116 deletions
|
|
@ -6,8 +6,14 @@ root = true
|
|||
charset = utf-8
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
quote_type = double
|
||||
|
||||
[*.html]
|
||||
indent_size = 2
|
||||
|
||||
[*.svg]
|
||||
indent_style = tab
|
||||
indent_size = unset
|
||||
|
|
|
|||
|
|
@ -115,13 +115,13 @@
|
|||
|
||||
<!-- Google Analytics SDK -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
|
||||
|
||||
ga('create', 'UA-25444917-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
ga("create", "UA-25444917-8", "auto");
|
||||
ga("send", "pageview");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
207
src/js/map.js
207
src/js/map.js
|
|
@ -1,16 +1,16 @@
|
|||
$(document).ready(function() {
|
||||
/* change image path */
|
||||
L.Icon.Default.imagePath = 'img/';
|
||||
L.Icon.Default.imagePath = "img/";
|
||||
|
||||
var popuptemplate = Handlebars.compile($('#popup-template').html());
|
||||
var popuptemplate = Handlebars.compile($("#popup-template").html());
|
||||
var RedIcon = L.Icon.Default.extend({
|
||||
options: {
|
||||
iconUrl: 'red-marker.png'
|
||||
iconUrl: "red-marker.png"
|
||||
}
|
||||
});
|
||||
var ChristmasIcon = L.Icon.Default.extend({
|
||||
options: {
|
||||
iconUrl: 'christmas-marker.png'
|
||||
iconUrl: "christmas-marker.png"
|
||||
}
|
||||
});
|
||||
var redIcon = new RedIcon();
|
||||
|
|
@ -22,152 +22,135 @@ $(document).ready(function() {
|
|||
function onEachFeature(feature, layer) {
|
||||
if (feature.properties) {
|
||||
layer.bindPopup(popuptemplate(feature.properties), {
|
||||
showOnMouseOver: true
|
||||
showOnMouseOver: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function pointToLayer(feature, latlng) {
|
||||
var marker = new HoverMarker(latlng, { icon: redIcon, riseOnHover: true});
|
||||
if (feature.properties) {
|
||||
if (feature.properties.holidays && christmasHoliday) {
|
||||
var marker = new HoverMarker(latlng, { icon: christmasIcon, riseOnHover: true});
|
||||
var marker = new HoverMarker(latlng, { icon: redIcon, riseOnHover: true});
|
||||
if (feature.properties) {
|
||||
if (feature.properties.holidays && christmasHoliday) {
|
||||
var marker = new HoverMarker(latlng, { icon: christmasIcon, riseOnHover: true});
|
||||
}
|
||||
if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {
|
||||
var marker = new HoverMarker(latlng, { icon: blueIcon, riseOnHover: true});
|
||||
}
|
||||
}
|
||||
if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {
|
||||
var marker = new HoverMarker(latlng, { icon: blueIcon, riseOnHover: true});
|
||||
}
|
||||
}
|
||||
return marker
|
||||
return marker;
|
||||
}
|
||||
|
||||
var map = L.map('map').setView([50.702, 4.335], 9);
|
||||
var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}{r}.png', {
|
||||
var map = L.map("map").setView([50.702, 4.335], 9);
|
||||
var osm = L.tileLayer("https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}{r}.png", {
|
||||
attribution: 'Achtergrondkaart © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-bijdragers (data) en © <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> (stijl) | <span lang="en">Made with ❤ by <a href="https://zeus.gent/">Zeus WPI</a></span>',
|
||||
detectRetina: true
|
||||
}).addTo(map);
|
||||
|
||||
$.getJSON('https://blokdata.zeus.gent/data.json')
|
||||
.done(function(data) {
|
||||
var geojson = L.geoJson(data, {
|
||||
onEachFeature: onEachFeature,
|
||||
pointToLayer: pointToLayer
|
||||
$.getJSON("https://blokdata.zeus.gent/data.json")
|
||||
.done(function(data) {
|
||||
var geojson = L.geoJson(data, {
|
||||
onEachFeature: onEachFeature,
|
||||
pointToLayer: pointToLayer
|
||||
});
|
||||
map.addLayer(geojson);
|
||||
});
|
||||
map.addLayer(geojson);
|
||||
});
|
||||
|
||||
var SimpleControl = L.Control.extend({
|
||||
initialize: function(templateId, divClass, options) {
|
||||
this.template = Handlebars.compile($(templateId).html());
|
||||
this.divClass = divClass;
|
||||
L.Util.setOptions(this, options);
|
||||
},
|
||||
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();
|
||||
onAdd: function (map) {
|
||||
this._div = L.DomUtil.create("div", this.divClass);
|
||||
this._div.innerHTML = this.template();
|
||||
|
||||
return this._div;
|
||||
}
|
||||
return this._div;
|
||||
}
|
||||
});
|
||||
|
||||
// code copied from http://jsfiddle.net/sowelie/3JbNY/
|
||||
var HoverMarker = L.Marker.extend({
|
||||
bindPopup: function(htmlContent, options) {
|
||||
bindPopup: function(htmlContent, options) {
|
||||
|
||||
if (options && options.showOnMouseOver) {
|
||||
if (options && options.showOnMouseOver) {
|
||||
|
||||
// call the super method
|
||||
L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]);
|
||||
L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]);
|
||||
|
||||
// unbind the click event
|
||||
this.off("click", this.openPopup, this);
|
||||
this.off("click", this.openPopup, this);
|
||||
|
||||
// bind to mouse over
|
||||
this.on("mouseover", function(e) {
|
||||
this.on("mouseover", function(e) {
|
||||
|
||||
// get the element that the mouse hovered onto
|
||||
var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
|
||||
var parent = this._getParent(target, "leaflet-popup");
|
||||
|
||||
// check to see if the element is a popup, and if it is this marker's popup
|
||||
if (parent == this._popup._container)
|
||||
return true;
|
||||
|
||||
this.openPopup();
|
||||
|
||||
}, this);
|
||||
|
||||
this.on("mouseout", function(e) {
|
||||
|
||||
// get the element that the mouse hovered onto
|
||||
var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
|
||||
|
||||
// check to see if the element is a popup
|
||||
if (this._getParent(target, "leaflet-popup")) {
|
||||
L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
|
||||
return true;
|
||||
}
|
||||
|
||||
this.closePopup();
|
||||
|
||||
}, this);
|
||||
}
|
||||
},
|
||||
|
||||
_popupMouseOut: function(e) {
|
||||
// detach the event
|
||||
L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this);
|
||||
|
||||
// get the element that the mouse hovered onto
|
||||
var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
|
||||
var parent = this._getParent(target, "leaflet-popup");
|
||||
|
||||
// check to see if the element is a popup, and if it is this marker's popup
|
||||
if (parent == this._popup._container)
|
||||
return true;
|
||||
|
||||
// show the popup
|
||||
this.openPopup();
|
||||
|
||||
}, this);
|
||||
|
||||
// and mouse out
|
||||
this.on("mouseout", function(e) {
|
||||
|
||||
// get the element that the mouse hovered onto
|
||||
var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
|
||||
var target = e.toElement || e.relatedTarget;
|
||||
|
||||
// check to see if the element is a popup
|
||||
if (this._getParent(target, "leaflet-popup")) {
|
||||
if (this._getParent(target, "leaflet-popup"))
|
||||
return true;
|
||||
|
||||
L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
|
||||
return true;
|
||||
// check to see if the marker was hovered back onto
|
||||
if (target == this._icon)
|
||||
return true;
|
||||
|
||||
this.closePopup();
|
||||
},
|
||||
|
||||
_getParent: function(element, className) {
|
||||
var parent = element.parentNode;
|
||||
|
||||
while (parent) {
|
||||
if (parent.className && L.DomUtil.hasClass(parent, className))
|
||||
return parent;
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
|
||||
// hide the popup
|
||||
this.closePopup();
|
||||
|
||||
}, this);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_popupMouseOut: function(e) {
|
||||
|
||||
// detach the event
|
||||
L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this);
|
||||
|
||||
// get the element that the mouse hovered onto
|
||||
var target = e.toElement || e.relatedTarget;
|
||||
|
||||
// check to see if the element is a popup
|
||||
if (this._getParent(target, "leaflet-popup"))
|
||||
return true;
|
||||
|
||||
// check to see if the marker was hovered back onto
|
||||
if (target == this._icon)
|
||||
return true;
|
||||
|
||||
// hide the popup
|
||||
this.closePopup();
|
||||
|
||||
},
|
||||
|
||||
_getParent: function(element, className) {
|
||||
|
||||
var parent = element.parentNode;
|
||||
|
||||
while (parent != null) {
|
||||
|
||||
if (parent.className && L.DomUtil.hasClass(parent, className))
|
||||
return parent;
|
||||
|
||||
parent = parent.parentNode;
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
var info = new SimpleControl('#info-template', 'info', {
|
||||
position: 'topright'
|
||||
var info = new SimpleControl("#info-template", "info", {
|
||||
position: "topright"
|
||||
}).addTo(map);
|
||||
|
||||
var sharePane = new SimpleControl('#share-template', 'info', {
|
||||
position: 'bottomleft'
|
||||
var sharePane = new SimpleControl("#share-template", "info", {
|
||||
position: "bottomleft"
|
||||
}).addTo(map);
|
||||
|
||||
var legend = new SimpleControl('#legend-template', christmasHoliday ? "holiday-legend" : "legend", {
|
||||
position: 'bottomright'
|
||||
var legend = new SimpleControl("#legend-template", christmasHoliday ? "holiday-legend" : "legend", {
|
||||
position: "bottomright"
|
||||
}).addTo(map);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue