Leaflet und die Markers

aighes · 2012-07-09T21:18:31.000Z

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?

g0ldfish · 2012-11-22T15:09:05.000Z

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);

aighes · 2012-11-22T15:53:06.000Z

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}));