Skip to content

Commit

Permalink
Ajout de l'indicateur d'activité pour la plan IGN interactif et les c…
Browse files Browse the repository at this point in the history
…ouches thématiques (#26)

+ mise à jour de la couche Plan IGN
+ héritage avec EventTarget des composants graphiques
  • Loading branch information
lowzonenose authored Dec 5, 2023
1 parent 97d2112 commit aa5ac0d
Show file tree
Hide file tree
Showing 11 changed files with 4,592 additions and 371 deletions.
33 changes: 33 additions & 0 deletions src/css/assets/interactivity.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion src/css/map-buttons.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
#layerManagerBtn,
#geolocateBtn,
#compassBtn,
#filterPoiBtn {
#filterPoiBtn,
#interactivityBtn {
width: 40px;
height: 40px;
border-radius: 60px;
Expand Down Expand Up @@ -66,6 +67,14 @@
top: calc(80px + env(safe-area-inset-top));
}

#interactivityBtn {
background-image: url("assets/interactivity.svg");
background-color: lightgray;
position: absolute;
left: 15px;
top: calc(80px + env(safe-area-inset-top));
}

@media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
#layerManagerBtn {
bottom: calc(65px + env(safe-area-inset-bottom));
Expand Down
2 changes: 2 additions & 0 deletions src/html/mapButtons.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,5 @@
<div class="button" id="sideBySideBtn"></div>
<!-- Filtres POI -->
<div class="button" id="filterPoiBtn"></div>
<!-- Indicateur d'interactivité du Plan IGN -->
<div class="button" id="interactivityBtn"></div>
4 changes: 3 additions & 1 deletion src/js/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const $compassBtn = document.getElementById("compassBtn");
const $layerManagerBtn = document.getElementById("layerManagerBtn");
const $sideBySideBtn = document.getElementById("sideBySideBtn");
const $filterPoiBtn = document.getElementById("filterPoiBtn");
const $interactivityBtn = document.getElementById("interactivityBtn");

const $whiteScreen = document.getElementById("whiteScreen");
const $parameterScreenWindow = document.getElementById("parameterScreenWindow");
Expand Down Expand Up @@ -84,5 +85,6 @@ export default {
$informationsText,
$informationsImg,
$filterPoiBtn,
$poiWindow
$poiWindow,
$interactivityBtn
};
6 changes: 6 additions & 0 deletions src/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import LayersConfig from './layer-config';
import Controls from './controls';
import RecentSearch from "./search-recent";
import MenuNavigation from './nav';
import Interactivity from './interactivity';

// import CSS
import '@maplibre/maplibre-gl-compare/dist/maplibre-gl-compare.css';
Expand Down Expand Up @@ -140,6 +141,11 @@ function app() {
]
});

// INFO
// Indicateur d'activité du Plan IGN interactif sur la carte
// (il doit être placé après le LayerManager afin de connaitre les couches ajoputées par défaut !)
Globals.interactivity = new Interactivity(map, {});

// Initialisation du menu de navigation
Globals.menu = new MenuNavigation();
Globals.menu.show();
Expand Down
95 changes: 95 additions & 0 deletions src/js/interactivity.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import Globals from './globals';
import DOM from './dom';

/**
* Indicateur d'activité du Plan IGN interactif et des couches thématiques sur la carte
*/
class Interactivity {

/**
* constructeur
* @param {*} map
* @param {*} options
*/
constructor(map, options) {
this.options = options || {
id: "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS"
};

this.map = map;
this.id = this.options.id || "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS"; // PII

this.#listen();

this.pii = false; // couche PII chargée ?
this.thematic = false; // couche thematic chargée ?
this.position = false; // couche en position max ?

return this;
}

/**
* Ecouteurs sur :
* - gestion des ajout / suppression / position des couches
* - si zooms > 14 actif pour la couche PII
* - la couche au dessus est elle un baseLayer ?
*/
#listen() {
this.onGetLastLayer = this.onGetLastLayer.bind(this);
Globals.manager.addEventListener("addlayer", this.onGetLastLayer);
Globals.manager.addEventListener("removelayer", this.onGetLastLayer);
Globals.manager.addEventListener("movelayer", this.onGetLastLayer);

this.map.on("zoom", (e) => {
if (this.pii && this.position && Math.round(e.target.getZoom())>14) {
this.active();
} else {
(this.thematic && this.position) ? this.active() : this.disable();
}
});
}

/**
* callback
* @param {*} e
* @private
*/
onGetLastLayer(e) {
var layer = e.detail.entries.pop();
this.thematic = this.pii = this.position = false;
if (layer[0] === this.id) {
this.pii = true;
this.position = true;
if (Math.round(this.map.getZoom())>14) {
this.active();
}
} else {
if (layer[1].base) {
this.disable();
} else {
this.thematic = true;
this.position = true;
this.active();
}
}
}

/**
* Active l'indicateur d'activité
*/
active () {
this.actived = true;
DOM.$interactivityBtn.style["background-color"] = "white";
}

/**
* Desactive l'indicateur d'activité
*/
disable () {
this.actived = false;
DOM.$interactivityBtn.style["background-color"] = "lightgray";
}

}

export default Interactivity;
18 changes: 5 additions & 13 deletions src/js/layer-catalogue.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import ImageNotFound from '../html/img/image-not-found.png';
* Gestion des couches thématiques et fonds de carte
* @fires addlayer
* @fires removelayer
* @todo impl. les couches "vecteur tuilé"
* @fixme impl. d'une liste de couches courante (Globals.baseLayerDisplayed)
* @description
* → manager
Expand All @@ -30,16 +29,17 @@ import ImageNotFound from '../html/img/image-not-found.png';
* → switcher
* → this.addLayer → call addContainer & addGroup & map.addLayer → fire event addLayer
* → this.removeLayer → call removeContainer & removeGroup & map.removeLayer → fire event removeLayer
* → this.moveLayer → call moveContainer & moveGroup & map.moveLayer (TODO)
* → this.moveLayer → call moveContainer & moveGroup & map.moveLayer
*/
class LayerCatalogue {
class LayerCatalogue extends EventTarget {

/**
* constructeur
* @param {*} options
* @param {*} options.target
*/
constructor(options) {
super();
this.options = options || {
target : null
};
Expand All @@ -48,14 +48,6 @@ class LayerCatalogue {
this.map = Globals.map
this.mapRLT = Globals.mapRLT;

/**
* Interface pour les evenements
* @example
* event.dispatchEvent(new CustomEvent("myEvent", { detail : {} }));
* event.addEventListener("myEvent", handler);
*/
this.event = new EventTarget();

this.#render();
this.#listeners();
}
Expand Down Expand Up @@ -294,7 +286,7 @@ class LayerCatalogue {
* @type {*}
* @property {*} id -
*/
this.event.dispatchEvent(
this.dispatchEvent(
new CustomEvent("addlayer", {
bubbles: true,
detail: {
Expand Down Expand Up @@ -327,7 +319,7 @@ class LayerCatalogue {
* @type {*}
* @property {*} id -
*/
this.event.dispatchEvent(
this.dispatchEvent(
new CustomEvent("removelayer", {
bubbles: true,
detail: {
Expand Down
1 change: 1 addition & 0 deletions src/js/layer-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const getLayerProps = (id) => {
}
return {
layer: props.name,
base: getBaseLayers().includes(id), // couche de fonds ou autre
title: props.title,
desc: props.description,
type: (isVector) ? "vector" : "raster",
Expand Down
58 changes: 51 additions & 7 deletions src/js/layer-manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import layerConfig from './layer-config';
* - gestion des thèmatiques et fonds de carte
* @see LayerSwitcher
* @see LayerCatalogue
* @fixme les couches tuiles vectorielles sont en chargement async !
* @fires addlayer
* @fires removelayer
* @fires movelayer
* @description
* → manager
* → instancie this.catalogue & this.switcher
Expand All @@ -29,10 +31,10 @@ import layerConfig from './layer-config';
* → switcher
* → this.addLayer → call addContainer & addGroup & map.addLayer → fire event addLayer
* → this.removeLayer → call removeContainer & removeGroup & map.removeLayer → fire event removeLayer
* → this.moveLayer → call moveContainer & moveGroup & map.moveLayer (TODO)
* → this.moveLayer → call moveContainer & moveGroup & map.moveLayer
*
*/
class LayerManager {
class LayerManager extends EventTarget {
/**
* constructeur
* @param {*} options -
Expand All @@ -47,6 +49,7 @@ class LayerManager {
* });
*/
constructor(options) {
super();
this.options = options || {
/**
* [{
Expand All @@ -60,6 +63,7 @@ class LayerManager {

this.layerCatalogue = null;
this.layerSwitcher = null;

this.#render();
this.#listeners();
this.#loadLayers();
Expand All @@ -69,26 +73,66 @@ class LayerManager {
* Ecouteurs
*/
#listeners() {
this.layerCatalogue.event.addEventListener("addlayer", (e) => {
this.layerCatalogue.addEventListener("addlayer", (e) => {
this.layerSwitcher.addLayer(e.detail.id);
});
this.layerCatalogue.event.addEventListener("removelayer", (e) => {
this.layerCatalogue.addEventListener("removelayer", (e) => {
this.layerSwitcher.removeLayer(e.detail.id);
});

this.layerSwitcher.event.addEventListener("addlayer", (e) => {
this.layerSwitcher.addEventListener("addlayer", (e) => {
/**
* Evenement "addlayer"
* @event addlayer
* @type {*}
* @property {*} id -
* @property {*} options -
*/
this.dispatchEvent(
new CustomEvent("addlayer", {
bubbles: true,
detail: e.detail
})
);
var element = document.getElementById(e.detail.id);
element.classList.add('selectedLayer');
this.#updateLayersCounter(e.type);
});
this.layerSwitcher.event.addEventListener("removelayer", (e) => {
this.layerSwitcher.addEventListener("removelayer", (e) => {
/**
* Evenement "removelayer"
* @event removelayer
* @type {*}
* @property {*} id -
*/
this.dispatchEvent(
new CustomEvent("removelayer", {
bubbles: true,
detail: e.detail
})
);
var element = document.getElementById(e.detail.id);
element.classList.remove('selectedLayer');
if (e.detail.error) {
return;
}
this.#updateLayersCounter(e.type);
});
this.layerSwitcher.addEventListener("movelayer", (e) => {
/**
* Evenement "movelayer"
* @event movelayer
* @type {*}
* @property {*} id -
* @property {*} positions -
*/
this.dispatchEvent(
new CustomEvent("movelayer", {
bubbles: true,
detail: e.detail
})
);
});
}

/**
Expand Down
Loading

0 comments on commit aa5ac0d

Please sign in to comment.