[TASK] Update to leaflet v1

This commit is contained in:
Xaver Maierhofer 2016-12-28 04:21:55 +01:00
parent 8b4d2ebc7d
commit 2a9a1bca5b
No known key found for this signature in database
GPG Key ID: 7FDCE23FD2EC9FE8
8 changed files with 319 additions and 145 deletions

View File

@ -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 + '<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);
}
}
}

View File

@ -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;

View File

@ -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();
}

View File

@ -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",

View File

@ -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;
}
}

View File

@ -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';

View File

@ -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);

View File

@ -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"