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.

[Loralina]

Bonjour,

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.

Si je teste la page, je vois que la fonction "onMarkerClick" est appelée après l'ouverture du popup.

En inversant l'ordre, comme ceci :

Code :

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

L.marker([500,500], {icon: Rune, title: "1"}).addTo(mymap).on('click', onMarkerClick).bindPopup('<input id="mapbox" value="test1" type="checkbox" /> Trouvé 1');

la fonction "onMarkerClick" est appelée avant et le changement d'opacité fonctionne.

[TMKFrench]

Merci Loralina pour votre réponse.

Elle a en partie résolu mon problème. Effectivement en plaçant la fonction on.('click') avant j'arrive à récupérer dans la variable markeropa, le marker dont je peux changer l'opacité de son icone.
Après quelques arrangement dans le code, l'opacité se règle instantanément quand j'agis sur la checkbox.

voici le nouveau code :

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
79
80
81
82
83
84
85
	var mymap;
	var markeropa;
 
	function onMapClick(e) {
		console.log("Vous avez cliqué sur la map à " + mymap.wrapLatLng(e.latlng));
	};
 
	function onMarkerClick(e) {
		markeropa = this;
	}
 
	function markeropacity(e) {
		if (e){
				console.log("checkbox cochée");
				markeropa.setOpacity(0.5);
			}
			else {
				console.log("checkbox vide");
				markeropa.setOpacity(1);
			};
 
	}
 
$(function () {
 
// Initialisation et chargement de la Map
	mymap = L.map('mapid', {
				crs: L.CRS.Simple,
				minZoom : -1,
				maxZoom : 1
			});
 
	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).on('click', onMarkerClick).bindPopup('<input id="mapbox" value="test1" type="checkbox" /> Trouvé 1');
	L.marker([1000,1000], {icon: Rune, title: "2"}).addTo(mymap).on('click', onMarkerClick).bindPopup('<input id="mapbox" value="test2" type="checkbox" /> Trouvé 2');
	L.marker([1500,1500], {icon: Rune, title: "3"}).addTo(mymap).on('click', onMarkerClick).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;
			var checkboxstate = this.checked;
			$.cookie(checkboxname, checkboxValues, { expires: 3650, path: '/' });
            console.log("La checkbox est en etat : " + checkboxstate);
			markeropacity(checkboxstate);
		});
		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;
		markeropacity(checkboxstate);
		});
});

Voici le lien pour voir le fonctionnement du nouveau code : http://anthem.tmkfrench.fr/test.html

C'est une belle avancée dans ce que je voulais faire. Il me reste un soucis pourtant. quand je recharge la map. L'opacité des marqueurs est à nouveau normale. et il faut que je clique sur le marqueur pour que celui-ci voit son opacité changer si nécessaire (checkbox déjà cochée). N'y a-t-il pas moyen d'appeler la fonction onMarkerClick à la création du marker plutôt que d'attendre qu'on clique dessus ? cela résoudrai tous mes problèmes car je n'aurai qu'à mettre un .openPopup() a chaque marqueur forçant leur ouverture à leur création.

En tout cas merci d'avoir porté une attention à mon casse tête

Laurent.

[Loralina]

Bonsoir,

je n'aurai qu'à mettre un .openPopup() a chaque marqueur forçant leur ouverture à leur création.

L'ouverture des popups est-elle requise ?
Parce que sinon, on peut faire une petite initialisation dans ce style :

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
$.cookie.json=true;
var markers=[
	L.marker([500,500], {icon: Rune, title: "1"}).addTo(mymap).on('click', onMarkerClick).bindPopup('<input id="mapbox" value="test1" type="checkbox" /> Trouvé 1'),
	L.marker([1000,1000], {icon: Rune, title: "2"}).addTo(mymap).on('click', onMarkerClick).bindPopup('<input id="mapbox" value="test2" type="checkbox" /> Trouvé 2'),
	L.marker([1500,1500], {icon: Rune, title: "3"}).addTo(mymap).on('click', onMarkerClick).bindPopup('<input id="mapbox" value="test3" type="checkbox" /> Trouvé 3')];
var ob_;
var i=markers.length;
while(--i>=0)
	{
	if((ob_=$.cookie("chkboxtest"+(i+1))) && ob_.mapbox===true)
		{
		markeropa=markers[i];
		markeropacity(true);
		}
	}

C'est plus du dépannage qu'une solution vraiment propre.

[TMKFrench]

Merci Loralina,

Cette méthode fonctionne parfaitement.

Comme sur la vrai map, j'ai à peu près 300 marqueurs divisés en plusieurs catégories, j'ai crée une fonction à part que j'appelle à la fin de chaque bloc de marqueurs en injectant, le nom de la variable du bloc et le nom du cookie à utiliser pour ce bloc.

Ainsi je peux rajouter des marqueurs sans problème et tout est bien géré.

Je te laisse voir comment j'ai utilisé ton code sur la page de test et le resultat final ici : http://anthem.tmkfrench.fr

Merci de ton aide car cela m'a permis de mettre en place un fonction plus qu'agréable pour tous les utilisateur de ma map.

Bien évidement je t'ai cité dans les remerciements, ce qui est peu de chose.

Je laisse ce post en non résolu car j'ai une idée en tête que je vais tacher de mettre au point. Si je n'y arrive pas, Je te l'expliquerai ici. Ca reste dans la continuité de tout ce qui a été traité ici.

Encore merci.

[TMKFrench]

Bon j'ai reussi à mettre au point mon idée, à savoir un bouton de reset des marqueurs.

Pour cela, j'ai rajouté dans ta fonction, deux commandes push qui me crée deux array dans des variable globale stockant ainsi les types de cookies (runes, coffres, etc...) et le nombre de marqueurs de chaque type.

J'ai ensuite crée une fonction qui traite en boucle ces array pour effacer tous les cookies.

Tu peux voir son fonctionnement ici : http://anthem.tmkfrench.fr/test.html.

J'ai une dernière question : est-il possible de crée un fichier texte pour exporter/importer la liste des cookies ? cela permettrai aux personnes utilisant ma carte sur plusieurs appareils de se passer la liste des points déjà validés.