Skip to content
Snippets Groups Projects
Unverified Commit 2a9a1bca authored by Xaver Maierhofer's avatar Xaver Maierhofer
Browse files

[TASK] Update to leaflet v1

parent 8b4d2ebc
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
lib/map.js
+ 7
− 13
View file @ 2a9a1bca
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) { function (ClientLayer, LabelsLayer, L, moment, LocationMarker, rbush, helper) {
'use strict'; 'use strict';
...@@ -78,7 +76,7 @@ define(['map/clientlayer', 'map/labelslayer', ...@@ -78,7 +76,7 @@ define(['map/clientlayer', 'map/labelslayer',
}; };
m.on('click', router.node(d)); m.on('click', router.node(d));
m.bindLabel(d.nodeinfo.hostname); m.bindTooltip(d.nodeinfo.hostname);
dict[d.nodeinfo.node_id] = m; dict[d.nodeinfo.node_id] = m;
...@@ -105,7 +103,7 @@ define(['map/clientlayer', 'map/labelslayer', ...@@ -105,7 +103,7 @@ define(['map/clientlayer', 'map/labelslayer',
line.setStyle(opts); 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)); line.on('click', router.link(d));
dict[d.id] = line; dict[d.id] = line;
...@@ -279,7 +277,7 @@ define(['map/clientlayer', 'map/labelslayer', ...@@ -279,7 +277,7 @@ define(['map/clientlayer', 'map/labelslayer',
}; };
}); });
layers[0].layer.addTo(map); map.addLayer(layers[0].layer);
layers.forEach(function (d) { layers.forEach(function (d) {
baseLayers[d.name] = d.layer; baseLayers[d.name] = d.layer;
...@@ -298,11 +296,11 @@ define(['map/clientlayer', 'map/labelslayer', ...@@ -298,11 +296,11 @@ define(['map/clientlayer', 'map/labelslayer',
map.zoomControl.setPosition('topright'); map.zoomControl.setPosition('topright');
var clientLayer = new ClientLayer({ minZoom: config.clientZoom }); var clientLayer = new ClientLayer('', { minZoom: config.clientZoom });
clientLayer.addTo(map); clientLayer.addTo(map);
clientLayer.setZIndex(5); clientLayer.setZIndex(5);
var labelsLayer = new LabelsLayer({ minZoom: config.labelZoom }); var labelsLayer = new LabelsLayer('', { minZoom: config.labelZoom });
labelsLayer.addTo(map); labelsLayer.addTo(map);
labelsLayer.setZIndex(6); labelsLayer.setZIndex(6);
...@@ -345,10 +343,6 @@ define(['map/clientlayer', 'map/labelslayer', ...@@ -345,10 +343,6 @@ define(['map/clientlayer', 'map/labelslayer',
map.fitBounds(bounds, { paddingTopLeft: [sidebar(), 0], maxZoom: config.nodeZoom }); map.fitBounds(bounds, { paddingTopLeft: [sidebar(), 0], maxZoom: config.nodeZoom });
} }
function resetZoom() {
setView(config.fixedCenter);
}
function goto(m) { function goto(m) {
var bounds; var bounds;
...@@ -383,7 +377,7 @@ define(['map/clientlayer', 'map/labelslayer', ...@@ -383,7 +377,7 @@ define(['map/clientlayer', 'map/labelslayer',
} else if (savedView) { } else if (savedView) {
map.setView(savedView.center, savedView.zoom); map.setView(savedView.center, savedView.zoom);
} else { } else {
resetZoom(); setView(config.fixedCenter);
} }
} }
} }
......
lib/map/clientlayer.js
+ 1
− 1
View file @ 2a9a1bca
...@@ -2,7 +2,7 @@ define(['leaflet', 'helper'], ...@@ -2,7 +2,7 @@ define(['leaflet', 'helper'],
function (L, helper) { function (L, helper) {
'use strict'; 'use strict';
return L.TileLayer.Canvas.extend({ return L.TileLayer.extend({
setData: function (d) { setData: function (d) {
this.data = d; this.data = d;
......
lib/map/labelslayer.js
+ 2
− 2
View file @ 2a9a1bca
...@@ -70,9 +70,9 @@ define(['leaflet', 'rbush', 'helper'], ...@@ -70,9 +70,9 @@ define(['leaflet', 'rbush', 'helper'],
return { minX: x, minY: y, maxX: x + width, maxY: y + height }; return { minX: x, minY: y, maxX: x + width, maxY: y + height };
} }
return L.TileLayer.Canvas.extend({ return L.TileLayer.extend({
onAdd: function (map) { onAdd: function (map) {
L.TileLayer.Canvas.prototype.onAdd.call(this, map); L.TileLayer.prototype.onAdd.call(this, map);
if (this.data) { if (this.data) {
this.prepareLabels(); this.prepareLabels();
} }
......
scss/modules/_leaflet.scss
+ 283
− 105
View file @ 2a9a1bca
.leaflet-map-pane, .leaflet-pane,
.leaflet-tile, .leaflet-tile,
.leaflet-marker-icon, .leaflet-marker-icon,
.leaflet-marker-shadow, .leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-tile-container, .leaflet-tile-container,
.leaflet-overlay-pane, .leaflet-pane > svg,
.leaflet-shadow-pane, .leaflet-pane > canvas,
.leaflet-marker-pane,
.leaflet-zoom-box, .leaflet-zoom-box,
.leaflet-image-layer, .leaflet-image-layer,
.leaflet-layer { .leaflet-layer {
...@@ -16,23 +14,53 @@ ...@@ -16,23 +14,53 @@
} }
.leaflet-container { .leaflet-container {
background: $color-map-background; background: $color-gray-light;
cursor: grab;
outline: 0; outline: 0;
overflow: hidden; overflow: hidden;
touch-action: none;
a { .leaflet-control-attribution {
color: $color-primary; 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 { img {
max-width: none; max-width: none;
} }
}
.leaflet-control-attribution { img {
background: transparentize($color-white, .3); &.leaflet-image-layer {
margin: 0; 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 { .leaflet-control-layers-toggle {
...@@ -44,7 +72,7 @@ ...@@ -44,7 +72,7 @@
height: 1.8em; height: 1.8em;
line-height: 1.95; line-height: 1.95;
margin-right: 16px; margin-right: 16px;
opacity: .7; opacity: .9;
text-align: center; text-align: center;
transition: background-color .5s, color .5s; transition: background-color .5s, color .5s;
width: 1.8em; width: 1.8em;
...@@ -61,6 +89,44 @@ ...@@ -61,6 +89,44 @@
text-rendering: auto; 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 { .leaflet-tile {
...@@ -73,28 +139,54 @@ ...@@ -73,28 +139,54 @@
} }
.leaflet-zoom-box { .leaflet-zoom-box {
-moz-box-sizing: border-box; // sass-lint:disable-line no-vendor-prefixes
box-sizing: border-box;
height: 0; height: 0;
width: 0; width: 0;
z-index: 800;
} }
.leaflet-tile-pane { ///* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
z-index: 2; .leaflet-overlay-pane {
z-index: 400;
svg {
-moz-user-select: none; // sass-lint:disable-line no-vendor-prefixes
}
} }
.leaflet-objects-pane { .leaflet-pane {
z-index: 3; z-index: 400;
} }
.leaflet-overlay-pane { .leaflet-tile-pane {
z-index: 4; z-index: 200;
} }
.leaflet-shadow-pane { .leaflet-shadow-pane {
z-index: 5; z-index: 500;
} }
.leaflet-marker-pane { .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 { .leaflet-vml-shape {
...@@ -102,14 +194,17 @@ ...@@ -102,14 +194,17 @@
width: 1px; width: 1px;
} }
.lvml {
display: inline-block;
position: absolute;
}
.leaflet-control { .leaflet-control {
clear: both; clear: both;
cursor: auto;
float: left; float: left;
font-size: $font-size-map-control;
pointer-events: auto; pointer-events: auto;
position: relative; position: relative;
z-index: 7; z-index: 800;
} }
.leaflet-top, .leaflet-top,
...@@ -119,24 +214,25 @@ ...@@ -119,24 +214,25 @@
z-index: 1000; z-index: 1000;
} }
.leaflet-top { .leaflet-right {
top: 0; right: 0;
.leaflet-control { .leaflet-control {
margin-top: 10px; float: right;
} }
} }
.leaflet-right { .leaflet-top {
right: 0; top: 0;
.leaflet-control { .leaflet-control {
float: right; margin-top: 10px;
} }
} }
.leaflet-bottom { .leaflet-bottom {
bottom: 0; bottom: 0;
} }
.leaflet-left { .leaflet-left {
...@@ -149,66 +245,98 @@ ...@@ -149,66 +245,98 @@
.leaflet-fade-anim { .leaflet-fade-anim {
.leaflet-tile { .leaflet-tile {
will-change: opacity;
}
.leaflet-popup {
opacity: 0; opacity: 0;
transition: opacity .2s linear; transition: opacity .2s linear;
} }
.leaflet-tile-loaded { .leaflet-map-pane {
.leaflet-popup {
opacity: 1; opacity: 1;
} }
} }
%no-transition {
transition: none;
} }
.leaflet-zoom-anim { .leaflet-zoom-animated {
.leaflet-tile { transform-origin: 0 0;
@extend %no-transition;
} }
.leaflet-zoom-anim {
.leaflet-zoom-animated { .leaflet-zoom-animated {
transition: transform .25s cubic-bezier(0, 0, .25, 1); transition: transform .25s cubic-bezier(0, 0, .25, 1);
will-change: transform;
} }
.leaflet-zoom-hide { .leaflet-zoom-hide {
visibility: hidden; visibility: hidden;
} }
} }
.leaflet-zoom-anim,
.leaflet-pan-anim { .leaflet-pan-anim {
.leaflet-tile { .leaflet-tile {
@extend %no-transition; transition: none;
} }
} }
.leaflet-touching { .leaflet-interactive {
.leaflet-zoom-animated { cursor: pointer;
@extend %no-transition; }
.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-clickable { .leaflet-popup-pane,
cursor: pointer; .leaflet-control {
cursor: auto;
} }
.leaflet-dragging { .leaflet-dragging {
.leaflet-container, .leaflet-marker-draggable,
.leaflet-clickable { .leaflet-grab {
&,
&.leaflet-interactive {
cursor: move; 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-touch { .leaflet-marker-icon,
.leaflet-control-layers, .leaflet-marker-shadow,
.leaflet-bar { .leaflet-image-layer,
background-clip: padding-box; .leaflet-tile-container {
border: 2px solid transparentize($color-black, .8); pointer-events: none;
} }
.leaflet-control-layers-toggle { .leaflet-pane > svg {
height: 44px; path {
width: 44px; pointer-events: none;
&.leaflet-interactive {
pointer-events: auto;
}
}
}
.leaflet-marker-icon,
.leaflet-image-layer {
&.leaflet-interactive {
pointer-events: auto;
} }
} }
...@@ -222,36 +350,21 @@ ...@@ -222,36 +350,21 @@
opacity: .8; opacity: .8;
} }
label {
display: block;
}
.leaflet-control-layers-list { .leaflet-control-layers-list {
display: none; 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 { label {
cursor: pointer; display: block;
} }
} }
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
padding-right: 5px;
} }
.leaflet-control-layers-selector { .leaflet-control-layers-selector {
display: none; display: none;
...@@ -286,37 +399,102 @@ ...@@ -286,37 +399,102 @@
} }
} }
.leaflet-control-layers-separator { .leaflet-tooltip {
border-top: 1px solid $color-gray-light;
height: 0;
margin: 5px -10px 5px -6px;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
color: $color-gray-dark;
padding: 2px 5px 4px;
}
.leaflet-label {
&.leaflet-label-right {
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-primary; border: 1px solid $color-primary;
border-radius: 0; border-radius: 2px;
display: block; color: $color-primary;
font-size: $font-size-map-control; font-size: 12px;
font-weight: normal; line-height: 1.2;
line-height: 1.5; padding: 6px;
opacity: .8; pointer-events: none;
padding: 1px 6px;
position: absolute; position: absolute;
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
z-index: 6;
&.leaflet-clickable {
cursor: pointer;
pointer-events: auto;
}
}
.leaflet-tooltip-top,
.leaflet-tooltip-bottom,
.leaflet-tooltip-left,
.leaflet-tooltip-right {
&::before { &::before {
display: none; background: transparent;
border: 6px solid transparent;
content: '';
pointer-events: none;
position: absolute;
}
} }
.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;
} }
} }
......
scss/modules/_sidebar.scss
+ 2
− 2
View file @ 2a9a1bca
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
position: absolute; position: absolute;
transition: left .5s; transition: left .5s;
width: $sidebar-width; width: $sidebar-width;
z-index: 5; z-index: 1005;
&.hidden { &.hidden {
left: -$sidebar-width - $button-distance; left: -$sidebar-width - $button-distance;
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
position: fixed; position: fixed;
top: $button-distance; top: $button-distance;
transition: left .5s, box-shadow .5s, color .5s, transform .5s; transition: left .5s, box-shadow .5s, color .5s, transform .5s;
z-index: 10; z-index: 1010;
&::after { &::after {
content: '\f124'; content: '\f124';
......
scss/night.scss
+ 7
− 0
View file @ 2a9a1bca
...@@ -28,6 +28,13 @@ html { ...@@ -28,6 +28,13 @@ html {
} }
} }
.leaflet-control-container {
.leaflet-control-layers-toggle {
background: lighten($color-white, 10);
color: $color-black;
}
}
.leaflet-control-zoom { .leaflet-control-zoom {
a { a {
background: lighten($color-white, 10); background: lighten($color-white, 10);
......
yarn.lock
+ 3
− 7
View file @ 2a9a1bca
...@@ -2177,13 +2177,9 @@ lcid@^1.0.0: ...@@ -2177,13 +2177,9 @@ lcid@^1.0.0:
dependencies: dependencies:
invert-kv "^1.0.0" 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: levn@^0.3.0, levn@~0.3.0:
version "0.3.0" version "0.3.0"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutz