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);
});
}); |
Changer l'opacité d'un marker en fonction de l'état d'une checkbox
Répondre avec citation
Envoyé par TMKFrench
. J'avoue qu'il aurai pu faire un effort au niveau intégration. En cherchant un peu j'ai trouvé comment l'appeler via un bouton externe (ici une image), et je l'ai caché avec un display:none.
Partager