You are not logged in.

Announcement

*** NOTICE: forum.openstreetmap.org is being retired. Please request a category for your community in the new ones as soon as possible using this process, which will allow you to propose your community moderators.
Please create new topics on the new site at community.openstreetmap.org. We expect the migration of data will take a few weeks, you can follow its progress here.***

Pages: 1

#1 2016-11-15 21:54:04

Wegabschneider
Member
From: Palatina
Registered: 2010-02-07
Posts: 287

leaflet Anlaufschwierigkeiten mit controls

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>

Offline

#2 2016-11-15 22:28:09

dooley
Member
From: Landkreis Calw
Registered: 2013-11-04
Posts: 899

Re: leaflet Anlaufschwierigkeiten mit controls

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

Zum Zustand des deutschen Forums vom geschätzten Netzwolf auch "Pamphlet" genannt
Mein Avatar ist ein Ausschnitt aus "Die Saporoger Kosaken schreiben dem türkischen Sultan einen Brief" (Ilja Repin, gemeinfrei)

Offline

#3 2016-11-16 07:13:09

Wegabschneider
Member
From: Palatina
Registered: 2010-02-07
Posts: 287

Re: leaflet Anlaufschwierigkeiten mit controls

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

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

Offline

#4 2016-11-16 08:59:49

gormo
Member
Registered: 2013-08-01
Posts: 2,119
Website

Re: leaflet Anlaufschwierigkeiten mit controls

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.

Last edited by gormo (2016-11-16 09:01:09)

OSM hat nicht das Ziel bis Ende des Monats einen vollständigen Datensatz der Welt zu enthalten.
(nach S.W.) - Aber weil die Welt vielfältig ist, weil sie auch im Detail interessant ist, mag ich genaue Karten (nach C.)

Offline

#5 2016-11-16 10:09:39

wambacher
Member
From: Schlangenbad/Wambach, Germany
Registered: 2009-12-16
Posts: 16,769
Website

Re: leaflet Anlaufschwierigkeiten mit controls

gormo wrote:

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

Genau:
tn_test_error.png

Gruss
walter

Osm Software Watchlist  Osm Emergency Map
Osm Healthcare Map

Offline

#6 2016-11-16 11:59:55

Wegabschneider
Member
From: Palatina
Registered: 2010-02-07
Posts: 287

Re: leaflet Anlaufschwierigkeiten mit controls

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

Offline

Pages: 1

Board footer

Powered by FluxBB