From 55e72e3f719f6d0bada34d9566591fc5d11c89b5 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Mon, 30 Jan 2023 14:12:03 +0100
Subject: [PATCH] update to maplibre
---
resources/assets/css/offline-module.css | 101 +++++++++++-------------
resources/assets/js/map.js | 36 ++++-----
2 files changed, 63 insertions(+), 74 deletions(-)
diff --git a/resources/assets/css/offline-module.css b/resources/assets/css/offline-module.css
index deae1e0..168e20b 100644
--- a/resources/assets/css/offline-module.css
+++ b/resources/assets/css/offline-module.css
@@ -15,43 +15,37 @@
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
border: 1px solid #dfdfdf;
border-left: 0;
border-right: 0;
}
-#offline-addon .auto-updates>.option {
+#offline-addon .auto-updates > .option {
margin: 10px;
height: 20px;
}
#offline-addon .auto-updates .text {
-webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
text-align: center;
padding: 10px 0;
border-left: 1px solid #dfdfdf;
}
-#offline-addon .area-downloading {
- text-align: center;
- padding: 10px 0;
-}
-
#offline-addon .area-selection {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
text-align: center;
font-weight: bold;
font-size: 12px;
- padding: 10px 0;
}
#offline-addon .area-selection .download-information {
@@ -61,8 +55,8 @@
#offline-addon .area-selection .text {
margin: 0px 10px;
-webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
}
#offline-addon .area-selection #start-download {
@@ -77,24 +71,24 @@
font-size: 11px;
}
-#offline-addon>#heading {
+#offline-addon > #heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
background-color: #ff8000;
}
-#offline-addon>#heading>.exit {
+#offline-addon > #heading > .exit {
padding: 7px;
color: white;
}
-#offline-addon>#heading>.logo {
+#offline-addon > #heading > .logo {
-ms-flex-item-align: center;
- align-self: center;
+ align-self: center;
padding: 7px;
}
@@ -112,28 +106,23 @@
color: #337ab7;
}
-#offline-addon .add-area .downloaded-areas, #offline-addon .available-areas {
+#offline-addon .add-area .downloaded-areas,
+#offline-addon .available-areas {
list-style-type: none;
margin-bottom: 0;
}
-#offline-addon .loading-areas, #offline-addon .no-areas {
- text-align: center;
- padding: 10px 0;
-}
-
#offline-addon .download-progress {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- margin: 10px;
+ margin: 0 10px;
}
-#offline-addon .download-progress>.progress {
+#offline-addon .download-progress > .progress {
-webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- margin: 0;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
}
#offline-addon .download-progress .abort {
@@ -141,12 +130,13 @@
color: red;
}
-#offline-addon .download-progress .downloaded-areas>div.placeholder, #offline-addon .available-areas>div.placeholder {
+#offline-addon .download-progress .downloaded-areas > div.placeholder,
+#offline-addon .available-areas > div.placeholder {
text-align: center;
padding-bottom: 5px;
}
-#offline-addon .available-areas>div {
+#offline-addon .available-areas > div {
display: none;
}
@@ -155,8 +145,8 @@
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
text-align: center;
font-weight: bold;
font-size: 12px;
@@ -168,52 +158,52 @@
display: none;
}
-#offline-addon .area>.texts {
+#offline-addon .area > .texts {
-webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
}
-#offline-addon .area>.texts>.info {
+#offline-addon .area > .texts > .info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: #777;
}
-#offline-addon .area>.texts>.seperator {
+#offline-addon .area > .texts > .seperator {
font-weight: bold;
padding: 0 3px;
}
-#offline-addon .area>.name {
+#offline-addon .area > .name {
font-weight: bold;
-webkit-box-flex: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
}
-#offline-addon .area>.inspect {
+#offline-addon .area > .inspect {
padding: 0 20px;
/* color: green; */
font-size: 20px;
}
-#offline-addon .area>.inspect>.glyphicon {
+#offline-addon .area > .inspect > .glyphicon {
display: inline-block;
}
-#offline-addon .area>.rename {
+#offline-addon .area > .rename {
padding: 0 20px;
/* color: green; */
font-size: 20px;
}
-#offline-addon .area>.rename>.glyphicon {
+#offline-addon .area > .rename > .glyphicon {
display: inline-block;
}
-#offline-addon .area>.remove {
+#offline-addon .area > .remove {
cursor: pointer;
padding: 5px;
padding: 0 20px;
@@ -221,16 +211,16 @@
font-size: 20px;
}
-#offline-addon .area>.remove>.glyphicon {
+#offline-addon .area > .remove > .glyphicon {
display: inline-block;
}
-#offline-addon .area>.remove>span {
+#offline-addon .area > .remove > span {
font-size: 17px;
color: #777;
}
-body>#selector {
+body > #selector {
width: 100%;
height: 100%;
position: absolute;
@@ -239,7 +229,7 @@ body>#selector {
display: none;
}
-body>#selector-accept {
+body > #selector-accept {
position: absolute;
bottom: 10px;
right: 10px;
@@ -252,6 +242,7 @@ body>#selector-accept {
display: none;
}
-body>#selector-accept>span {
+body > #selector-accept > span {
font-size: 27px;
-}
\ No newline at end of file
+}
+
diff --git a/resources/assets/js/map.js b/resources/assets/js/map.js
index b702e4e..3679baf 100644
--- a/resources/assets/js/map.js
+++ b/resources/assets/js/map.js
@@ -1,4 +1,4 @@
-function Map(type) { }
+function Map(type) {}
function InteractiveMap(
long = 9.841943417968748,
@@ -30,24 +30,22 @@ function InteractiveMap(
InteractiveMap.prototype = Object.create(Map.prototype);
InteractiveMap.prototype.constructor = InteractiveMap;
-InteractiveMap.prototype.initMap = function () {
- mapboxgl.setRTLTextPlugin(
- "https://tileserver.metager.de/mapbox-gl-rtl-text.js"
+InteractiveMap.prototype.initMap = function() {
+ maplibregl.setRTLTextPlugin(
+ "https://tileserver.metager.de/maplibre-gl-rtl-text.js"
);
- var map = new mapboxgl.Map({
+ var map = new maplibregl.Map({
container: "map",
style:
"https://tileserver.metager.de/styles/osm-bright/style.json?optimize=true",
hash: false,
center: this.initPos,
zoom: this.initZoom,
- scrollZoom: false
+ scrollZoom: false,
});
-
-
- map.addControl(new mapboxgl.NavigationControl(), "bottom-left");
- map.addControl(new mapboxgl.ScaleControl(), "bottom-right");
+ map.addControl(new maplibregl.NavigationControl(), "bottom-left");
+ map.addControl(new maplibregl.ScaleControl(), "bottom-right");
/**
* This is our custom scrollwheel function
@@ -56,18 +54,18 @@ InteractiveMap.prototype.initMap = function () {
var caller = this;
var timeout = undefined;
var zoomChange = 0;
- map.on("zoomend", function (event) {
+ map.on("zoomend", function(event) {
if (typeof event.scrollZoom == "boolean" && event.scrollZoom) {
if (typeof timeout != "undefined") {
clearTimeout(timeout);
timeout = undefined;
}
- timeout = setTimeout(function () {
+ timeout = setTimeout(function() {
zoomChange = 0;
}, 100);
}
});
- $("#map").bind("wheel", function (event) {
+ $("#map").bind("wheel", function(event) {
console.log("wheel");
var delta = event.originalEvent.deltaY;
if (delta < 0) {
@@ -85,8 +83,8 @@ InteractiveMap.prototype.initMap = function () {
zoom: newZoom,
around: map.unproject([
event.originalEvent.clientX,
- event.originalEvent.clientY
- ])
+ event.originalEvent.clientY,
+ ]),
},
{ scrollZoom: true }
);
@@ -94,11 +92,11 @@ InteractiveMap.prototype.initMap = function () {
return map;
};
-InteractiveMap.prototype.scrollZoomHandler = function (event) {
+InteractiveMap.prototype.scrollZoomHandler = function(event) {
console.log(event);
};
-InteractiveMap.prototype.switchModule = function (name, args) {
+InteractiveMap.prototype.switchModule = function(name, args) {
if (this.module !== null) {
// Every Module must implement this method for deinitialization
this.module.exit();
@@ -128,7 +126,7 @@ InteractiveMap.prototype.switchModule = function (name, args) {
}
};
-InteractiveMap.prototype.removeDownloadedAreas = function () {
+InteractiveMap.prototype.removeDownloadedAreas = function() {
/**
* Removes areas that might have been downloaded by our old app.
* This Feature will be reworked and we want to clean up before the new app comes
@@ -140,7 +138,7 @@ InteractiveMap.prototype.removeDownloadedAreas = function () {
var downloadedAreas = android.getDownloadedAreas(); // JSON.parse(android.getDownloadedAreas());
downloadedAreas = JSON.parse(downloadedAreas);
if (Object.keys(downloadedAreas).length > 0) {
- $.each(downloadedAreas, function (index, value) {
+ $.each(downloadedAreas, function(index, value) {
android.removeArea(index);
});
alert(
--
GitLab