OpenStreetMap Forum

rayquaza

Member

From: DE-BW

Registered: 2012-11-18

Posts: 2,007

Leaflet: Permalink und Cookie

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?

ikonor

Member

Registered: 2010-11-08

Posts: 637

Website

Re: Leaflet: Permalink und Cookie

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

rayquaza

Member

From: DE-BW

Registered: 2012-11-18

Posts: 2,007

Re: Leaflet: Permalink und Cookie

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

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.

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

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

ikonor

Member

Registered: 2010-11-08

Posts: 637

Website

Re: Leaflet: Permalink und Cookie

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

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.

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

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

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

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

rayquaza

Member

From: DE-BW

Registered: 2012-11-18

Posts: 2,007

Re: Leaflet: Permalink und Cookie

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

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

ikonor

Member

Registered: 2010-11-08

Posts: 637

Website

Re: Leaflet: Permalink und Cookie

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

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.

rayquaza

Member

From: DE-BW

Registered: 2012-11-18

Posts: 2,007

Re: Leaflet: Permalink und Cookie

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.

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.

ikonor

Member

Registered: 2010-11-08

Posts: 637

Website

Re: Leaflet: Permalink und Cookie

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.

rayquaza

Member

From: DE-BW

Registered: 2012-11-18

Posts: 2,007

Re: Leaflet: Permalink und Cookie

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.