Merge pull request #13 from ZeusWPI/retina-support

Retina support

css/leaflet.css

@@ -1,16 +1,12 @@
 /* required styles */
 
-.leaflet-map-pane,
+.leaflet-pane,
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow,
-.leaflet-tile-pane,
 .leaflet-tile-container,
-.leaflet-overlay-pane,
+.leaflet-map-pane svg,
-.leaflet-shadow-pane,
+.leaflet-map-pane canvas,
-.leaflet-marker-pane,
-.leaflet-popup-pane,
-.leaflet-overlay-pane svg,
 .leaflet-zoom-box,
 .leaflet-image-layer,
 .leaflet-layer {
@@ -21,6 +17,7 @@
 .leaflet-container {
 	overflow: hidden;
 	-ms-touch-action: none;
+	touch-action: none;
 	}
 .leaflet-tile,
 .leaflet-marker-icon,
@@ -28,19 +25,29 @@
 	-webkit-user-select: none;
 	   -moz-user-select: none;
 	        user-select: none;
-	-webkit-user-drag: none;
+	  -webkit-user-drag: none;
+	}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
 	}
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
 	display: block;
 	}
-/* map is broken in FF if you have max-width: 100% on tiles */
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
-.leaflet-container img {
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
-	max-width: none !important;
+.leaflet-container .leaflet-overlay-pane svg,
-	}
+.leaflet-container .leaflet-marker-pane img,
-/* stupid Android 2 doesn't understand "max-width: none" properly */
+.leaflet-container .leaflet-tile-pane img,
 .leaflet-container img.leaflet-image-layer {
-	max-width: 15000px !important;
+	max-width: none !important;
 	}
 .leaflet-tile {
 	filter: inherit;
@@ -52,18 +59,25 @@
 .leaflet-zoom-box {
 	width: 0;
 	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
 	}
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
 	-moz-user-select: none;
 	}
 
-.leaflet-tile-pane    { z-index: 2; }
+.leaflet-pane         { z-index: 400; }
-.leaflet-objects-pane { z-index: 3; }
+
-.leaflet-overlay-pane { z-index: 4; }
+.leaflet-tile-pane    { z-index: 200; }
-.leaflet-shadow-pane  { z-index: 5; }
+.leaflet-overlay-pane { z-index: 400; }
-.leaflet-marker-pane  { z-index: 6; }
+.leaflet-shadow-pane  { z-index: 500; }
-.leaflet-popup-pane   { z-index: 7; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
 
 .leaflet-vml-shape {
 	width: 1px;
@@ -80,7 +94,7 @@
 
 .leaflet-control {
 	position: relative;
-	z-index: 7;
+	z-index: 800;
 	pointer-events: auto;
 	}
 .leaflet-top,
@@ -124,7 +138,9 @@
 
 /* zoom and fade animations */
 
-.leaflet-fade-anim .leaflet-tile,
+.leaflet-fade-anim .leaflet-tile {
+	will-change: opacity;
+	}
 .leaflet-fade-anim .leaflet-popup {
 	opacity: 0;
 	-webkit-transition: opacity 0.2s linear;
@@ -132,11 +148,17 @@
 	     -o-transition: opacity 0.2s linear;
 	        transition: opacity 0.2s linear;
 	}
-.leaflet-fade-anim .leaflet-tile-loaded,
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
 	opacity: 1;
 	}
-
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	will-change: transform;
+	}
 .leaflet-zoom-anim .leaflet-zoom-animated {
 	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
 	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
@@ -144,8 +166,7 @@
 	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
 	}
 .leaflet-zoom-anim .leaflet-tile,
-.leaflet-pan-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
-.leaflet-touching .leaflet-zoom-animated {
 	-webkit-transition: none;
 	   -moz-transition: none;
 	     -o-transition: none;
@@ -159,24 +180,43 @@
 
 /* cursors */
 
-.leaflet-clickable {
+.leaflet-interactive {
 	cursor: pointer;
 	}
-.leaflet-container {
+.leaflet-grab {
 	cursor: -webkit-grab;
 	cursor:    -moz-grab;
 	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
 .leaflet-popup-pane,
 .leaflet-control {
 	cursor: auto;
 	}
-.leaflet-dragging .leaflet-container,
+.leaflet-dragging .leaflet-grab,
-.leaflet-dragging .leaflet-clickable {
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
 	cursor: move;
 	cursor: -webkit-grabbing;
 	cursor:    -moz-grabbing;
 	}
 
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive {
+	pointer-events: auto;
+	}
 
 /* visual tweaks */
 
@@ -303,6 +343,10 @@
 	color: #333;
 	background: #fff;
 	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	padding-right: 5px;
+	}
 .leaflet-control-layers-selector {
 	margin-top: 2px;
 	position: relative;
@@ -354,8 +398,8 @@
 	font-size: 11px;
 	white-space: nowrap;
 	overflow: hidden;
-	-moz-box-sizing: content-box;
+	-moz-box-sizing: border-box;
-	     box-sizing: content-box;
+	     box-sizing: border-box;
 
 	background: #fff;
 	background: rgba(255, 255, 255, 0.5);
@@ -422,7 +466,7 @@
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
 	background: white;
-
+	color: #333;
 	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
 	}
 .leaflet-container a.leaflet-popup-close-button {
@@ -430,6 +474,7 @@
 	top: 0;
 	right: 0;
 	padding: 4px 4px 0 0;
+	border: none;
 	text-align: center;
 	width: 18px;
 	height: 14px;

js/map.js

@@ -38,8 +38,9 @@ $(document).ready(function() {
     }
 
     var map = L.map('map').setView([51.0475378, 3.7261835], 13);
-    var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}.png', {
+    var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}{r}.png', {
-      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>'
+      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
     }).addTo(map);
 
     $.getJSON('data.json')