Leaflet: Permalink und Cookie

Communities Deutschland (Germany)
1

Ich spiele gerade etwas mit Leaflet herum und suche nun nach einer Möglichkeit normale Permalinks (also mit HTTP-GET und nicht mit einem Anker, den brauche ich selbst noch) zu generieren und auszuwerten, sowie Position und Layer in einem Cookie zu speichern und daraus zu lesen. Da gibt’s doch bestimmt schon was, oder?

2

Den klassischen Permalink gibt es als Teil der Plugins von Pavel Shramov (Beispiele).

Beispiel-Code zum Einbinden:


    <script src="lib/Permalink.js"></script>
    <script src="lib/Permalink.Layer.js"></script>

    map.addControl(new L.Control.Permalink({text: 'Permalink', layers: layersControl}));

Bezüglich Speichern als Cookie kenne ich nichts, außer evtl. auf osm.org spicken?

Gruß,
Norbert

3

Der nutzt aber zumindest in dem Beispiel auch den Anker statt HTTP-Parameter und schreibt sich ebenfalls selbstständig in die Adressleiste. Eine Einstellung dazu habe ich jetzt im Quellcode auch nicht gefunden.

Ich hab’ den Quelltext davon als hervorragend lesbar in Erinnerung – Hat sich daran was geändert oder gibt’s da einen Geheimtrick?

4

Stimmt, die Option useAnchor muss man noch auf false setzen, im Beispiel ist auch noch useLocation: true, das die Adresszeile aktualisiert.

Evtl. helfen die Links aus Wo finde ich die Js-Dateien der OSM-Hauptseite?

5

Ah, jetzt seh ich’s auch. Ja, so ist das wohl wonach ich suchte.

Da ich beim Hinzufügen der Layer zum Link schon wieder hänge mach’ ich jetzt aber erstmal Pause :wink:

6

Da wird der Permalink Option “layers” die Variable des Leaflet Layer Switchers (L.Control.Layers) übergeben, die in diesem Fall eben auch “layers” heißt.

7

Dann hab’ ich das wohl richtig gesehen. Hier ein Ausschnitt aus meinem (nicht funktionierendem) Code, bei dem ich meine Identisches zu machen. Vielleicht hast du ja eine Idee:

var controlLayerswitch = L.control.selectLayers(Layers.base, Layers.overlay, {collapsed: false});/*L.control.layers(Layers.base, Layers.overlay, {collapsed: false});*/
map.addControl(controlLayerswitch);
map.addControl(new L.Control.Permalink({useAnchor:false, layers:controlLayerswitch}));

Das Auskommentierte hatte ich vorher hinter dem Gleichheitszeichen, damit klappt’s auch nicht.

8

Hm, sieht für mich schon ok aus. Könnte zwar sein, der Permalink nicht mit dem SelectLayersControl Plugin kann, aber der auskommentierte Teil müsste eigentlich schon funktionieren. Ohne Online-Beispiel aber schwer zu sagen.

9

Die Cookie-Behandlung habe ich mir inzwischen mit zwei auf StackOverflow gefundenen Funktionen (getCookie() und setCookie()) selbst gebastelt:

Erstmal werden die Cookies ausgelesen bzw wenn keine vorhanden sind auf Standardwerte gesetzt:

var lat  = ( getCookie("lat" ) ? getCookie("lat" ) : 49.5 );
var lon  = ( getCookie("lon" ) ? getCookie("lon" ) : 8.6 );
var zoom = ( getCookie("zoom") ? getCookie("zoom") : 7 );

var map = L.map('map', {
    center: new L.LatLng(lat,lon),
    zoom: zoom,
    ... });

Und weiter hinten gibt’s dann den Hook zum Setzen der Cookies:

map.on("moveend", function(){
  setCookie("lat", map.getCenter().lat,64);
  setCookie("lon", map.getCenter().lng,64);
  setCookie("zoom",map.getZoom(),     64);
} );

Die Layer sind da jetzt auch noch nicht drin, ist mir momentan aber auch nicht so sehr wichtig.