leaflet Anlaufschwierigkeiten mit controls

Communities Deutschland (Germany)
1

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>
2

Du legst einfach wie “Quellen” neue Layergroups an und fügst diese deinem Objekt “overlays” zu.

  var Quellen = new L.LayerGroup();
  var Seemonster = new L.LayerGroup();
  ...
  var overlays = {
    "Quellen": Quellen, 
    "Meine Seemonster" : Seemonster
  };
3

Hab ich so gemacht. Huette an 4 Stellen eingefügt, bei new L.LayerGroup, marker, bei layers und overlays. Klappt nicht, Browerfenster bleibt leer. :frowning:

<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 Huette = new L.LayerGroup();
  
  L.marker([49.33261, 8.09476]).bindPopup('Hütte').addTo(Huette);
  
  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, Huette]
	});

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

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

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



</body>
</html>
4

Kennst du die Javascript-Konsole, die du mit “F12” aufrufen kannst? Da kriegst du dann auch potenziell aussagekräftige Fehlermeldungen her.

Du hast zum Beispiel hier

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

einen Syntaxfehler: nach dem Eintrag für Quellen fehlt ein Komma am Ende der Zeile.

5

Genau:

Gruss
walter

6

Danke Leute! Der Tipp ist klasse.

Dieses Komma war ein Zeitfresser für mich, hätte es sehen können/müssen. Dafür habe ich andere Fehler bemerkt …