Skip to content

Commit

Permalink
fix(plan-ign): rien d'affiché si zoomé à fond dans l'appli
Browse files Browse the repository at this point in the history
  • Loading branch information
@azarz
azarz committed Dec 28, 2023
1 parent 4a8d958 commit 4a22040
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 153 deletions.
6 changes: 5 additions & 1 deletion src/css/map.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
}

.maplibregl-ctrl-bottom-left {
bottom: -35px;
bottom: 10px;
left: 15px;
background-color: hsla(0, 0%, 100%, 0.75);
border-radius: 4px;
Expand All @@ -16,6 +16,10 @@
justify-content: flex-end;
}

#bottomButtons > .maplibregl-control-container > .maplibregl-ctrl-bottom-left {
bottom: -35px;
}

.maplibregl-ctrl-scale {
background-color: #0000;
font-family: "Open Sans";
Expand Down
2 changes: 1 addition & 1 deletion src/html/mapButtons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<div class="button d-none" id="sideBySideRightLayer"></div>
<div class="d-none" id="sideBySideFadeSlider">
<div id="sideBySideFadeSlider-range">
<input id="sideBySideFadeSlider-range-input" type="range" value="100" style="--value: 100; --min: 0; --max: 100;">
<input id="sideBySideFadeSlider-range-input" type="range" value="0" style="--value: 0; --min: 0; --max: 100;">
</div>
</div>
<!-- Tracé d'itinéraire -->
Expand Down
10 changes: 5 additions & 5 deletions src/js/compare.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ class Compare {

this.fadeSliderInput.addEventListener('input', () => this.fadeSliderInput.style.setProperty('--value', this.fadeSliderInput.value));
this.fadeSliderInput.addEventListener('input', () => {
document.getElementById("mapRLT1").style.opacity = this.fadeSliderInput.value / 100;
document.getElementById("mapRLT1").style.opacity = 1 - (this.fadeSliderInput.value / 100);
});

document.getElementById("rltMapToggle1").addEventListener("change", (e) => {
Expand Down Expand Up @@ -254,8 +254,8 @@ class Compare {
if (this.mode == "leftright") {
document.querySelector("#compareLeftRight").classList.add("selected");
document.querySelector("#sideBySideFadeSlider").classList.add("d-none");
this.fadeSliderInput.value = 100;
this.fadeSliderInput.style.setProperty('--value', 100)
this.fadeSliderInput.value = 0;
this.fadeSliderInput.style.setProperty('--value', 0)
document.getElementById("mapRLT1").style.removeProperty("opacity");
if (this.sideBySide) {
this.sideBySide.remove();
Expand All @@ -264,8 +264,8 @@ class Compare {
} else if (this.mode == "upDown") {
document.querySelector("#compareUpDown").classList.add("selected");
document.querySelector("#sideBySideFadeSlider").classList.add("d-none");
this.fadeSliderInput.value = 100;
this.fadeSliderInput.style.setProperty('--value', 100)
this.fadeSliderInput.value = 0;
this.fadeSliderInput.style.setProperty('--value', 0)
document.getElementById("mapRLT1").style.removeProperty("opacity");
if (this.sideBySide) {
this.sideBySide.remove();
Expand Down
5 changes: 4 additions & 1 deletion src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ function app() {
zoom: 5,
center: [2.0, 47.33],
attributionControl: false,
maxZoom: 21,
locale: "fr",
maxPitch: 0,
touchPitch: false,
Expand All @@ -59,6 +60,7 @@ function app() {
zoom: 5,
center: [2.0, 47.33],
attributionControl: false,
maxZoom: 21,
locale: "fr",
maxPitch: 0,
touchPitch: false,
Expand All @@ -72,6 +74,7 @@ function app() {
zoom: 5,
center: [2.0, 47.33],
attributionControl: false,
maxZoom: 21,
locale: "fr",
maxPitch: 0,
touchPitch: false,
Expand Down Expand Up @@ -100,7 +103,7 @@ function app() {
Controls.addControls();

// HACK: déplacement de l'échelle hors de la div map pour qu'elle bouge librement
var mapLibreControls = document.querySelectorAll(".maplibregl-control-container")[1];
var mapLibreControls = document.querySelectorAll(".maplibregl-control-container")[2];
var parent = document.getElementById("bottomButtons");
parent.appendChild(mapLibreControls);

Expand Down
16 changes: 12 additions & 4 deletions src/js/map-interactivity/feature-property-filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,19 @@
* @returns chaine de caractère HTML qui décrit la feature
*/

const natureRouteToDisplay = ["Autoroute", "Bretelle", "Chemin",
const natureRouteToDisplay = ["Autoroute", "Bretelle", "Chemin",
"Piste cyclable", "Sentier", "Rue piétonne", "Escalier"]

const featurePropertyFilter = (feature) => {
let result = ``;
if (feature.source === "poi_osm") {
Object.entries(feature.properties).forEach((prop) => {
if (prop[0] !== "symbo" && prop[0] !== "texte") {
result = result + `${prop[0]} : ${prop[1]} <br />`
}
});
return result;
}
let nature = ""
if (feature.properties.hasOwnProperty("nature")) {
nature = feature.properties.nature
Expand All @@ -32,7 +40,7 @@ const featurePropertyFilter = (feature) => {
result = result + `${prop[1]} <br />`;
}
}
if(feature.layer["source-layer"] == "construction_lineaire"
if(feature.layer["source-layer"] == "construction_lineaire"
|| feature.layer["source-layer"] == "construction_surfacique"
|| feature.layer["source-layer"] == "construction_ponctuelle"
|| feature.layer["source-layer"] == "equipement_de_transport"
Expand All @@ -55,7 +63,7 @@ const featurePropertyFilter = (feature) => {
if(prop[0] == "nature_detaillee") {
result = result + `${prop[1]} <br />`;
}

}

// Batiment
Expand All @@ -75,7 +83,7 @@ const featurePropertyFilter = (feature) => {
if(prop[0] == "hauteur" && prop[0] != '') {
result = result + `Hauteur : ${prop[1]}m <br />`;
}

}

})
Expand Down
66 changes: 41 additions & 25 deletions src/js/map-interactivity/map-interactivity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,13 @@ class MapInteractivity {

this.#addSourcesAndLayers();

// cleabs et type de géométrie de la donnée séléctionnée dans plan ign interactif
this.selectedCleabs = null;
this.selectedFeatureType = null;

// fonction d'event avec bind
this.handleInfoOnMap = this.#getInfoOnMap.bind(this);
this.handleUpdateHighlightedGeom = this.#updateHighlightedGeom.bind(this);

// annulation de la reqête fetch
this.controller = new AbortController();
Expand Down Expand Up @@ -74,7 +79,7 @@ class MapInteractivity {
this.map.off("click", this.handleInfoOnMap);
// On clique sur une feature tuile vectorielle
let featureHTML;
if (features.length > 0 && features[0].source == "bdtopo") {
if (features.length > 0 && (features[0].source === "bdtopo" || features[0].source === "poi_osm")) {
featureHTML = featurePropertyFilter(features[0]);
if (features[0].source === "poi_osm") {
let featureName = features[0].properties.texte;
Expand Down Expand Up @@ -124,36 +129,46 @@ class MapInteractivity {
this.#clearSources();
Globals.position.compute(ev.lngLat, features[0].sourceLayer, featureHTML).then(() => {
Globals.menu.open("position");
let source;
const mapFeatures = this.map.queryRenderedFeatures();
let toFuse = [];
mapFeatures.forEach(feat => {
if (feat.source == "bdtopo" && feat.properties.cleabs == features[0].properties.cleabs) {
toFuse.push(feat);
}
});
let union = [toFuse[0]];
if (features[0].geometry.type == "Point") {
source = this.map.getSource(this.configuration.pointsource);
} else if (features[0].geometry.type == "LineString") {
union = toFuse;
source = this.map.getSource(this.configuration.linesource);
} else {
for (let i = 1; i < toFuse.length - 1; i++) {
union[0] = Union(union[0], toFuse[i], {properties: union.properties})
}
source = this.map.getSource(this.configuration.polygonsource);
}
source.setData({
'type': 'FeatureCollection',
'features': union,
});
this.selectedCleabs = features[0].properties.cleabs;
this.selectedFeatureType = features[0].geometry.type;
this.#updateHighlightedGeom();
this.map.on("move", this.handleUpdateHighlightedGeom);
});
}
this.map.on("click", this.handleInfoOnMap);
return;
});
}

// Met à jour la gémétrie highlightée au moment de la séléction et du dpélacement de la carte.
#updateHighlightedGeom() {
let source;
const mapFeatures = this.map.queryRenderedFeatures();
let toFuse = [];
mapFeatures.forEach(feat => {
if (feat.source == "bdtopo" && feat.properties.cleabs == this.selectedCleabs) {
toFuse.push(feat);
}
});
if (toFuse.length == 0) {
return
}
let union = [toFuse[0]];
if (this.selectedFeatureType == "Point") {
source = this.map.getSource(this.configuration.pointsource);
} else if (this.selectedFeatureType == "LineString") {
union = toFuse;
source = this.map.getSource(this.configuration.linesource);
} else {
for (let i = 1; i < toFuse.length - 1; i++) {
union[0] = Union(union[0], toFuse[i], {properties: union.properties})
}
source = this.map.getSource(this.configuration.polygonsource);
}
source.setData({
'type': 'FeatureCollection',
'features': union,
});
}

/**
Expand Down Expand Up @@ -279,6 +294,7 @@ class MapInteractivity {
* Supprime les donnés dans les sources
*/
#clearSources() {
this.map.off("move", this.handleUpdateHighlightedGeom);
this.map.getSource(this.configuration.pointsource).setData({
'type': 'FeatureCollection',
'features': []
Expand Down
2 changes: 2 additions & 0 deletions src/js/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ class MenuNavigation {
DOM.$sideBySideRightLayer.classList.remove('d-none');
DOM.$tabContainer.style.top = "100vh";
DOM.$bottomButtons.style.bottom = "calc(42px + env(safe-area-inset-bottom))";
DOM.$bottomButtons.querySelector(".maplibregl-control-container").classList.add("d-none");
Globals.compare.show();
Globals.interactivityIndicator.hardDisable();
Globals.currentScrollIndex = 0;
Expand Down Expand Up @@ -306,6 +307,7 @@ class MenuNavigation {
DOM.$sideBySideRightLayer.classList.add('d-none');
DOM.$tabContainer.style.removeProperty("top");
DOM.$bottomButtons.style.removeProperty("bottom");
DOM.$bottomButtons.querySelector(".maplibregl-control-container").classList.remove("d-none");
Globals.compare.hide();
Globals.interactivityIndicator.enable();
break;
Expand Down
Loading

0 comments on commit 4a22040

Please sign in to comment.