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