[TASK] Update to leaflet v1

lib/map.js

@@ -1,6 +1,4 @@
-define(['map/clientlayer', 'map/labelslayer',
+define(['map/clientlayer', 'map/labelslayer', 'leaflet', 'moment', 'locationmarker', 'rbush', 'helper'],
-  'leaflet', 'moment', 'locationmarker', 'rbush', 'helper',
-  'leaflet.label'],
   function (ClientLayer, LabelsLayer, L, moment, LocationMarker, rbush, helper) {
     'use strict';
 
@@ -78,7 +76,7 @@ define(['map/clientlayer', 'map/labelslayer',
         };
 
         m.on('click', router.node(d));
-        m.bindLabel(d.nodeinfo.hostname);
+        m.bindTooltip(d.nodeinfo.hostname);
 
         dict[d.nodeinfo.node_id] = m;
 
@@ -105,7 +103,7 @@ define(['map/clientlayer', 'map/labelslayer',
           line.setStyle(opts);
         };
 
-        line.bindLabel(d.source.node.nodeinfo.hostname + ' – ' + d.target.node.nodeinfo.hostname + '<br><strong>' + helper.showDistance(d) + ' / ' + helper.showTq(d) + '</strong>');
+        line.bindTooltip(d.source.node.nodeinfo.hostname + ' – ' + d.target.node.nodeinfo.hostname + '<br><strong>' + helper.showDistance(d) + ' / ' + helper.showTq(d) + '</strong>');
         line.on('click', router.link(d));
 
         dict[d.id] = line;
@@ -279,7 +277,7 @@ define(['map/clientlayer', 'map/labelslayer',
         };
       });
 
-      layers[0].layer.addTo(map);
+      map.addLayer(layers[0].layer);
 
       layers.forEach(function (d) {
         baseLayers[d.name] = d.layer;
@@ -298,11 +296,11 @@ define(['map/clientlayer', 'map/labelslayer',
 
       map.zoomControl.setPosition('topright');
 
-      var clientLayer = new ClientLayer({ minZoom: config.clientZoom });
+      var clientLayer = new ClientLayer('', { minZoom: config.clientZoom });
       clientLayer.addTo(map);
       clientLayer.setZIndex(5);
 
-      var labelsLayer = new LabelsLayer({ minZoom: config.labelZoom });
+      var labelsLayer = new LabelsLayer('', { minZoom: config.labelZoom });
       labelsLayer.addTo(map);
       labelsLayer.setZIndex(6);
 
@@ -345,10 +343,6 @@ define(['map/clientlayer', 'map/labelslayer',
         map.fitBounds(bounds, { paddingTopLeft: [sidebar(), 0], maxZoom: config.nodeZoom });
       }
 
-      function resetZoom() {
-        setView(config.fixedCenter);
-      }
-
       function goto(m) {
         var bounds;
 
@@ -383,7 +377,7 @@ define(['map/clientlayer', 'map/labelslayer',
           } else if (savedView) {
             map.setView(savedView.center, savedView.zoom);
           } else {
-            resetZoom();
+            setView(config.fixedCenter);
           }
         }
       }

lib/map/clientlayer.js

@@ -2,7 +2,7 @@ define(['leaflet', 'helper'],
   function (L, helper) {
     'use strict';
 
-    return L.TileLayer.Canvas.extend({
+    return L.TileLayer.extend({
       setData: function (d) {
         this.data = d;
 

lib/map/labelslayer.js

@@ -70,9 +70,9 @@ define(['leaflet', 'rbush', 'helper'],
       return { minX: x, minY: y, maxX: x + width, maxY: y + height };
     }
 
-    return L.TileLayer.Canvas.extend({
+    return L.TileLayer.extend({
       onAdd: function (map) {
-        L.TileLayer.Canvas.prototype.onAdd.call(this, map);
+        L.TileLayer.prototype.onAdd.call(this, map);
         if (this.data) {
           this.prepareLabels();
         }

package.json

@@ -47,8 +47,7 @@
     "d3-force": "^1.0.6",
     "d3-selection": "^1.0.5",
     "d3-zoom": "^1.1.3",
-    "leaflet": "https://github.com/davojta/Leaflet.git#stable_0_7_7_1_release",
+    "leaflet": "^1.0.3",
-    "leaflet-label": "^0.2.1-0",
     "moment": "^2.17.1",
     "node-polyglot": "^2.2.2",
     "promise-polyfill": "^6.0.2",

scss/modules/_leaflet.scss

@@ -1,12 +1,10 @@
-.leaflet-map-pane,
+.leaflet-pane,
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow,
-.leaflet-tile-pane,
 .leaflet-tile-container,
-.leaflet-overlay-pane,
+.leaflet-pane > svg,
-.leaflet-shadow-pane,
+.leaflet-pane > canvas,
-.leaflet-marker-pane,
 .leaflet-zoom-box,
 .leaflet-image-layer,
 .leaflet-layer {
@@ -16,25 +14,55 @@
 }
 
 .leaflet-container {
-  background: $color-map-background;
+  background: $color-gray-light;
-  cursor: grab;
   outline: 0;
   overflow: hidden;
-  touch-action: none;
-
-  a {
-    color: $color-primary;
-  }
-
-  img {
-    max-width: none;
-  }
 
   .leaflet-control-attribution {
     background: transparentize($color-white, .3);
     margin: 0;
   }
 
+  .leaflet-control-attribution,
+  .leaflet-control-scale {
+    font-size: 11px;
+    padding: 5px;
+  }
+
+  .leaflet-marker-pane,
+  .leaflet-shadow-pane,
+  .leaflet-tile-pane {
+    img {
+      max-width: none;
+    }
+  }
+
+  img {
+    &.leaflet-image-layer {
+      max-width: none;
+    }
+  }
+
+  .leaflet-overlay-pane {
+    svg {
+      max-width: none;
+    }
+  }
+
+  &.leaflet-touch-zoom {
+    -ms-touch-action: pan-x pan-y; // sass-lint:disable-line no-vendor-prefixes
+    touch-action: pan-x pan-y;
+  }
+
+  &.leaflet-touch-drag {
+    -ms-touch-action: pinch-zoom; // sass-lint:disable-line no-vendor-prefixes
+
+    &.leaflet-touch-drag {
+      -ms-touch-action: none; // sass-lint:disable-line no-vendor-prefixes
+      touch-action: none;
+    }
+  }
+
   .leaflet-control-layers-toggle {
     background: $color-white;
     border-radius: 50%;
@@ -44,7 +72,7 @@
     height: 1.8em;
     line-height: 1.95;
     margin-right: 16px;
-    opacity: .7;
+    opacity: .9;
     text-align: center;
     transition: background-color .5s, color .5s;
     width: 1.8em;
@@ -61,6 +89,44 @@
       text-rendering: auto;
     }
   }
+
+  .leaflet-control-layers-expanded {
+    padding: 0;
+
+    .leaflet-control-layers-list {
+      display: block;
+      position: relative;
+    }
+
+    .leaflet-control-layers-toggle {
+      display: none;
+    }
+  }
+}
+
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+  user-select: none;
+}
+
+///* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari {
+  .leaflet-tile {
+    image-rendering: -webkit-optimize-contrast; // sass-lint:disable-line no-vendor-prefixes
+  }
+
+  ///* hack that prevents hw layers "stretching" when loading new tiles */
+  .leaflet-tile-container {
+    -webkit-transform-origin: 0 0; // sass-lint:disable-line no-vendor-prefixes
+    height: 1600px;
+    width: 1600px;
+  }
+}
+
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+  display: block;
 }
 
 .leaflet-tile {
@@ -73,28 +139,54 @@
 }
 
 .leaflet-zoom-box {
+  -moz-box-sizing: border-box; // sass-lint:disable-line no-vendor-prefixes
+  box-sizing: border-box;
   height: 0;
   width: 0;
+  z-index: 800;
+}
+
+///* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane {
+  z-index: 400;
+
+  svg {
+    -moz-user-select: none; // sass-lint:disable-line no-vendor-prefixes
+  }
+}
+
+.leaflet-pane {
+  z-index: 400;
 }
 
 .leaflet-tile-pane {
-  z-index: 2;
+  z-index: 200;
-}
-
-.leaflet-objects-pane {
-  z-index: 3;
-}
-
-.leaflet-overlay-pane {
-  z-index: 4;
 }
 
 .leaflet-shadow-pane {
-  z-index: 5;
+  z-index: 500;
 }
 
 .leaflet-marker-pane {
-  z-index: 6;
+  z-index: 600;
+}
+
+.leaflet-tooltip-pane {
+  z-index: 650;
+}
+
+.leaflet-popup-pane {
+  z-index: 700;
+}
+
+.leaflet-map-pane {
+  canvas {
+    z-index: 100;
+  }
+
+  svg {
+    z-index: 200;
+  }
 }
 
 .leaflet-vml-shape {
@@ -102,14 +194,17 @@
   width: 1px;
 }
 
+.lvml {
+  display: inline-block;
+  position: absolute;
+}
+
 .leaflet-control {
   clear: both;
-  cursor: auto;
   float: left;
-  font-size: $font-size-map-control;
   pointer-events: auto;
   position: relative;
-  z-index: 7;
+  z-index: 800;
 }
 
 .leaflet-top,
@@ -119,14 +214,6 @@
   z-index: 1000;
 }
 
-.leaflet-top {
-  top: 0;
-
-  .leaflet-control {
-    margin-top: 10px;
-  }
-}
-
 .leaflet-right {
   right: 0;
 
@@ -135,8 +222,17 @@
   }
 }
 
+.leaflet-top {
+  top: 0;
+
+  .leaflet-control {
+    margin-top: 10px;
+  }
+}
+
 .leaflet-bottom {
   bottom: 0;
+
 }
 
 .leaflet-left {
@@ -149,66 +245,98 @@
 
 .leaflet-fade-anim {
   .leaflet-tile {
+    will-change: opacity;
+  }
+
+  .leaflet-popup {
     opacity: 0;
     transition: opacity .2s linear;
   }
 
-  .leaflet-tile-loaded {
+  .leaflet-map-pane {
-    opacity: 1;
+    .leaflet-popup {
+      opacity: 1;
+    }
   }
 }
 
-%no-transition {
+.leaflet-zoom-animated {
-  transition: none;
+  transform-origin: 0 0;
 }
 
 .leaflet-zoom-anim {
-  .leaflet-tile {
-    @extend %no-transition;
-  }
-
   .leaflet-zoom-animated {
     transition: transform .25s cubic-bezier(0, 0, .25, 1);
+    will-change: transform;
   }
 
   .leaflet-zoom-hide {
     visibility: hidden;
   }
+
 }
 
+.leaflet-zoom-anim,
 .leaflet-pan-anim {
   .leaflet-tile {
-    @extend %no-transition;
+    transition: none;
   }
 }
 
-.leaflet-touching {
+.leaflet-interactive {
-  .leaflet-zoom-animated {
-    @extend %no-transition;
-  }
-}
-
-.leaflet-clickable {
   cursor: pointer;
 }
 
-.leaflet-dragging {
+.leaflet-grab {
-  .leaflet-container,
+  cursor: -webkit-grab; // sass-lint:disable-line no-vendor-prefixes
-  .leaflet-clickable {
+  cursor: -moz-grab; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties
-    cursor: move;
+}
+
+.leaflet-crosshair {
+  &,
+  &.leaflet-interactive {
+    cursor: crosshair;
   }
 }
 
-.leaflet-touch {
+.leaflet-popup-pane,
-  .leaflet-control-layers,
+.leaflet-control {
-  .leaflet-bar {
+  cursor: auto;
-    background-clip: padding-box;
+}
-    border: 2px solid transparentize($color-black, .8);
-  }
 
-  .leaflet-control-layers-toggle {
+.leaflet-dragging {
-    height: 44px;
+  .leaflet-marker-draggable,
-    width: 44px;
+  .leaflet-grab {
+    &,
+    &.leaflet-interactive {
+      cursor: move;
+      cursor: -webkit-grabbing; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties
+      cursor: -moz-grabbing; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties
+    }
+  }
+}
+
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-tile-container {
+  pointer-events: none;
+}
+
+.leaflet-pane > svg {
+  path {
+    pointer-events: none;
+
+    &.leaflet-interactive {
+      pointer-events: auto;
+    }
+  }
+}
+
+.leaflet-marker-icon,
+.leaflet-image-layer {
+  &.leaflet-interactive {
+    pointer-events: auto;
   }
 }
 
@@ -222,36 +350,21 @@
     opacity: .8;
   }
 
+  .leaflet-control-layers-list {
+    display: none;
+  }
+
   label {
     display: block;
   }
-
-  .leaflet-control-layers-list {
-    display: none;
-  }
 }
 
-.leaflet-control-layers-expanded {
+.leaflet-control-layers-scrollbar {
-  background: $color-white;
+  overflow-y: scroll;
-  color: $color-gray-dark;
+  padding-right: 5px;
-
-  .leaflet-control-layers-toggle {
-    display: none;
-  }
-
-  .leaflet-control-layers-list {
-    background: transparentize($color-white, .1);
-    color: $color-gray-dark;
-    display: block;
-    padding: 2px 10px;
-    position: relative;
-
-    label {
-      cursor: pointer;
-    }
-  }
 }
 
+
 .leaflet-control-layers-selector {
   display: none;
 
@@ -286,37 +399,102 @@
   }
 }
 
-.leaflet-control-layers-separator {
+.leaflet-tooltip {
-  border-top: 1px solid $color-gray-light;
+  background-color: $color-white;
-  height: 0;
+  border: 1px solid $color-primary;
-  margin: 5px -10px 5px -6px;
+  border-radius: 2px;
+  color: $color-primary;
+  font-size: 12px;
+  line-height: 1.2;
+  padding: 6px;
+  pointer-events: none;
+  position: absolute;
+  user-select: none;
+  white-space: nowrap;
+
+  &.leaflet-clickable {
+    cursor: pointer;
+    pointer-events: auto;
+  }
 }
 
-.leaflet-control-attribution,
+.leaflet-tooltip-top,
-.leaflet-control-scale-line {
+.leaflet-tooltip-bottom,
-  color: $color-gray-dark;
+.leaflet-tooltip-left,
-  padding: 2px 5px 4px;
+.leaflet-tooltip-right {
-}
+  &::before {
-
+    background: transparent;
-.leaflet-label {
+    border: 6px solid transparent;
-  &.leaflet-label-right {
+    content: '';
-    background-color: $color-white;
+    pointer-events: none;
-    border: 1px solid $color-primary;
-    border-radius: 0;
-    display: block;
-    font-size: $font-size-map-control;
-    font-weight: normal;
-    line-height: 1.5;
-    opacity: .8;
-    padding: 1px 6px;
     position: absolute;
-    user-select: none;
+  }
-    white-space: nowrap;
+}
-    z-index: 6;
 
-    &::before {
+.leaflet-tooltip-bottom {
-      display: none;
+  margin-top: 6px;
-    }
+
+  &::before {
+    border-bottom-color: $color-white;
+    margin-left: -6px;
+    margin-top: -12px;
+    top: 0;
+  }
+}
+
+.leaflet-tooltip-top {
+  margin-top: -6px;
+
+  &::before {
+    border-top-color: $color-white;
+    bottom: 0;
+    margin-bottom: -12px;
+  }
+}
+
+.leaflet-tooltip-bottom,
+.leaflet-tooltip-top {
+  &::before {
+    left: 50%;
+    margin-left: -6px;
+  }
+}
+
+.leaflet-tooltip-left {
+  margin-left: -6px;
+
+  &::before {
+    border-left-color: $color-white;
+    margin-right: -12px;
+    right: 0;
+  }
+}
+
+.leaflet-tooltip-right {
+  margin-left: 6px;
+
+  &::before {
+    border-right-color: $color-white;
+    left: 0;
+    margin-left: -12px;
+  }
+}
+
+.leaflet-tooltip-left,
+.leaflet-tooltip-right {
+  &::before {
+    margin-top: -6px;
+    top: 50%;
+  }
+}
+
+.leaflet-control-layers-list {
+  background: transparentize($color-white, .1);
+  color: $color-gray-dark;
+  padding: 10px;
+
+  label {
+    cursor: pointer;
   }
 }
 

scss/modules/_sidebar.scss

@@ -4,7 +4,7 @@
   position: absolute;
   transition: left .5s;
   width: $sidebar-width;
-  z-index: 5;
+  z-index: 1005;
 
   &.hidden {
     left: -$sidebar-width - $button-distance;
@@ -124,7 +124,7 @@
   position: fixed;
   top: $button-distance;
   transition: left .5s, box-shadow .5s, color .5s, transform .5s;
-  z-index: 10;
+  z-index: 1010;
 
   &::after {
     content: '\f124';

scss/night.scss

@@ -28,6 +28,13 @@ html {
     }
   }
 
+  .leaflet-control-container {
+    .leaflet-control-layers-toggle {
+      background: lighten($color-white, 10);
+      color: $color-black;
+    }
+  }
+
   .leaflet-control-zoom {
     a {
       background: lighten($color-white, 10);

yarn.lock

@@ -2177,13 +2177,9 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-leaflet-label@^0.2.1-0:
+leaflet@^1.0.3:
-  version "0.2.1-0"
+  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/leaflet-label/-/leaflet-label-0.2.1-0.tgz#b91a678a4d78ac4c47cb230d3926254fd2a7e612"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.0.3.tgz#1f401b98b45c8192134c6c8d69686253805007c8"
-
-"leaflet@https://github.com/davojta/Leaflet.git#stable_0_7_7_1_release":
-  version "0.7.7"
-  resolved "https://github.com/davojta/Leaflet.git#bf3bcd089bea98d3f75bda08a79d8260f27eb3bf"
 
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"