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)