Leaflet - Hilfe bei Permalink

Communities Deutschland (Germany)
1

Moin!

ich wollte jemanden bei einer Karte, die auf Leaflet-Basis arbeitet, helfen.

Vor längerer Zeit habe ich schon etwas mit OL2 gemacht - aber das ist auch schon etwas her …

Die Musterkarte liegt aktuell unter http://www.tappenbeck.net/osm/rettungspunkte/rest.html und der Hauptcode ist in der Datei http://www.tappenbeck.net/osm/rettungspunkte/js/app.js zu finden.

Das Beispiel mit dem ich versucht habe den Permalink zu übernehmen stammt aus: https://github.com/MarcChasse/leaflet.Permalink

Was sind derzeit die Probleme?

1.) Es wird mit der Startansicht begonnen, die aus dem Beispiel stammt

2.) Wird der Ausschnitt verschoben, dann ändert sich auch die URL - aber wenn ich diese in ein anderes Browserfenster übernehme, dann wird wieder in die Startansicht gewechselt.

Kann mir (uns) einer weiterhelfen?

Gruß Jan

2

Was passiert denn beim Aufruf der Permalink-URL nach der Darstellung des Kartenausschnitts aus der URL? Offensichtlich wird dann die Karte mit den Rettungspunkten komplett neu aufgebaut, als wäre nichts geschehen.

P.S.
Dir ist bewusst, dass ihr eine "Uralt"version von leaflet verwendet?

3

Erst einmal danke für die Rückmeldung.

Wie gesagt fast keine Ahnung.

Wenn es einfacher geht - sind wird dafür gerne zu haben.

Gruß Jan

4

Genau dasselbe habe ich gestern erst eingebaut (siehe den Viewpoint direction Thread): die Standard/Initialkoordinaten könnt ihr direkt in den ersten paar Zeilen der permalink.js ändern. Ansonsten habe ich alles genauso gemacht, wie in der Readme geschrieben steht und es funtzt. Wichtig ist definitiv permalink vor der eigenen map Initialisierung zu machen, bzw. Selbst gar keine zu machen.

5

Hallo Harald,

danke erst einmal.

Für die anderen der Link vom Harald: http://osm.haraldhartmann.de/direction/#50.62682,10.98804,13z

<script src="leaflet.js"></script>
		<script src="leaflet.permalink.js"></script>
		<script src="leaflet.semicircle.js"></script>

Sind das nur diese Dateien oder gehören da noch andere dazu?

Gruß Jan

6

Das ist natürlich die denkbar schlechteste Voraussetzung, sich mit solschen Dingen zu befassen. Aber zumindest den groben zeitlichen Ablauf sollte man sich vor Augen führen, anstatt wahllos Javascript-Code aneinander zu reihen.

Wie schon geschrieben, wird offensichtlich erst die Grundkarte mit dem vorgegebenen Ausschnitt dargestellt, dann aber die Daten geladen und als Overlay in der Startansicht angezeigt. Als erstes würde ich versuchen, die Reihenfolge zu ändern, also den Ausschnitt erst festzulegen, nachdem die Daten die Daten geladen sind.

7

hi!

Mit leaflet und der Rest beginnt irgendwo wieder in der hintersten Gedächnisstube.

Wenn ich mir das so ansehe, dann werde ich den Gedanken nicht los, als wenn das Laden der CSV-Daten mit einem Zoom-Grenzen auf die Objekte beendet wird und das auch nach einem erfolgreichen Kartenaufbau.

Der Kopf des Ladens müsste eigentlich passen.

Gibt es diese Option in leaflet vielleicht und kann man diese ausschalten?

Gruß Jan

8

Jupp, das vermute ich auch, nur habe ich noch nicht rausgefunden, ob es am CSV import oder an ClusterMarker liegt. Für letzteres habe ich mal nur kurz die Doku durchsucht und nicht wirklich was gefunden, ob es nach dem Clustern einen Zoom auf das gesamte Clustergebiet macht…

PS: die semicircle.js brauchst du definitiv nicht, außer du willst auch zusätzlich noch so lustige Kreise-/segmente zeichnen :wink:

9

Nur kurz: In der Funktion addCsvMarkers ist doch drin, dass die Karte auf die Ausdehnung des CSV-Layers gezoomt wird


try {
        var bounds = markers.getBounds();
        if (bounds) {
            map.fitBounds(bounds);
        }

Damit ist klar, warum die Karte initial auf die angegebenen URL-Parameter und nach dem Verarbeiten des CSV wieder raus/rein zoomt (fitBounds).

PS: Was soll das center in den Layeroptionen bewirken? Das ist nicht in der Leaflet-Doku aufgeführt und ich kenne das so auch nicht.

L.tileLayer("http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
			minZoom: 6,
			maxZoom: 16,
			center: [51.611, 10.042],
			attribution: baseAttribution
				
		}).addTo(map);
10

Das kommt anscheinend vom Copy&Paste von meiner Karte und ich habe das auch nur Copy&Paste irgendwoher, aber du hast Recht, ich habe auch keine Referenz in der Doku gefunden, kann also wohl raus.

11

Ist das center noch erforderlich für den Fall, das kein Permalink vorliegt?

Gruß Jan

12

In die TileLayer-Optionen gehört das in keinem Fall rein.

13

Moin!

habe das soweit einmal umgebaut und wieder online gestellt.

Soweit klappt das mit dem Permalink aus - wenn man z.b. http://www.tappenbeck.net/osm/rettungspunkte/rest.html#54.156,10.52765,11z aufruft, dann kommt Ostholstein / Lübecker Bucht.

Aber wenn ich hinter HTML die Parameter weglasse, dann wird irgendein Ausschnitt angezeigt. Hier wäre es noch sinnvoll eine Default-Center-Koordinate mitzugeben.

Gibt es hierfür noch einen Tipp?

Gruß Jan

14

Also ich würde auf die kompletten Daten zoomen (genau das, was du jetzt auskommentiert hast), wenn keine Parameter in der URL sind. Dazu musst du am ganz Anfang des Scripts einfügen:


var hasParams = (window.location.hash !== '') ? true : false;

und das hier


//    try {
//        var bounds = markers.getBounds();
//        if (bounds) {
//            map.fitBounds(bounds);
//
//        }
//    } catch(err) {
//        // pass
//    }

in das ändern:


  try {
    if (hasParams === false){
      var bounds = markers.getBounds();
      if (bounds){
        map.fitBounds(bounds);
      }
    }
  } catch(err) {
    // pass
  }

Zuerst stellst du fest, ob überhaupt Parameter vorhanden sind. Im letzten Codeblock wird die am Anfang festgelegte Variable abgefragt und bei Bedarf ggf. gecentered und gezoomt.

(Ungetestet, daher ohne Gewehr)

15

Ohje, da ist noch ein bisschen was zu tun:

https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Zeichencodierung


    <script src="https://rawgit.com/MarcChasse/leaflet.Permalink/master/leaflet.permalink.min.js"></script>
    <script src="js/leaflet.geocsv.js"></script>
	<!-- ergänzt -->
    <script src="js/leaflet.permalink.js"></script>

2 x permalink eingebaut. 1 x reicht :wink: Wenn ihr default-Koordinaten und -Zoomlevel angeben wollt, schmeisst das leaflet.permalink.min.js raus und ändert in js/leaflet.permalink.js die entsprechenden Stellen.

Die Leaflet-eigenen png für die Marker-Darstellung werden nicht gefunden.

Die Browser-Konsole sollte euch helfen, solche Fehler zu finden.