Discussion :

[Manard82]

Bonjour,

J'utilise l'API "leaflet-graphicscale" pour afficher une échelle sur ma carte Leaflet: https://github.com/nerik/leaflet-graphicscale.

Dans la page html j'ai déclaré le style suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.leaflet-control-graphicscale {
   background-color: rgb(254, 246, 237);
	opacity: 1;
    padding: 5px 24px 6px 14px;
    box-shadow: 0px 0px 30px rgba(52, 38, 13, .5);
    color: rgb(107, 55, 32);
 
}
 
.leaflet-control-graphicscale .line {
    border-color: rgb(107, 55, 32);
	opacity: 1;
}
 
.leaflet-control-graphicscale .filled .fill {
    background-color: rgb(100, 100, 100);
}
 
.scaleText {
    margin-bottom: 15px;
    text-align: center;
}
 
.scaleText h1, .scaleText p {
    margin: 0;
}
 
.scaleText h1 {
    font-family: 'Arial', cursive;
    font-size: 16px;
}
 
.scaleText .choice {
    margin: 0 5px;
    cursor: pointer;
}
 
.leaflet-control-graphicscale .labelSub, .labelLast, .zeroLabel  {
 
    font-size: 11px;
	color: black;
    margin-bottom: 4px;
	font-weight: 500;
}

L'affichage avec ce style se déroule correctement, maintenant je voudrais pouvoir choisir entre ce style et une variante en retirant background et box-shadow dans .leaflet-control-graphicscale

J'ai tenté le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function changegraphicScale(){
 
var controlgraphicScale = document.getElementsByClassName('leaflet-control-graphicscale');
 
controlgraphicScale.style.backgroundColor = "";
controlgraphicScale.style.boxShadow = "";
 
}
 
var graphicScale = L.control.graphicScale({position: 'bottomleft', doubleLine:true, fill:true}).addTo(map);
var scaleText = L.DomUtil.create('div', 'scaleText' );
graphicScale._container.insertBefore(scaleText, graphicScale._container.firstChild);
 
var scaleContainer = graphicScale.getContainer();
var draggable = new L.Draggable(scaleContainer);
draggable.enable();

La syntaxe écrite n'est pas reconnue...

Voici l'adresse de ma page de test : http://manardb.free.fr/tmp/Test-changement-fond.html

Avec mes remerciements pour votre aide

Bernard

[ProgElecT]

Salut

Peut être cette syntaxe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
controlgraphicScale[0].style.backgroundColor = "rgba(254, 246, 237, 0)";
controlgraphicScale[0].style.boxShadow = "0px 0px 30px rgba(52, 38, 13, 0)";

[Manard82]

Bonsoir ProgElecT,

Je te remercie de ta réponse, j'ai changé les deux lignes indiquées, rien ne change. J'ai l'impression que la fonction ne se lance pas.

Je viens d'essayer ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
if (choixfond == "02") 
{
changegraphicScale()
} 
function changegraphicScale(){
 
var controlgraphicScale = document.getElementsByClassName('leaflet-control-graphicscale');
 
controlgraphicScale.style.backgroundColor = "rgba(254, 246, 237, 0)";
controlgraphicScale.style.boxShadow = "0px 0px 30px rgba(52, 38, 13, 0)";
 
}

J'ai cette erreur : "Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor') at changegraphicScale"

Je viens de faire un nouvel essai en modifiant le nom du className

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var controlgraphicScale = document.getElementsByClassName('leaflet-control-graphicscale leaflet-control');

Toujours cette erreur


Bonne soirée

Bernard

[ProgElecT]

Peut être pas le bon élément
remplacer
var controlgraphicScale = document.getElementsByClassName('leaflet-control-graphicscale');.
par
var controlgraphicScale = document.getElementsByClassName('leaflet-control-graphicscale leaflet-control');

[Manard82]

Merci de ta suggestion, je venais de la faire juste avant ta réponse, mais hélas l'erreur est toujours présente

[ProgElecT]

Voir ma premiere suggestion post 2
Attention, getElementsByClassName renvoie une collection

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
controlgraphicScale[0].style.backgroundColor = "rgba(254, 246, 237, 0)";
controlgraphicScale[0].style.boxShadow = "0px 0px 30px rgba(52, 38, 13, 0)";

controlgraphicScale[0], penser a indexer 0 (zero)

[Manard82]

Bonjour ProgElecT,


J'avais zappé les zéros entre crochets, mais malgré leur prise en compte j'ai l'erreur qui est encore présente.

Test-changement-fond.html:210 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at changegraphicScale (Test-changement-fond.html:210:24)
at Test-changement-fond.html:204:1

Ma page de test est à jour de cette modification : http://manardb.free.fr/tmp/Test-changement-fond.html

Bon weekend

Bernard

[ProgElecT]

Salut
Vue que tu fait un reload, l'appel de la fonction changegraphicScale() arrive trop tôt, l'élément document.getElementsByClassName('leaflet-control-graphicscale leaflet-control') n'est pas encor complétement chargé.
Donc il faut soit attendre le chargement complet du DOM évènement DOMContentLoaded avant de lancer la procédure changegraphicScale(), soit temporiser avec un setTimeout() de quelque centaines de millisecondes avant de l'invoquer.

[NoSmoking]

Bonjour,
pas mal de maladresses dans ton code et notamment celle qui déclenche ton erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var controlgraphicScale = document.getElementsByClassName('leaflet-control-graphicscale leaflet-control');

le paramètre n'est pas bon, il aurait fallu écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var controlgraphicScale = document.getElementsByClassName('leaflet-control-graphicscale');

tout court, ceci étant tu pourrais également récupèrer l'élément via

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const controlgraphicScale = document.querySelector(".leaflet-control-graphicscale");

on note le point devant la classe, il s'agit dans ce cas d'un sélecteur CSS.


Pourquoi recharger la page à chaque changement ?

Une méthode qui a très largement fait ses preuves est le passage par l'ajout/suppression d'un classe CSS pour faire le boulot.

Si on déclare le CSS suivant au départ :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.leaflet-control-graphicscale {
/*  background-color: rgb(254, 246, 237); /*-- out --*/
  opacity: 1;
  padding: 5px 24px 6px 14px;
/*  box-shadow: 0px 0px 30px rgba(52, 38, 13, .5); /*--  out --*/
  color: rgb(107, 55, 32);
}
.scale-background {
  background-color: rgb(254, 246, 237);
  box-shadow: 0px 0px 30px rgba(52, 38, 13, .5); 
}

il suffit d'ajouter la classe scale-bakground, pour avoir le fond et retrancher celle-ci pour ne plus l'avoir.

Concrètement cela se fait en choisissant via le <select> l'action à faire, cette action est indiquée dans la value.

Ton HTML devient donc :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<label>Fond échelle</label>
<select id="fond-echelle" title="Choisir le fond">
  <option value="add">Oui</option>
  <option value="remove">Non</option>
</select>

Pour déclencher le changement le JS qui va avec est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
const elSelect = document.getElementById("fond-echelle");
elSelect.addEventListener("change", changeFondEchelle);
function changeFondEchelle(e) {
  const action = e.target.value;
  const el = document.querySelector(".leaflet-control-graphicscale")
  el.classList[action]("scale-background")
  sessionStorage.setItem("fond-echelle", action);
}

... au passage, pourquoi sessionStorage et non localSession, si je reviens plus tard j'aimerais autant que mon choix soit pris en compte.

Maintenant à l'ouverture de la page il te faut mettre ou pas en place le fond.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function initFondEchelle() {
  // lecture état précédent
  const action = sessionStorage.getItem("fond-echelle");
  if (action) {
    elSelect.value = action;
  }
  // force la prise en compte
  changeFondEchelle({
    target: elSelect
  });
}
// appel
initFondEchelle();

au final ton code se résume à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const map = L.map('map').setView([43.6, 1.43], 10);
const osmLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const baseLayers = {
  "OSM": osmLayer,
};
map.addLayer(osmLayer);
const graphicScale = L.control.graphicScale({
  position: 'bottomleft',
  doubleLine: true,
  fill: true
}).addTo(map);
 
const scaleText = L.DomUtil.create('div', 'scaleText');
const scaleContainer = graphicScale.getContainer();
scaleContainer.insertBefore(scaleText, scaleContainer.firstChild);
const elSelect = document.getElementById("fond-echelle");
elSelect.addEventListener("change", changeFondEchelle);
 
function changeFondEchelle(e) {
  const action = e.target.value;
  const el = document.querySelector(".leaflet-control-graphicscale")
  el.classList[action]("scale-background")
  sessionStorage.setItem("fond-echelle", action);
}
 
function initFondEchelle() {
  const action = sessionStorage.getItem("fond-echelle");
  if (action) {
    elSelect.value = action;
  }
  changeFondEchelle({
    target: elSelect
  });
}
initFondEchelle();

Juste une dernière chose, pourquoi ajouter un élément vide ligne 15 du code ci-dessus, il est peut-être préférable d'augmenter le padding ?

[Manard82]

Bonjour NoSmoking,

Je te remercie pour ton aide précieuse très détaillée, dans la page Leaflet que j'utilise il y a de nombreux paramètres de réglages, dont ceux d'une API Heatmap, des données complémentaires telles : lignes, aires et waypoints, divers choix d'échelles et d'indication du Nord.

Cette page a été prévue pour visualiser des concentrations de sites rupestres du Maroc.

Voici un aperçu de la fenêtre permettant les réglages énumérés



Pour conserver des données chargées ou des choix de paramètres, j'ai utilisé de nombreux "sessionStorage" et "localStorage".

Je précise que je ne suis pas un développeur, mais un bidouilleur qui cherche à trouver des solutions avant d'appeler à l'aide comme dans le cas présent.

J'ai copié ton code dans ma page de test qui maintenant prend bien en compte les deux modes

Quant à la ligne 15, j'ai récupéré ce code sur la page de démo du développeur de l'API : http://erik.nz/leaflet-graphicscale/demo/demo.js

Encore merci et bon week-end

Bernard