Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Suite à un problème technique intervenu entre le 22 et le 23 mars, nous avons du procéder dans la soirée du 25 mars, à la restauration de la base de données du 24 mars (matinée).

En clair, nous avons perdu vos contributions et inscriptions du dimanche 24 et du lundi 25 mars.
Nous vous prions de nous excuser.

#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. smile

Hors ligne

 

#2 Thu 01 September 2016 12:14

nworr
Participant actif
Date d'inscription: 10 Apr 2014
Messages: 74

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: 74

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 sad

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

 

Pied de page des forums

Powered by FluxBB