Leaflet problème de marker sur ma carte

Eric

unread,

Jun 15, 2015, 1:12:27 PM6/15/15

to leafl...@googlegroups.com

Bonsoir,

j'ai un soucis avec mon script. Il s'agit d'une carte avec un tracé et un marker au départ, un marker à l'arrivée. Mais les markers ne s'affichent pas. Et les pop up ne fonctionnent pas non plus. J'ai du oublier quelque chose dans le code. Mais je ne vois pas quoi. Si vous pouvez m'aider c'est sympa !

Merci d'avance

Eric

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>carte</title>

</head>

#map {

position:absolute; top:0; bottom:0; left:0; right:0; width:100%;

}

.leaflet-bar {

border: 1px solid rgba(0,0,0,0.2);

background-clip: padding-box;

border-radius: 3px;

box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

}

.leaflet-bar a:first-child {

border-top-left-radius: 2px;

border-top-right-radius: 2px;

}

.leaflet-bar a:last-child {

border-bottom-left-radius: 2px;

border-bottom-right-radius: 2px;

border-bottom: none;

}

.leaflet-touch .leaflet-bar {

border: 1px solid rgba(0,0,0,0.2);

background-clip: padding-box;

border-radius: 3px;

}

.leaflet-popup-content-wrapper {

padding: 1px;

text-align: left;

border-radius: 4px;

background: #fff;

margin-bottom: -1px;

box-shadow: 0 1px 2px rgba(0,0,0,0.20);

}

.leaflet-popup-tip {

width: 13px;

height: 13px;

padding: 1px;

margin: -10px auto -1px;

box-shadow: 0 1px 2px rgba(0,0,0,0.20);

}

.legend {

width:auto;

text-align: left;

line-height: 18px;

position:absolute;

bottom: 10px;

right: 10px;

text-align: left;

line-height: 18px;

color: #555;

background: rgb(255, 255, 255);

background: rgba(255, 255, 255, 1);

background-clip: padding-box;

border-color: #777;

border: 1px solid rgba(0,0,0,0.2);

border-radius: 4px;

}

.legend i {

width: 18px;

height: 18px;

float: left;

margin-right: 8px;

opacity: 0.8;

}

.menu {

background-color: #e5e5e5;

position: absolute;

padding: 5px 5px 5px 5px;

bottom: 8px;

margin-left: -600px;

}

.leaflet-clickable {

fill:none;

stroke:black;

stroke-width:3px;

stroke-opacity:0.8; }

.lime-theme .leaflet-control.elevation .background {

background-color: rgba(255,255,255,1);

-webkit-border-radius:4px;

-moz-border-radius:4px;

-ms-border-radius:4px;

-o-border-radius:4px;

border-radius:4px;

border: 1px solid rgba(0,0,0,0.3);

}

.lime-theme .leaflet-control.elevation .axis line,.lime-theme .leaflet-control.elevation .axis path{fill:none;

stroke:#000000;

stroke-width:2}

.lime-theme .leaflet-control.elevation .area

{fill:#ffbf00}

.lime-theme .leaflet-control.elevation .mouse-focus-line

{pointer-events:none;

stroke-width:1;

stroke:red}

.lime-theme .leaflet-control.elevation .elevation-toggle

{cursor:pointer;

-webkit-border-radius:5px;

border-radius:5px;

width:36px;

height:36px;

background:url(elevation.png) no-repeat center center #f8f8f9}

.lime-theme .leaflet-control.elevation-collapsed .background{display:none}

.lime-theme .leaflet-control.elevation-collapsed .elevation-toggle{display:block}

.lime-theme .leaflet-control.elevation .mouse-drag

{fill:rgba(99,126,11,.4)}

.lime-theme .leaflet-overlay-pane .height-focus

{stroke:#ffbf00;

fill:#ffbf00}

.lime-theme .leaflet-overlay-pane .height-focus.line

{pointer-events:none;

stroke-width:2}

</style>

</head>

<body>

var map = new L.Map('map', {

center: new L.LatLng(43,-0.05),

zoom: 10,

maxZoom: 14,

minZoom: 6,

});

var url = 'http://{s}.tiles.mapbox.com/v3/aj.hdxfoq7i/{z}/{x}/{y}.png',

attr ='<a href="http://www.francebleu.fr/">francebleu.fr</A> | Tuiles <a href="http://www.mapbox.com/">Mapbox</a> - Données carto. © <a href="http://openstreetmap.org">OpenStreetMap</a> contrib., <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',

service = new L.TileLayer(url, {detectRetina:true});

var el = L.control.elevation({

position: "bottomright",

theme: "lime-theme", //default: lime-theme

width: 600,

height: 155,

margins: {

top: 20,

right: 30,

bottom: 30,

left: 50

},

useHeightIndicator: true

});

el.addTo(map);

var g=new L.GPX("demo.gpx", {

async: true,

});

g.on('loaded', function(e) {

map.fitBounds(e.target.getBounds());

});

g.on("addline",function(e){

el.addData(e.line);

});

g.addTo(map);

map.addLayer(service);

var LeafIcon = L.Icon.extend({

options: {

iconSize: [25, 41],

iconAnchor: [12, 41],

popupAnchor: [0, -38]

}

});

var greenIcon = new LeafIcon({iconUrl: 'marker-vert.png'}),

redIcon = new LeafIcon({iconUrl:'marker-rouge.png'});

L.marker([0.153422,49.004504], {icon: greenIcon}).addTo(map).bindPopup('<strong>Départ</Strong>');

L.marker([48.34314,84.89682], {icon: redIcon}).addTo(map).bindPopup('<strong>Arrivée</Strong>');

</script>

</body>

</html>

ba...@redbird.fr

unread,

Jun 16, 2015, 3:39:21 AM6/16/15

to leafl...@googlegroups.com

Bonjour,

Est-ce que la console Javascript de votre navigateur affiche une erreur ? Si oui laquelle ?

Cela peut venir du chemin vers l'icone "new LeafIcon({iconUrl: 'marker-vert.png'})", marker-vert.png est-il bien dans le même répertoire que votre page ?

De plus les coordonnées du deuxième marker ne semblent pas corrects.

Bonne journée

ba...@redbird.fr

unread,

Jun 16, 2015, 9:47:34 AM6/16/15

to leafl...@googlegroups.com

Bonjour,

Vos icônes s'affichent bien, exécuter les lignes suivantes pour les retrouver :

map.setView(L.latLng([0.153422,49.004504]));
map.setView(L.latLng([48.34314,84.89682]));

Dans le premier cas vous avez inversé la latitude et la longitude en créant le marker.

Dans le deuxième les coordonnées ne correspondent pas au GPX. Le système utilisé par Leaflet est WGS84 peut être l'erreur vient de là. A moins que l'arrivée soit au Kazakhstan https://www.google.fr/maps/@48.34314,84.89682,8z ;)

Bon courage

Eric

unread,

Jun 16, 2015, 9:57:04 AM6/16/15

to leafl...@googlegroups.com

J'ai corrigé les coordonnées... effectivement je m'étais trompé pour le 2e marker. Mais ce sont toujours les markers par défaut qui s'affichent et pas de popup bien que j'ai ajouté les lignes ci dessous.

map.setView(L.latLng([0.153422,49.004504]));
map.setView(L.latLng([48.34314,84.89682]));

Compliqué... ☺

ba...@redbird.fr

unread,

Jun 16, 2015, 10:05:15 AM6/16/15

to leafl...@googlegroups.com

Les bonnes lignes sont :

L.marker([49.004504,0.153422], {icon: greenIcon}).addTo(map).bindPopup('<strong>D&eacute;part</Strong>');
L.marker([48.34294,-1.19644], {icon: redIcon}).addTo(map).bindPopup('<strong>Arriv&eacute;e</Strong>');

et non :

L.marker([0.153422,49.004504], {icon: greenIcon}).addTo(map).bindPopup('<strong>Départ</Strong>');

L.marker([-1.19644,48.34294], {icon: redIcon}).addTo(map).bindPopup('<strong>Arriv&eacute;e</Strong>');

La seule différence se situe dans l'ordre des coordonnées : la latitude d'abord, la longitude ensuite. Les deux lignes que je vous ai données toute à l'heure ne servaient qu'à centrer la carte sur vos markers, qui sont bien présent mais pas au bon endroit.

N'hésitez pas à regarder la documentation de Leaflet (http://leafletjs.com/reference.html) si vous avez un doute sur une fonction, elle est plutôt bien faite.

On Monday, June 15, 2015 at 7:12:27 PM UTC+2, Eric wrote:

Reply all

Reply to author

Forward