Changer la couleur d"un marqueur

**d3LTa7** · 30/03/2021, 12h32

Bonjour

Avant de venir ici poser la question du changement de couleur de marqueur j'ai bien évidement regardé sur le net mais je ne comprend certaines choses en faite surtout sur la doc de Leaflet...

Déjà je voulais simplement changer la couleur du marqueur d'origine et non le changer mais je crois comprendre que ce n'est pas possible....

Partons sur le changement, sur la doc ils disent :

Code :

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

1
2
3
4
5
6
7
8
9
10
var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',
 
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

Sauf qu'il y a une étape que je ne comprend pas... qu'elles sont ces png ? est ce qu'il y a une taille max pour que ca soit pris en compte ? et ou doivent elles être stocké ? J'ai essayé d'en mettre à la racine de mon projet, au même niveau que mon script.js mais je n'ai aucun résultat... soit j'ai toujours le marqueur de Leaflet soit je n'ai tout simplement aucun marqueur :

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
 
function addCoor(deno, nom, long, lat){
    var map = L.map('mapid').setView([lat, long], 13);
 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
var redIcon = L.icon({
        inconUrl:'red5.png',
        iconSize:     [38, 95], 
        iconAnchor:   [22, 94], 
        popupAnchor:  [-3, -76]
    });
    if(deno == null){
        L.marker([lat, long], {icon: redIcon}).addTo(map)
        .bindPopup(nom)
        .openPopup();
    }else{
        L.marker([lat, long]).addTo(map)
        .bindPopup(deno)
        .openPopup();
    }
}

Après j'ai cru lire aussi qu'il fallait ajouter des extensions mais la ils m'ont complètement perdu parce que j'ai peur de ne pas savoir faire ce genre de manip...

Donc merci d'avance de m'éclairer sur ce sujet

**mathieu** · 30/03/2021, 13h01

il y a un exemple là avec des images personnalisées :
https://leafletjs.com/examples/custom-icons/
le chemin de l'image est un chemin relatif à l'URL où est affiché le plan mais vous pouvez aussi mettre un URL absolu.

**d3LTa7** · 30/03/2021, 13h26

C'est sur cette même page que j'ai pris mon exemple et c'est cette même page que je ne comprend pas finalement....

"le chemin de l'image est un chemin relatif à l'URL où est affiché le plan mais vous pouvez aussi mettre un URL absolu."
J'ai peur de ne pas comprendre... Moi j'aimerais juste changer ce pointeur... Donc pour changer le pointeur ca passe par l'url ? Mais les png sont bien quelques part ?

**mathieu** · 30/03/2021, 13h45

un URL relatif ça veut dire que si votre plan est à l'adresse "https://....../plans/travaux/test1.php" et que vous indiquez pour l'image "icone1.png" alors l'image sera cherchée à l'URL "https://....../plans/travaux/icone1.png".
ça donne les correspondances suivantes :

"icone1.png" -> "https://....../plans/travaux/icone1.png"
"images/icone1.png" -> "https://....../plans/travaux/images/icone1.png"
"../images_globales/icone1.png" -> "https://....../plans/images_globales/icone1.png"

et donc cela se réfère à une image que vous avez placée vous même sur un de vos hébergements.

ensuite pour voir quel URL est utilisé, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

**d3LTa7** · 30/03/2021, 14h27

Dans mon cas je travail en locale pour le moment et quand je lance une requête pour avoir la carte Leaflet avec le pointeur j'ai "http://localhost/monsite/index.php"
Et donc, en suivant mon code, pour avoir mon pointeur je doit avoir "http://localhost/monsite/red5.png" ?

Je comprend pas....

**mathieu** · 30/03/2021, 14h31

oui c'est ça. vous mettez l'image dans le répertoire "monsite" et ensuite dans le code vous indiquez "red5.png".

**d3LTa7** · 30/03/2021, 15h15

Alors oui effectivement quand je met l'image dans le dossier mon site et que je tape localhost/monsite/red5.png j'ai bien mon image...
Sauf que c'est pas ca que je demande !!
Je veux utiliser ce png sur leaflet et donc sur ma requete...
Ou alors je comprend pas

**mathieu** · 30/03/2021, 15h31

Envoyé par mathieu

et ensuite dans le code vous indiquez "red5.png".

je parlais du code javascript qui affiche le plan.

**d3LTa7** · 30/03/2021, 15h44

Mais je l'ai déjà mis dans mon code JS dans la fonction "addCoor"
J'ai bien le png dans le dossier "monsite"
et j'ai bien créé la variable "redIcon" qui fait appelle à ce png !

Alors attention ! Il faut savoir que la fonction addCoor est appelé dans une requête AJAX vers un fichier PHP qui lui même fait la requête vers une API !! Je sais pas si ça change beaucoup la donne..