Discussion :

[TMKFrench]

Bonjour à tous,

J'ai créé une Map interactive pour le jeu anthem qui contient un peu moins de 300 marker.
Certains de ces markers sont des objets à ramasser de manière unique.
Pour aider les joueurs, j'ai rajouté dans le popup qui s'ouvre quand on clique sur le marqueur une checkbox.
Mais pour plus de clarté sur la map et afin de repérer facilement les objets déjà trouvés, je voudrais réduire l'opacité du marker.

Et c'est là que je bloque car je n'arrive pas à le faire.

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
Var mymap;
Var markeropa
 
	function opacitynorm(e) {
		e.setOpacity(1);
	};
 
	function opacitymin(e) {
		e.setOpacity(0.5);
	};
 
$(function () {
 
// Initialisation et chargement de la Map
	mymap = L.map('mapid', {
				crs: L.CRS.Simple,
				minZoom : -1,
				maxZoom : 1,
				attribution : 'TMKFrench'
			});
 
	mymap.setMaxBounds(new L.latLngBounds([0,0], [2600,2000]));
 
	var bounds = [[0,0], [2000,2000]];
	var image = L.imageOverlay('media/mapbig.jpg', bounds).addTo(mymap);
 
	mymap.fitBounds(bounds);
 
// Déclaration des types marqueurs
	var Rune = L.icon({
    iconUrl:      'http://anthem.tmkfrench.fr/media/icones/rune.png',
    className:    'rune',
    iconSize:     [26, 26],
    iconAnchor:   [13, 13],
    popupAnchor:  [0, -13]
	});
 
	var popupOptions =
    {
        'minWidth': '640px',
        'minHeight': '480px'
    }
 
// Liste des marqueurs	
	L.marker([500,500], {icon: Rune, title: "1"}).addTo(mymap).bindPopup('<input id="mapbox" value="test1" type="checkbox" /> Trouvé 1');
	L.marker([1000,1000], {icon: Rune, title: "2"}).addTo(mymap).bindPopup('<input id="mapbox" value="test2" type="checkbox" /> Trouvé 2');
	L.marker([1500,1500], {icon: Rune, title: "3"}).addTo(mymap).bindPopup('<input id="mapbox" value="test3" type="checkbox" /> Trouvé 3');
 
 
	mymap.on("click", onMapClick);
 
	mymap.on('popupopen', function () {
		$.cookie.json = true;
		$(":checkbox").on("change", function(){
			var checkboxValues = {};
			var checkboxname = "chkbox" + this.value;
			checkboxValues[this.id] = this.checked;
			$.cookie(checkboxname, checkboxValues, { expires: 3650, path: '/' })
		});
		var checkboxname = "chkbox" + document.getElementById("mapbox").value;
		var checkboxValuesrp = $.cookie(checkboxname);
			if(checkboxValuesrp){
				Object.keys(checkboxValuesrp).forEach(function(element) {
				var checked = checkboxValuesrp[element];
				$("#mapbox").prop('checked', checked);
				});
			};	
		var checkboxstate = document.getElementById("mapbox").checked;
			if (checkboxstate){
					console.log("checkbox cochée");
					opacitymin();
			}
			else {
				console.log("checkbox vide");
				opacitynorm();
			};
		});
});

J'ai essayé bon nombre de solution sans succés.
J'ai testé la fonction on('click', fct(xx)) à la fin des ligne de marqueur pour récupérer la valeur du marqueur et la stocker dans une variable globale pour pouvoir ensuite changer la valeur opacity dans une fonction dédiée, sans succés.
De plus il faut que je règle cette valeur pour chaque marqueur dont la checkbox est cochée à la réouverture de la map. Les valeurs des checkbox sont stockées dans des cookies propre à chaque checkbox. A l'ouverture du popup, s'il existe une chkbx dedans, cela vérifie si un cookie à été crée et si oui cela coche ou pas la checkbox en fonction de la valeur du cookies.
Pour régénérer la valeur de l'opacité en fonction de l'état de la checkbox à l'ouverture de la map, je n'ai qu'à rajouter .openpopup à la fin de chaque marqueur afin de forcer leur ouverture à la création de la map.

Un exemple avec le code complet est disponible ici http://anthem.tmkfrench.fr/test4.html

Merci de l'aide que vous pourrez m'apporter car j'avoue tourner en rond. Et mes connaissances ne me permette pas d'aller plus loin.