diff --git a/lib/map.js b/lib/map.js
index 0b3c8ac..56f2803 100644
--- a/lib/map.js
+++ b/lib/map.js
@@ -1,6 +1,4 @@
-define(['map/clientlayer', 'map/labelslayer',
- 'leaflet', 'moment', 'locationmarker', 'rbush', 'helper',
- 'leaflet.label'],
+define(['map/clientlayer', 'map/labelslayer', 'leaflet', 'moment', 'locationmarker', 'rbush', 'helper'],
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 + '
' + helper.showDistance(d) + ' / ' + helper.showTq(d) + '');
+ line.bindTooltip(d.source.node.nodeinfo.hostname + ' – ' + d.target.node.nodeinfo.hostname + '
' + helper.showDistance(d) + ' / ' + helper.showTq(d) + '');
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);
}
}
}
diff --git a/lib/map/clientlayer.js b/lib/map/clientlayer.js
index c1deb08..2aa2a5c 100644
--- a/lib/map/clientlayer.js
+++ b/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;
diff --git a/lib/map/labelslayer.js b/lib/map/labelslayer.js
index 649ba86..12bea03 100644
--- a/lib/map/labelslayer.js
+++ b/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();
}
diff --git a/package.json b/package.json
index 7798b59..266242a 100644
--- a/package.json
+++ b/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-label": "^0.2.1-0",
+ "leaflet": "^1.0.3",
"moment": "^2.17.1",
"node-polyglot": "^2.2.2",
"promise-polyfill": "^6.0.2",
diff --git a/scss/modules/_leaflet.scss b/scss/modules/_leaflet.scss
index fea076e..b0ce18b 100644
--- a/scss/modules/_leaflet.scss
+++ b/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-shadow-pane,
-.leaflet-marker-pane,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
@@ -16,25 +14,55 @@
}
.leaflet-container {
- background: $color-map-background;
- cursor: grab;
+ background: $color-gray-light;
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;
-}
-
-.leaflet-objects-pane {
- z-index: 3;
-}
-
-.leaflet-overlay-pane {
- z-index: 4;
+ z-index: 200;
}
.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 {
- opacity: 1;
+ .leaflet-map-pane {
+ .leaflet-popup {
+ opacity: 1;
+ }
}
}
-%no-transition {
- transition: none;
+.leaflet-zoom-animated {
+ 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-zoom-animated {
- @extend %no-transition;
- }
-}
-
-.leaflet-clickable {
+.leaflet-interactive {
cursor: pointer;
}
-.leaflet-dragging {
- .leaflet-container,
- .leaflet-clickable {
- cursor: move;
+.leaflet-grab {
+ cursor: -webkit-grab; // sass-lint:disable-line no-vendor-prefixes
+ cursor: -moz-grab; // sass-lint:disable-line no-vendor-prefixes no-duplicate-properties
+}
+
+.leaflet-crosshair {
+ &,
+ &.leaflet-interactive {
+ cursor: crosshair;
}
}
-.leaflet-touch {
- .leaflet-control-layers,
- .leaflet-bar {
- background-clip: padding-box;
- border: 2px solid transparentize($color-black, .8);
- }
+.leaflet-popup-pane,
+.leaflet-control {
+ cursor: auto;
+}
- .leaflet-control-layers-toggle {
- height: 44px;
- width: 44px;
+.leaflet-dragging {
+ .leaflet-marker-draggable,
+ .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 {
- background: $color-white;
- color: $color-gray-dark;
-
- .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-scrollbar {
+ overflow-y: scroll;
+ padding-right: 5px;
}
+
.leaflet-control-layers-selector {
display: none;
@@ -286,37 +399,102 @@
}
}
-.leaflet-control-layers-separator {
- border-top: 1px solid $color-gray-light;
- height: 0;
- margin: 5px -10px 5px -6px;
+.leaflet-tooltip {
+ background-color: $color-white;
+ border: 1px solid $color-primary;
+ 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-control-scale-line {
- color: $color-gray-dark;
- padding: 2px 5px 4px;
-}
-
-.leaflet-label {
- &.leaflet-label-right {
- background-color: $color-white;
- 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;
+.leaflet-tooltip-top,
+.leaflet-tooltip-bottom,
+.leaflet-tooltip-left,
+.leaflet-tooltip-right {
+ &::before {
+ background: transparent;
+ border: 6px solid transparent;
+ content: '';
+ pointer-events: none;
position: absolute;
- user-select: none;
- white-space: nowrap;
- z-index: 6;
+ }
+}
- &::before {
- display: none;
- }
+.leaflet-tooltip-bottom {
+ 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;
}
}
diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss
index d19c10d..3046307 100644
--- a/scss/modules/_sidebar.scss
+++ b/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';
diff --git a/scss/night.scss b/scss/night.scss
index b03c3a7..3dbdc6b 100644
--- a/scss/night.scss
+++ b/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);
diff --git a/yarn.lock b/yarn.lock
index d851fc1..e1e72fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2177,13 +2177,9 @@ lcid@^1.0.0:
dependencies:
invert-kv "^1.0.0"
-leaflet-label@^0.2.1-0:
- version "0.2.1-0"
- resolved "https://registry.yarnpkg.com/leaflet-label/-/leaflet-label-0.2.1-0.tgz#b91a678a4d78ac4c47cb230d3926254fd2a7e612"
-
-"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"
+leaflet@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.0.3.tgz#1f401b98b45c8192134c6c8d69686253805007c8"
levn@^0.3.0, levn@~0.3.0:
version "0.3.0"