Eigene Karte für Spiel erstellen

TEL0000 · 2015-12-13 21:17:40

Also nochmal für alle. Die Datei enthielt über 4000 POIs. Das wird für Leaflet definitiv zu viel.

Im Prinzip sollen so ziemlich alle POIs die eine Großstadt so hat dargestellt werden.

Ich habe ihm dazu geraten alle POIs nicht nicht zwangsläufig anklickbar sein müssen zu rendern. Eventuell auch als extra Layer, falls man den ausblenden können soll.

Alle anderen POIs müssten selectiv einschaltbar sein. Vielleicht hat da ja noch jemand Ideen, wie man das relativ performant in Leaflet umsetzen kann.

SammysHP · 2015-12-13 21:36:42

Clustern und immer nur den aktuellen Ausschnitt laden.

TEL0000 · 2015-12-13 21:54:43

SammysHP wrote:

Clustern und immer nur den aktuellen Ausschnitt laden.

Ich hab schon mit dem MarkerCluster-Plugin rumgespielt. Das funktioniert auch ganz gut.

Clustern macht aber bei den POIs nicht viel Sinn. Allerdings läd das Plugin auch immer nur den aktuellen Ausschnitt, was schonmal viel hilft. Ich hab das jetzt erstmal so gemacht, dass ab Zoom 17 nicht mehr geclustert wird, und der Layer sich auch nur einschaltet wenn die Zoomstufe mindestens 17 ist. Das scheint auch schon eine ganz gute Lösung zu sein, allerdings gefällt mir das Ein- und Ausblenden des Layers via addLayer und removeLayer im "zoomend"-Event nicht so richtig.

wambacher · 2015-12-14 00:01:54

TEL0000 wrote:

allerdings gefällt mir das Ein- und Ausblenden des Layers via addLayer und removeLayer im "zoomend"-Event nicht so richtig.

Nimm bei der Layerdefinition die Optionen maxZoom und minZoom. Das sollte es eigentlich bringen.

Gruss
walter

Last edited by wambacher (2015-12-14 00:08:05)

TEL0000 · 2015-12-14 12:26:56

wambacher wrote:

TEL0000 wrote:
allerdings gefällt mir das Ein- und Ausblenden des Layers via addLayer und removeLayer im "zoomend"-Event nicht so richtig.
Nimm bei der Layerdefinition die Optionen maxZoom und minZoom. Das sollte es eigentlich bringen.

Ich dachte das geht nur bei Tile-Layern. Wenn das auch bei Markern geht, wo müsste ich das minZoom denn unterbringen?

wambacher · 2015-12-14 13:54:38

TEL0000 wrote:

Ich dachte das geht nur bei Tile-Layern. Wenn das auch bei Markern geht, wo müsste ich das minZoom denn unterbringen?

Mit Markern hab ich noch nie was in Leaflet gemacht - und das hier auch übersehen. Häng es doch einfach mal als Option mit dazu - wenn das geht.

Schick doch mal die Layer-Definition als Snip rüber, dann brauch ich nicht bei Null anzufangen.

EDIT: Aus den Beispielen von MarkerCluster:

var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
... Add more layers ...
map.addLayer(markers);

würde ich

var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map),{minZoom:xx,maxZoom:xx}));
... Add more layers ...
map.addLayer(markers);

machen. nagel mich jetzt nicht auf eine Klammer fest

Nachtrag: Mach ich in meinem Locator auch. Hier bei dem Adress-Layer als geoJson, das ab Zoom 15 aktiv wird. Sollte also überall gehen.

      var LY_Adresses = L.geoJson(null,{style:addr_style, minZoom:15});
      Overlays[4].layer = LY_Adresses;

Nicht an dem "null" stören, das wird später im Programm gefüllt.

----------------------------------------

richtig toll wäre es dagegen, wenn ein "totes" Layer garnicht im Layer-Control erscheinen würde, aber dynamische Layer-Controls hab ich noch nicht hinbekommen.

Last edited by wambacher (2015-12-14 14:33:28)

TEL0000 · 2015-12-14 14:29:26

Bei mir sieht das momentan so aus:

var Layer = L.markerClusterGroup({ disableClusteringAtZoom: 17 });
var marker = new L.Marker(markerLocation);
Layer.addLayer(marker);
map.addLayer(Layer);

Egal wo ich das hinzufüge, es will nicht funktionieren.

gormo · 2015-12-14 14:38:12

wambacher wrote:

TEL0000 wrote:
Ich dachte das geht nur bei Tile-Layern. Wenn das auch bei Markern geht, wo müsste ich das minZoom denn unterbringen?
Mit Markern hab ich noch nie was in Leaflet gemacht - und das hier auch übersehen. Häng es doch einfach mal als Option mit dazu - wenn das geht.

Wenn ich die Doku und meine Experimente richtig deute, dann geht minZoom und maxZoom nur bei tileLayer[1], nicht bei Vektorlayern.

[1] http://leafletjs.com/reference.html#tilelayer-options

Habt ihr euch wegen der Performance-Sachen auch mal http://leafletjs.com/reference.html#global angeguckt, speziell L_PREFER_CANVAS ? Könnte was bringen.

wambacher · 2015-12-14 14:40:06

TEL0000 wrote:

Egal wo ich das hinzufüge, es will nicht funktionieren.

var marker = new L.Marker(markerLocation, {
minZoom:17}
);

wäre für mich logisch. Kann aber sein, dass der Plugin da nicht mitmacht?

Last edited by wambacher (2015-12-14 14:40:37)

wambacher · 2015-12-14 14:49:17

Ansonsten hätte ich noch einen völlig anderen Ansatz für die "Spielerei":

Man könnte die 4000 POI in ein lokales Shape packen, dieses mit einem Spatialen Index versehen und dann als Layer hinzufügen.
Leaflet sollte Shapes können und "vernünftige" Programme nutzen den Spatialen Index um nur die sichtbaren Daten auszuwerten/auszugeben (QGIS macht das). Das könnte fast die Speed einer - hier total unnötigen - GIS-Datenbank erreichen.

Wenn man auf die paar "könnte & sollte" hinwegsieht, ist das sicher "ganz einfach"

Gruss
walter

TEL0000 · 2015-12-14 15:00:48

gormo wrote:

Habt ihr euch wegen der Performance-Sachen auch mal http://leafletjs.com/reference.html#global angeguckt, speziell L_PREFER_CANVAS ? Könnte was bringen.

Die Option kannte ich noch nicht. Ich kann aber auch kein Performance-Unterschied feststellen. Woran kann ich denn erkennen ob das überhaupt richtig funktioniert? Und ist das nicht eher für das Zeichnen von Polygonen gedacht? (e.g. many thousands of circle markers)

wambacher wrote:

var marker = new L.Marker(markerLocation, {
minZoom:17}
);
wäre für mich logisch. Kann aber sein, dass der Plugin da nicht mitmacht?

Das funktioniert leider weder mit noch ohne Plugin.

wambacher · 2015-12-14 15:08:50

TEL0000 wrote:

Das funktioniert leider weder mit noch ohne Plugin.

Jo, dann schieb mal bitte das Codestück ohne Plugin rüber.

TEL0000 · 2015-12-14 15:22:30

wambacher wrote:

Jo, dann schieb mal bitte das Codestück ohne Plugin rüber.

var Layer = new L.LayerGroup();
var marker = new L.Marker(markerLocation, { minZoom:17 });
Layer.addLayer(marker);
map.addLayer(Layer);

gormo · 2015-12-14 18:01:12

Ich hab einen Workaround:

 map.on('zoomend', function(event) {
 	if (map.getZoom() > 9) {
  if (!map.hasLayer(jsonLayer)){
    	map.addLayer(jsonLayer);
    }
  } else {
    map.removeLayer(jsonLayer);
  }
 });

TEL0000 · 2015-12-14 18:50:26

gormo wrote:

Ich hab einen Workaround:

 map.on('zoomend', function(event) {
 	if (map.getZoom() > 9) {
  if (!map.hasLayer(jsonLayer)){
    	map.addLayer(jsonLayer);
    }
  } else {
    map.removeLayer(jsonLayer);
  }
 });

Das war ja meine Ursprungsversion.

Das Problem ist:
1. Man muss bereits beim Laden der Marker noch eine Abfrage für jeden Layer einbauen ob er angezeigt werden soll oder nicht.
2. Wenn man den Layer für den Benutzer ein und ausschaltbar macht, dann kann derjenige den Layer in jeden Zoomlevel einschalten.

wambacher · 2015-12-14 21:39:59

TEL0000 wrote:

Das war ja meine Ursprungsversion.

Klaro

ich werde mich Morgen mal richtig dranmachen. Marker als Cluster brauche ich irgendwann auch. Leider funzt das Beispiel vom marker-clustering-realworld.10000.html bei mir noch nicht. Ganz am Anfang gleich L. not found.

https://osm.wno-edv-service.de/locator/ … .10000.jsp

Gruss
walter

Last edited by wambacher (2015-12-14 21:40:59)

TEL0000 · 2015-12-14 21:56:59

wambacher wrote:

Ganz am Anfang gleich L. not found.
https://osm.wno-edv-service.de/locator/ … .10000.jsp

Kein Wunder. Die leaflet.js wird nicht geladen. (Failed to load resource: net::ERR_INSECURE_RESPONSE)
Chrome meint das Serverzertifikat von https://cdn.leafletjs.com/ stimmt nicht mit der URL überein.

wambacher · 2015-12-14 23:49:54

TEL0000 wrote:

wambacher wrote:
Ganz am Anfang gleich L. not found.
https://osm.wno-edv-service.de/locator/ … .10000.jsp
Kein Wunder. Die leaflet.js wird nicht geladen. (Failed to load resource: net::ERR_INSECURE_RESPONSE)
Chrome meint das Serverzertifikat von https://cdn.leafletjs.com/ stimmt nicht mit der URL überein.

Naja, FF motzte darüber net, es lief einfach nicht.

Habe mal die beiden leaflet-links ausgetausch und nehme jetzt die Remote-Links, die ich bei meinen anderen LL-Seiten auch verwende - und dieser Fehler ist weg. Nachher noch ein wenig mehr auf HTTPS umstellen und dann sollte das Teil laufen. Hab es halt 1 zu 1 von der Demosite kopiert.

Danke und Gruss
walter

EDIT: So, hab das Demoteil zum Laufen bekommen und mich nochmals reingekniet - und auch endlich die Doku gelesen: es geht nicht anders als ihr es schon macht. Dass das bei geoJson funzt, liegt daran, dass der Server entscheidet, was zu sehen ist und nicht etwa Leaflet.

Last edited by wambacher (2015-12-15 01:49:49)

gormo · 2015-12-15 08:57:14

wambacher wrote:

EDIT: So, hab das Demoteil zum Laufen bekommen und mich nochmals reingekniet - und auch endlich die Doku gelesen: es geht nicht anders als ihr es schon macht. Dass das bei geoJson funzt, liegt daran, dass der Server entscheidet, was zu sehen ist und nicht etwa Leaflet.

Puh, ich wollte schon an meiner geistigen Gesundheit zweifeln (also mehr als das Huhn auf meinem Kopf mir immer einredet ;-) ).

edit: Ich hab nochmal ein bisschen was für "Angeben mit leaflet": JSON per AJAX von github gist holen, und ein bisschen Styling auf JSON-Layern, und "Marker selektieren": http://jsfiddle.net/8p2o4qn6/6/

Last edited by gormo (2015-12-15 13:56:51)

Announcement

#151 2015-12-13 21:17:40

Re: Eigene Karte für Spiel erstellen

#152 2015-12-13 21:36:42

Re: Eigene Karte für Spiel erstellen

#153 2015-12-13 21:54:43

Re: Eigene Karte für Spiel erstellen

#154 2015-12-14 00:01:54

Re: Eigene Karte für Spiel erstellen

#155 2015-12-14 12:26:56

Re: Eigene Karte für Spiel erstellen

#156 2015-12-14 13:54:38

Re: Eigene Karte für Spiel erstellen

#157 2015-12-14 14:29:26

Re: Eigene Karte für Spiel erstellen

#158 2015-12-14 14:38:12

Re: Eigene Karte für Spiel erstellen

#159 2015-12-14 14:40:06

Re: Eigene Karte für Spiel erstellen

#160 2015-12-14 14:49:17

Re: Eigene Karte für Spiel erstellen

#161 2015-12-14 15:00:48

Re: Eigene Karte für Spiel erstellen

#162 2015-12-14 15:08:50

Re: Eigene Karte für Spiel erstellen

#163 2015-12-14 15:22:30

Re: Eigene Karte für Spiel erstellen

#164 2015-12-14 18:01:12

Re: Eigene Karte für Spiel erstellen

#165 2015-12-14 18:50:26

Re: Eigene Karte für Spiel erstellen

#166 2015-12-14 21:39:59

Re: Eigene Karte für Spiel erstellen

#167 2015-12-14 21:56:59

Re: Eigene Karte für Spiel erstellen

#168 2015-12-14 23:49:54

Re: Eigene Karte für Spiel erstellen

#169 2015-12-15 08:57:14

Re: Eigene Karte für Spiel erstellen

Board footer