Leaflet und die Markers

Leaflet und die Markers · aighes (Gast) · 09.07.2012 22:18 · [flux]

Hallo,
ich habe gerade die Karte auf meiner Website von Openlayers auf Leaflet umgestellt. Dabei wird eine gpx-Datei auf einer Karte angezeigt. Dazu bekam der erste Punkt und der Letzte einen Marker. Die Koordinaten sind bekannt, nur ich bringe es nicht zustande, einfach nur einen simplen Marker zu erstellen, ohne eine PopUp-Funktion etc. Schön wäre, wenn die beiden Marker in einem layer landen würden, sodass sie gemeinsam (de-)aktiviert werden können.

Hat das hier schonmal jemand vollbracht?

Re: Leaflet und die Markers · g0ldfish (Gast) · 22.11.2012 16:09 · [flux]
Ich überlege auch gerade, einiges auf Leaflet umzustellen, und wühle deshalb in alten Threads herum. Scheinen einfach noch nicht so viele zu benutzen, wenn dein Post damals ohne Antwort geblieben ist.

Das Problem kann ich nicht so richtig nachvollziehen, bei mir bleiben alle Marker Popup-frei, solange ich nicht explizit bindPopup benutze. War das bei dir anders? Und wenn ja, was stand denn in den Popups drin, gar nichts?
```
var␣markerLayer␣=␣L.layerGroup();
```
```
var␣marker1␣=␣L.marker([lat1,␣lon1]).addTo(markerLayer);
var␣marker2␣=␣L.marker([lat2,␣lon2]).bindPopup("Some␣text.").addTo(markerLayer);
var␣marker3␣=␣L.marker([lat3,␣lon3]).addTo(markerLayer);
```
```
var␣overlayMaps␣=␣{
"Marker":␣markerLayer
};
```
```
L.control.layers(null,␣overlayMaps).addTo(map);
```

Re: Leaflet und die Markers · aighes (Gast) · 22.11.2012 16:53 · [flux]

Hallo,
danke für den Hinweis. Ich hatte das Projekt Marker sichtbar bekommen schon aufgegeben. 😉

Hier noch der vollständige Code für Karte, Track und Marker.

var␣mapquest_osm␣=␣new␣L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",␣{maxZoom:␣18,␣minZoom:␣1,␣attribution:␣"&copy;␣2012␣MapQuest␣-␣Map␣data␣&copy;␣<a␣href=\"http://www.openstreetmap.org/\"␣target=\"_blank\">OpenStreetMap</a>␣and␣contributors,␣<a␣href=\"http://opendatacommons.org/licenses/odbl/\"␣target=\"_blank\">ODbL</a>",␣subdomains:␣["otile1","otile2","otile3","otile4"]});
var␣mapnik_osm␣=␣new␣L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",␣{maxZoom:␣18,␣minZoom:␣1,␣attribution:␣"Map:␣&copy;␣2012␣<a␣href=\"http://www.openstreetmap.org/copyright\"␣target=\"_blank\"␣style=\"\">OpenStreetMap</a>␣contributors"});
var␣hikebike␣=␣new␣L.TileLayer("http://toolserver.org/tiles/hikebike//{z}/{x}/{y}.png",␣{maxZoom:␣18,␣minZoom:␣1,␣attribution:␣"<a␣href=\"http://hikebikemap.de\"␣target=\"_blank\"␣style=\"\">HikeBikeMap.de</a>␣Map␣data␣&copy;␣<a␣href=\"http://www.openstreetmap.org/copyright\"␣target=\"_blank\"␣style=\"\">OpenStreetMap</a>␣contributors"});

var␣track␣=␣new␣L.GPX("track.gpx",␣{async:␣true}).on("loaded",␣function(e)␣{␣map.fitBounds(e.target.getBounds());␣});

var␣LeafIcon␣=␣L.Icon.extend({options:␣{iconSize:␣[16,␣28],␣iconAnchor:␣[0,␣28]}});
var␣startIcon␣=␣new␣LeafIcon({iconUrl:␣"pin_start.png"}),␣zielIcon␣=␣new␣LeafIcon({iconUrl:␣"pin_ziel.png"});

var␣markerLayer␣=␣L.layerGroup();
var␣marker1␣=␣L.marker([lat1,␣lon1],␣{icon:␣startIcon}).addTo(markerLayer);
var␣marker2␣=␣L.marker([lat2,␣lon2],␣{icon:␣zielIcon}).addTo(markerLayer);

var␣map␣=␣new␣L.Map('map',␣{center:␣new␣L.LatLng(50,␣10),␣zoom:␣5,␣layers:[hikebike,␣track,␣markerLayer]});

map.addControl(new␣L.Control.Scale());
map.addControl(new␣L.Control.Layers({"HikeBikeMap":hikebike,␣"MapQuest␣Open":mapquest_osm,␣"Mapnik":mapnik_osm},␣{"GPX-Track":track,␣"Marker":markerLayer}));