Discussion :

[SylvainM]

Bonjour à tous,

J'ai bien avancé sur mon projet (voir mon précédent post), mais je bloque aujourd'hui sur un dernier petit point, que j'imagine tout bête
J'ai créé un layer (geojson) de points, dynamiquement à partir d'un layer (geojson) de polygones. Pour moi, c'est déjà énorme !
Maintenant, plutôt que d'utiliser un L.control.layers(), pour contrôler les couches, je souhaiter créer un petit bouton de switch (j'avais déjà fait ça dans un autre projet).
J'ai créé mes fonctions pour changer de type :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var currentMapType = "densite";
 
function changemaptoperiode() {
	map.removeLayer(MaillesLayerPoly);
	map.addLayer(MaillesLayerCircle);
	currentMapType = "periodes";
}
function changemaptodensite() {
	map.removeLayer(MaillesLayerCircle);
	map.addLayer(MaillesLayerPoly);
	currentMapType = "densite";
}

et je les appelle dans un bouton qui utilise le CSS de Toggle-Switch (https://ghinda.net/css-toggle-switch/) ainsi que Leaflet.Control.Custom (https://github.com/yigityuce/Leaflet.Control.Custom), ce qui donne :

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
L.control.custom({
    position: 'topright',
    content : '<fieldset>' +
                 '<div class="switch-toggle switch-candy">' +
                    '<input id="Periodes" name="view" type="radio">' +
                    '<label for="Periodes" onclick="changemaptoperiode()"><span data-toggle="tooltip" data-placement="bottom" title="Analyse par périodes"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span></label>' +
                    '<input id="NbObservations" name="view" type="radio" checked>' +
                    '<label for="NbObservations" onclick="changemaptodensite()"><span data-toggle="tooltip" data-placement="bottom" title="Analyse par densité d Observations"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></span></label>' +
                    '<a style="background-color: orange !important"></a>' +
                 '</div>' +
                '</fieldset>',
    style   :
    {
        margin: '10px',
        padding: '0px 0 0 0',
        cursor: 'pointer',
    }
})
.addTo(map);

Mais, quand je clique sur le bouton ainsi créé, j'obtiens ce message d'erreur de la console :

Code :

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

1
2
ReferenceError: changemaptoperiode is not defined
ReferenceError: changemaptodensite is not defined

Voici tout cela de manière interactive dans un JSFiddle :
http://jsfiddle.net/gsuh8j74/

Est-ce que vous voyez pourquoi ma fonction n'est pas définie ?

Merci d'avance

Sylvain M.

[SylvainM]

Etrange : je ne faisais les tests que sur JSFiddle.
Mais je viens d'adapter à une page sur mon serveur, et là, ça fonctionne !
Bon, c'est résolu, mais si quelqu'un veut m'expliquer ce qui cloche, je veux bien essayer de comprendre !