diff --git a/src/css/alt-menu.css b/src/css/alt-menu.css
index aa39efc3..22b14ebb 100644
--- a/src/css/alt-menu.css
+++ b/src/css/alt-menu.css
@@ -122,3 +122,11 @@
#gppLogo {
margin-top: 23px;
}
+
+/* mode paysage et écrans larges */
+@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+ #altMenuContainer {
+ width: calc(100vw - 75px - env(safe-area-inset-left));
+ left: calc(75px + env(safe-area-inset-left))
+ }
+}
diff --git a/src/css/index.css b/src/css/index.css
index 79203239..ccbeeb07 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -20,6 +20,14 @@
display: none !important;
}
+/* to make safe are insets in JS */
+:root {
+ --sat: env(safe-area-inset-top);
+ --sar: env(safe-area-inset-right);
+ --sab: env(safe-area-inset-bottom);
+ --sal: env(safe-area-inset-left);
+}
+
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
index ae793a44..faf4c01a 100644
--- a/src/css/map-buttons.css
+++ b/src/css/map-buttons.css
@@ -226,4 +226,30 @@
width: calc(100vw - 75px - env(safe-area-inset-left));
right: 0;
}
+
+ #interactivityBtn {
+ left: calc(90px + env(safe-area-inset-left));
+ }
+
+ #filterPoiBtn {
+ top: calc(10px + env(safe-area-inset-top));
+ }
+
+ #routeDrawEdit {
+ flex-direction: column;
+ bottom: calc(93px + env(safe-area-inset-bottom));
+ width: unset;
+ height: calc(100vh - 84px - 30px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
+ left: calc(100vh + env(safe-area-inset-left) + 57px);
+ transform: unset;
+ }
+
+ #routeDrawEdit > .button {
+ margin-bottom: 12px;
+ }
+
+ #routeDrawEdit > .button > span {
+ position: relative;
+ bottom: -40px;
+ }
}
diff --git a/src/css/media-queries.css b/src/css/media-queries.css
index 0be03551..49126e53 100644
--- a/src/css/media-queries.css
+++ b/src/css/media-queries.css
@@ -1,9 +1,32 @@
/* mode paysage et écrans larges */
@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
#tabContainer {
- width: 50%;
- height: fit-content;
+ width: calc(100vh + env(safe-area-inset-left) + 42px);
+ height: 100vh;
top: 100%;
- left: calc(75px + env(safe-area-inset-left));
+ left: 0;
+ overflow-y: scroll;
+ border-top-right-radius: 0px;
+ border-top-left-radius: 0px;
+ z-index: 300;
+ padding: 0 15px 15px calc(env(safe-area-inset-left) + 42px);
+ transition: top 0.3s;
+}
+
+ #infoWindow,
+ #legendWindow,
+ #informationsWindow,
+ #isochroneWindow,
+ #directionsWindow,
+ #directionsResultsWindow,
+ #mypositionWindow,
+ #layerManagerWindow,
+ #poiWindow,
+ #routeDrawWindow {
+ margin-top: 20px;
+ }
+
+ body {
+ overflow-y: hidden;
}
}
diff --git a/src/js/controls.js b/src/js/controls.js
index 065045eb..2071fb07 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -82,15 +82,6 @@ const addControls = () => {
});
}
-/**
- * ???
- * @fixme ???
- */
-const startDrawRoute = () => {
- Globals.mapState = "drawRoute";
-}
-
export default {
addControls,
- startDrawRoute,
}
diff --git a/src/js/directions/directions-dom.js b/src/js/directions/directions-dom.js
index 03d829d4..1716f843 100644
--- a/src/js/directions/directions-dom.js
+++ b/src/js/directions/directions-dom.js
@@ -320,19 +320,6 @@ let DirectionsDOM = {
divContainer.appendChild(divInput);
- var labelRemoveDeparture = document.createElement("label");
- labelRemoveDeparture.id = "directionsLocationRemoveImg_first";
- labelRemoveDeparture.className = "lblDirectionsLocations lblDirectionsLocationsRemoveImg";
- labelRemoveDeparture.addEventListener("click", function (e) {
- e.target.parentNode.classList.add("hidden");
- var div = document.getElementById( "directionsLocation_start");
- if (div) {
- div.value = "";
- div.dataset.coordinates = "";
- }
- });
- divContainer.appendChild(labelRemoveDeparture);
-
divDefault.appendChild(divContainer);
// on pre ajoute 5 étapes max
@@ -422,19 +409,6 @@ let DirectionsDOM = {
divInput.appendChild(labelCross);
divContainer.appendChild(divInput);
- var labelRemoveArrival = document.createElement("label");
- labelRemoveArrival.id = "directionsLocationRemoveImg_last";
- labelRemoveArrival.className = "lblDirectionsLocations lblDirectionsLocationsRemoveImg";
- labelRemoveArrival.addEventListener("click", function (e) {
- e.target.parentNode.classList.add("hidden");
- var div = document.getElementById( "directionsLocation_end");
- if (div) {
- div.value = "";
- div.dataset.coordinates = "";
- }
- });
- divContainer.appendChild(labelRemoveArrival);
-
divDefault.appendChild(divContainer);
// INFO : fonctionnalité desactivée sur la nouvelle maquette ?
@@ -475,4 +449,4 @@ let DirectionsDOM = {
}
};
-export default DirectionsDOM;
\ No newline at end of file
+export default DirectionsDOM;
diff --git a/src/js/directions/directions.js b/src/js/directions/directions.js
index c8010b4a..c9e8ea23 100644
--- a/src/js/directions/directions.js
+++ b/src/js/directions/directions.js
@@ -185,21 +185,26 @@ class Directions {
if (settings.locations && settings.locations.length) {
try {
// les coordonnées sont en lon / lat en WGS84G
- var start = null;
- var end = null;
+ var points = []
var point = null;
for (let index = 0; index < settings.locations.length; index++) {
if (settings.locations[index]) {
- point = (point === null) ?
- start = JSON.parse(settings.locations[index]) : JSON.parse(settings.locations[index]);
+ point = JSON.parse(settings.locations[index]);
+ points.push(point);
this.obj.addWaypoint(point);
}
}
- var end = point;
- if (start && end) {
- this.map.fitBounds([start, end], {
- padding : 20
+ var padding = 20;
+ // gestion du mode paysage / écran large
+ if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+ var paddingLeft = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sal").slice(0, -2)) +
+ window.innerHeight + 42;
+ padding = {top: 20, right: 20, bottom: 20, left: paddingLeft}
+ }
+ if (points.length > 1) {
+ this.map.fitBounds(points, {
+ padding: padding,
});
}
} catch (e) {
diff --git a/src/js/elevation-line-control.js b/src/js/elevation-line-control.js
index 8ccdf603..2f12bf66 100644
--- a/src/js/elevation-line-control.js
+++ b/src/js/elevation-line-control.js
@@ -120,8 +120,12 @@ class ElevationLineControl {
this.elevationData = [];
this.dplus = 0;
this.dminus = 0;
-
- const responseElevation = await ElevationLine.compute(this.coordinates);
+ let responseElevation;
+ try {
+ responseElevation = await ElevationLine.compute(this.coordinates);
+ } catch(err) {
+ responseElevation = {elevations: []}
+ }
let lastLngLat = null;
let lastZ = null;
let currentDistance = 0;
diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
index d9a008d5..28fb6bb4 100644
--- a/src/js/event-listeners.js
+++ b/src/js/event-listeners.js
@@ -75,28 +75,37 @@ function addListeners() {
// Screen dimentions change
window.addEventListener("resize", () => {
- Globals.menu.updateScrollAnchors();
- });
-
- document.onscroll = scrollEndCallback;
-
- function scrollEndCallback() {
- if (window.scrollY === 0) {
- Globals.currentScrollIndex = 0;
- } else if (window.scrollY === Globals.maxScroll) {
- Globals.currentScrollIndex = 2;
+ if (Globals.backButtonState !== 'default') {
+ Globals.currentScrollIndex = 1;
}
-
- if (Globals.currentScrollIndex > 0 && Globals.backButtonState == 'default') {
- Globals.backButtonState = 'mainMenu';
+ if (["searchDirections", "searchIsochrone", "search"].includes(Globals.backButtonState)) {
+ DOM.$backTopLeftBtn.style.removeProperty("box-shadow");
+ DOM.$backTopLeftBtn.style.removeProperty("height");
+ DOM.$backTopLeftBtn.style.removeProperty("width");
+ DOM.$backTopLeftBtn.style.removeProperty("top");
+ DOM.$backTopLeftBtn.style.removeProperty("left");
+ if (!window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+ DOM.$backTopLeftBtn.style.boxShadow = "unset";
+ DOM.$backTopLeftBtn.style.height = "44px";
+ DOM.$backTopLeftBtn.style.width = "24px";
+ DOM.$backTopLeftBtn.style.top = "12px";
+ DOM.$backTopLeftBtn.style.left = "15px";
+ }
}
- if (Globals.currentScrollIndex == 0 && Globals.backButtonState == 'mainMenu') {
- Globals.backButtonState = 'default';
+ if (Globals.backButtonState === "routeDraw") {
+ DOM.$bottomButtons.style.removeProperty('bottom');
+ DOM.$bottomButtons.style.removeProperty('left');
+ DOM.$bottomButtons.style.removeProperty('width');
+ if (!window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+ DOM.$bottomButtons.style.bottom = "calc(220px + env(safe-area-inset-bottom))";
+ } else {
+ DOM.$bottomButtons.style.left = "calc(100vh + env(safe-area-inset-left) + 42px)";
+ DOM.$bottomButtons.style.width = "auto";
+ }
}
- }
+ Globals.menu.updateScrollAnchors();
+ });
- // FIXME à deplacer ?
- // document.getElementById("drawroute").addEventListener("click", Controls.startDrawRoute);
}
export default {
diff --git a/src/js/globals.js b/src/js/globals.js
index 108a158d..2fc75000 100644
--- a/src/js/globals.js
+++ b/src/js/globals.js
@@ -11,7 +11,7 @@ let dataLayerDisplayed = localStorage.getItem("lastDataLayerDisplayed") || '';
/**
* global: back button state
- * is one of: 'default' 'search' 'mainMenu' 'params' 'legal' 'privacy' 'infos' 'legend' 'layerManagerWindow' 'route' ...
+ * is one of: 'default' 'search' 'params' 'legal' 'privacy' 'infos' 'legend' 'layerManagerWindow' 'route' ...
*/
let backButtonState = 'default';
@@ -27,9 +27,6 @@ let lastTextInSearch = '';
/** global: flag to check if map move fired by code */
let movedFromCode = false;
-/** global: flag to check if scoll fired by code */
-let ignoreNextScrollEvent = false;
-
let myPositionMarker = null;
let searchResultMarker;
@@ -91,7 +88,6 @@ export default {
controller,
signal,
movedFromCode,
- ignoreNextScrollEvent,
currentScrollIndex,
maxScroll,
anchors,
diff --git a/src/js/index.js b/src/js/index.js
index 09686f16..90e5f8db 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -73,7 +73,6 @@ function app() {
// DEBUG
window.mapGlobal = map;
- Globals.ignoreNextScrollEvent = true;
window.scroll({
top: 0,
left: 0,
diff --git a/src/js/map-listeners.js b/src/js/map-listeners.js
index 9b37f6c3..5e27f451 100644
--- a/src/js/map-listeners.js
+++ b/src/js/map-listeners.js
@@ -11,6 +11,19 @@ import Layers from './layer-config';
const addListeners = () => {
const map = Globals.map;
+ // TODO pour des zooms à niveaux entiers uniquement (utilie si POI toujouts limités à zoom 16)
+ // map.on('zoom', function() {
+ // var currentZoom = map.getZoom();
+ // var roundedZoom = Math.round(currentZoom); // Round the zoom level to the nearest whole number
+
+ // if (currentZoom !== roundedZoom) {
+ // // Set the map's zoom level to the rounded value
+ // map.once('moveend', function() {
+ // map.setZoom(roundedZoom);
+ // });
+ // }
+ // });
+
// Rotation de la carte avec le mutlitouch
map.on('rotate', () => {
console.log(map.getBearing());
diff --git a/src/js/my-position.js b/src/js/my-position.js
index 517a93d8..ac66f656 100644
--- a/src/js/my-position.js
+++ b/src/js/my-position.js
@@ -79,26 +79,24 @@ class Position {
var latitude = this.coordinates.lat;
var longitude = this.coordinates.lon;
var altitude = this.elevation;
+ var templateAddress;
// adresse disponible
- var templateAddress = `
- ${address.number} ${address.street}
- ${address.postcode} ${address.city}
- `
- // pas d'adresse
- if (!address.street) {
+ if (address.city && address.street) {
templateAddress = `
- ${address.city} ${address.postcode}
- `
- }
- // Ni adress ni poi
- if (!address.city) {
+ ${address.number} ${address.street}
+ ${address.postcode} ${address.city}
+ `
+ } else if (address.city && !address.street) {
+ templateAddress = `
+ ${address.city} ${address.postcode}
+ `
+ } else {
templateAddress = `
- ${latitude}, ${longitude}
- `
+ ${latitude}, ${longitude}
+ `
}
-
// template litteral
this.contentPopup = `