Discussion :

[DavidWebSolution]

Bonjour.

J'utilise une extension sur mon blog wordpress qui m'affiche une carte avec des markers.
J'ai 4 types de markers et j'aimerais faire en sorte que l'un des 4 soit toujours au-dessus des autres (si j'ai plein de markers sur une même ville, ils vont s'empiler les uns sur les autres).
Le z-index est automatiquement géré par l'extension.
Voici le code html d'un marker :

Code html :

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

<img class="leaflet-marker-icon lmm_marker_icon_marker-shop leaflet-clickable leaflet-zoom-animated" src="http://blog.vitaliform.fr/wp-content/uploads/leaflet-maps-marker-icons/marker-shop.png" style="margin-left: -17px; margin-top: -36px; width: 32px; height: 37px; transform: translate(95px, -1138px); z-index: -1138;" title="LE CLUB MATE SPOT">

J'aimerais que ce z-index prenne la valeur de 1000 par exemple.
J'aimerais créer une fonction js en utilisant jquery par exemple, qui me cherche tous les markers ayant la class "lmm_marker_icon_marker-shop"
et que pour tous ces markers, le z-index soit mis à 1000.

Voici la page en question, si mes explications ne sont pas claires :
http://blog.vitaliform.fr/#section-nous-trouver
Je veux que le marker rouge soit toujours au-dessus des autres.

Comment faire cela ?

[Watilin]

Tu joues sur la propriété style, ça va mettre à jour l'apparence de l'élément et son attribut html style réflètera la modification.
Exemple :

Code :

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

monImage.style.zIndex = "1000";

Comme les propriétés CSS contiennent des traits d'union (-) qui sont interprétés comme l'opérateur de soustraction en JavaScript. Pour remédier à ce problème les noms sont « camelizés » : toute lettre qui suit un trait d'union est transformée en majuscule et le signe moins est retiré.

Avec jQuery, tu as la méthode .css() qui est plus sympa car elle accepte les deux formes :

Code :

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

1
2
$("#monImage").css("z-index", "1000");
$("#monImage").css({ zIndex: "1000" });

Sauce : http://api.jquery.com/css/#css2

[DavidWebSolution]

Oui, c'est ce que j'ai fait.
Après, le problème est que lorsque je cliques sur le zoom de la carte, par exemple, ma fonction sera écrasée par celle de la carte qui va à nouveau me mettre en dur un z-index.
J'ai mis ça comme fonctions :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.lmm_marker_icon_marker-shop').css({
		'z-index' : '100000'
	});
	$('.leaflet-control-zoom-in').click(function(){
		$('.lmm_marker_icon_marker-shop').css({
		'z-index' : '100000'
		});
	});
	$('.leaflet-control-zoom-out').click(function(){
		$('.lmm_marker_icon_marker-shop').css({
		'z-index' : '100000'
		});
	});

Alors si la page se charge, ça fonctionne. Quand je zoome, pendant 1/2 secondes mon marker est bien sur les autres mais juste après, la fonction qui gère la carte me rajoute un z-index.
Comment contourner ça ?

[Watilin]

Hmm faut que tu fouilles dans la doc de MapsMarker, ils doivent fournir un moyen d'ajuster les styles lors des mises à jour de l'affichage. Je ne connais pas cette API donc je ne peux pas beaucoup t'aider, désolé.

[NoSmoking]

Bonjour,
il t'appartient de spécifier un zIndexOffset pour tes marqueurs si non par défaut leur zIndexOffset est basé sur leur latitude, en fait leur position en y sur la carte.
http://leafletjs.com/reference.html#marker

[DavidWebSolution]

Oui, ce serait super si je les ajoutais manuellement. Mais c'est le script du module https://wordpress.org/plugins/leaflet-maps-marker/
qui gère ça. Et comme le js a été minifié, c'est un peu compliqué à comprendre quoi que ce soit.

[NoSmoking]

Sans modifier le code du plugin, tu ne peux même pas ajouter dans ta page un truc du style

Code :

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

1
2
3
4
5
var map = new L.Map('map', {
  center: new L.latLng([48.868948, 2.357508]),
  zIndexOffset: 100000
});
map.addLayer(marker);