#1 Thu 01 September 2016 12:03
- mlt
- Participant actif
- Date d'inscription: 14 Oct 2015
- Messages: 59
marqueur leaflet
Bonjour,
J'ai fait une carte avec des marqueur de type:
Code:
L.marker([44.3,5.8], {icon: icon_yellow}).bindPopup("<h6>test</h6> <p>13,4</p>").addTo(map)
Le problème qui se présente, c'est que quand on dézoom, la pointe du marqueur, n'indique pas le bon point.
Exemple: j'ai des marqueurs sur le littoral de la région PACA. Quand je dézoom, mes marqueurs pointent dans la mer, alors que si je zoom au max, il indique le bon point.
Quelqu'un a une idée du problème ?
Merci.
Hors ligne
#2 Thu 01 September 2016 12:14
- nworr
- Participant actif
- Date d'inscription: 10 Apr 2014
- Messages: 77
Re: marqueur leaflet
A priori je pencherai pour un problème d'ancrage du marker (l'icone s'aligne sur son centre alors que le cas présent il serait préférable qu'elle s'aligne sur la pointe)
En jouant sur les paramètres iconSize et iconAnchor ça doit pouvoir se résoudre ( cf http://leafletjs.com/reference.html#icon)
Hors ligne
#3 Thu 01 September 2016 12:25
- mlt
- Participant actif
- Date d'inscription: 14 Oct 2015
- Messages: 59
Re: marqueur leaflet
Merci pour la réponse. Je vais regarder ces paramètres. Il y a des codes sur internet qui ne rajoutent rien de plus, et qui marche très bien...
Voici un de mes codes qui a le problème.
Code:
<!DOCTYPE html> <html> <head> <title>Validation</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" /> </head> <body> <div id="map" style="width:100%;height:700px;"> </body> </html> <script> var icon_orange = new L.icon({ iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-icon.png' }); var station = new L.featureGroup(); latitude = 43.65; longitude = 4.78; var map = L.map('map', {maxZoom: 19, minZoom:7}).setView([latitude, longitude], 8); var fond= L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map); L.marker([43.44063128,5.22611257], {icon: icon_orange}).bindPopup("<h6>test</h6> <p>17,1</p>").addTo(station); station.addTo(map); </script>
Dernière modification par mlt (Thu 01 September 2016 12:27)
Hors ligne
#4 Thu 01 September 2016 13:26
- nworr
- Participant actif
- Date d'inscription: 10 Apr 2014
- Messages: 77
Re: marqueur leaflet
en définissant iconsize avec la taille 24*41 et l'accroche au centre bas (12,41) le marqueur reste bien positionné lors du dézoom
Code:
var icon_orange = new L.icon({ iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-icon.png', iconSize: [25, 41], iconAnchor: [12, 41], });
Hors ligne
#5 Thu 01 September 2016 13:39
- mlt
- Participant actif
- Date d'inscription: 14 Oct 2015
- Messages: 59
Re: marqueur leaflet
Merci beaucoup.
Je pouvais chercher longtemps, les paramètres, je les testé sur L.marker au lieu de L.icon
Dernière modification par mlt (Thu 01 September 2016 13:39)
Hors ligne
#6 Thu 01 September 2016 16:38
- mlt
- Participant actif
- Date d'inscription: 14 Oct 2015
- Messages: 59
Re: marqueur leaflet
J'avais un problème avec mes popup mais je l'ai résolu avec popupAnchor
Dernière modification par mlt (Thu 01 September 2016 16:43)
Hors ligne