x

leaflet Anlaufschwierigkeiten mit controls

Geschrieben von Wegabschneider (Gast) am 15. November 2016 21:54:04: [flux]

Nun weiß ich nicht mehr weiter. Ich lese die docs auf http://leafletjs.com. Und hangele mich so durch. Bei anderen Seiten kuck ich auch. Die Datei ist lokal gespeichert.

Die baseLayers reichen. Nun möchte ich weitere Checkboxen hinzufügen, bsw. Denkmale, Hütten, ...
Erstelle ich eine weitere var xxx = new L.LayerGroup(); oder was muss ich machen? Mach ich das und ergänze die anderen Stellen (var overlays usw.), klappt das nicht.

<html>
<head>
<title>Uebungs␣Projekt</title>
<link␣rel="stylesheet"␣href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css"␣/>
<script␣src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<style>
#map{␣width:␣900px;␣height:␣500px;␣}
</style>
</head>
<body>

<div␣id="map"></div>

<script>
//--␣Gruppe␣der␣Quellen
var␣Quellen␣=␣new␣L.LayerGroup();

L.marker([49.33824,␣8.10516]).bindPopup('Quelle␣1').addTo(Quellen),
L.marker([49.33446,␣8.0983]).bindPopup('Quelle␣2').addTo(Quellen);

var␣Attr␣=␣'Map␣data␣&copy;␣<a␣href="http://openstreetmap.org">OpenStreetMap</a>␣contributors,␣'␣+
'<a␣href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
var␣OSMUrl␣=␣'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var␣OTopo␣=␣'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';

var␣Openstreetmap␣␣␣=␣L.tileLayer(OSMUrl,␣{attribution:␣Attr}),
Opentopomap␣␣=␣L.tileLayer(OTopo,␣{attribution:␣Attr});

var␣map␣=␣L.map('map',␣{
center:␣[49.34,␣8.12],
zoom:␣13,
layers:␣[Openstreetmap,␣Quellen]
});

var␣baseLayers␣=␣{
"Openstreetmap":␣Openstreetmap,
"Opentopomap":␣Opentopomap
};

var␣overlays␣=␣{
"Quellen":␣Quellen
};

L.control.layers(baseLayers,␣overlays).addTo(map);
</script>

</body>
</html>

Antworten: