Meine kleine Leaflet-Komposition

Schon vor einiger Zeit habe ich mir eine kleine Seite mit Leaflet erstellt, weil ich eine Karte haben wollte, welche den gesamten Bildschirm ausfüllt und OSM sowie Google und Bing beinhaltet. Beim Start wurde immer auf meine Heimatstadt gezoomt und mehr Funktionen gab es nicht.

Heute habe ich geschaut, was es alles für nette Plugins für Leaflet gibt und einige interessante zusammen geschmissen. Entstanden ist das hier: http://www.sammyshp.de/fsmap/

restoreview – damit man immer beim letzten Ort landet
hash - Zustand der Karte in URL (für den Layer muss ich mir noch was einfallen lassen)
history - Weil ich manchmal soweit weg gescrollt habe, dass ich den Ursprungsort nicht mehr (schnell) wiederfinde
Locate - Anzeige der aktuellen Position
Geocoder - Für die Suche (läuft zur Zeit mit Nominatim)
measure - Messung von Strecken; einer der vielen Forks mit ein paar eigenen Modifikationen

Bitte keine Feature Requests, da ich die Karte primär für mich selbst gemacht habe, andere aber davon Gebrauch machen können. Gerne nehme ich hingegen Patches an. :slight_smile: Mein Fazit: Programmieren ist auch nicht mehr das, was es mal war. Konnte in relativ kurzer Zeit mittels Copy & Paste erstellt werden.

PS: Ihr könnt gerne über die Attributierung meckern. Die hatte ich vor über einem Jahr nur schnell hingeschrieben bzw. – wo vorhanden – kopiert.

Ähnelt meiner Seite. Nervig fand ich nur, dass manche Plugins ihre eigene Ordnerstruktur mitbringen und ich die Vorgaben nicht ändern konnte. Zumindest mein Editor ging in die Knie. :wink:

Ich mag eine klare Ordnerstruktur. Generell bin ich aber mit Leaflet sehr zufrieden. Stellst du für interessierte User ein fertiges zip deines Ergebnisses zum Download bereit? Zur Not geht wget oder ähnliches.

Edit:
So schaut meine Seite aus:

Wirklich hübsch - wenn ich da den Aufwand für Openlayers vergleiche - und erst recht eine fällige Umstellung auf OL 3, bin ich mit LL auch ganz happy.

Hier mal mein Baby: https://osm.wno-edv-service.de/leaflet1/test5.jsp

Highlights

Rechts oben:

  • Edit-Button
  • anderer Layerswitcher, der bei vielen Layern und Overlays weniger Platz braucht

Links oben:

  • Zoom-Level
  • Loading-Indicator

Rechts unten:

  • variable Attributierung je nach den eingeschalteten Layern (z.B. Mapbox für MapBox-Karten)
  • Aktuelle Position des Cursors

Und von dir werd ich wohl auch noch einige hinzunehmen.

Gruss
walter

Hier die Includes:


<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css' />
<link rel='stylesheet' href='css/common/leaflet/L.Control.ZoomDisplay.css' />
<link rel='stylesheet' href='css/common/leaflet/L.Control.MousePosition.css' />
<link rel='stylesheet' href='css/common/leaflet/L.Control.Loading.css' />
<link rel='stylesheet' href='css/common/leaflet/Leaflet.EditInOSM.css' />

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js'></script>
<script src='js/common/leaflet/L.TileLayer.Grayscale.js'></script>
<script src='js/common/leaflet/L.Control.ZoomDisplay.js'></script>
<script src='js/common/leaflet/L.Control.MousePosition.js'></script>
<script src='js/common/leaflet/L.Control.ActiveLayers.js'></script>  <!-- wird wohl nicht gebraucht -->
<script src='js/common/leaflet/L.Control.SelectLayers.js'></script>
<script src='js/common/leaflet/L.Control.Loading.js'></script>
<script src='js/common/leaflet/Leaflet.EditInOSM.js'></script>
<script src='https://code.jquery.com/jquery-2.1.0.min.js'></script>

ansonsten runterladen.

ps: wenn LL 1.0 kommt, geht Grayscale leider nicht mehr. Hab den Autor angeschrieben aber der antwortet nicht. :frowning:

@Zyras

Klar, kein Problem: https://cloud.finf.uni-hannover.de/index.php/s/mryftiHWmv013JR

In diesem Fall war es ganz simpel: Eine HTML-Datei, alle CSS und JavaScript Dateien mit ins gleiche Verzeichnis und die Bilder lagen glücklicherweise bereits alle in images, sodass ich keine Pfade anpassen musste. Für so ein kleines “Projekt” reicht mir das an Ordnung. :smiley:

@wambacher

Scheinen wohl recht viele so eine Karte heimlich in Verwendung zu haben. :slight_smile:

Koordinatenanzeige hatte ich mir auch schon überlegt, dann aber sein lassen. Brauche ich äußerst selten, wenn dann über einen Marker (die muss ich definitiv noch einbauen) bzw. Koordinateneingabe.
Den Edit-Button werde ich mir wohl noch klauen. :wink:

PS: Der Exif-Layer gefällt mir. Nur schade, dass da nur die absoluten Pfade auf deiner Platte drin sind. :stuck_out_tongue:

Ja, es ist mein erster Versuch mit LL und daher steht das ja auch auf …/leaflet1/test5.jsp Ab sofort mach ich nur noch neue Sachen mit LL. Ich warte nur noch die 1.0 ab, die ja jeden Tag released werden soll. (*)

Klaro, das ist ja auch der Sinn dieser Aktion. Zu sehen, was verwendbar ist und dann ggf. übernehmen.

Jo, so ist das Teil entstanden: Exifs sind meine Images der letzten Jahre und wenn man parallel mit STRG-Click das Hydranten-Layer aktiviert, sieht man, wo ich an dunklen Winterabenden noch was zu tun habe. Beim Klick auf die Icons kommt auch ein Popup, nur bei den Exifs klappt das nicht - oder besser gesagt nicht mehr.

Basis des Ganzen ist übrigens der Geoserver. Eine Software, die verdammt gut ist, leider aber fast keiner von euch kennt (moenk ausgenommen). Diese Karte besteht nur noch aus JavaScript und dem Geoserver; bei den alten Anwendungen sind bis zu 80% selbst programmiertes Java mit JDBL für die Zugriffe auf die DB. Alles unnötig geworden. Puh.

Gruss
walter

*) ich schau jede Woche in der WochenNews nach, aber da steht nix drin :wink: (wer den Joke versteht, kennt sich wirklich aus)

@wambacher: interessantes Plugin mit der Editfunktion in JOSM und Co. Muss jetzt nur noch schauen wie ich das vom Firefox aus aufrufen kann und JOSM startet. Wird aber nur eine Einstellung in NoScript sein.

Hab zwar keine Vostellung was Noscript damit zu tun haben soll, aber …


      var map = L.map('map', {
         center:		[50.1115, 8.098],    // wambach                  
         zoom:			15,
         minZoom:		6,
         maxZoom:		19,
         layers:		initLayer,
         loadingControl:	true,
         editInOSMControlOptions: {
            zoomThreshold:	16,
            editors: 		['id','potlatch','josm']}	
      });

das war alles.

Da wird ABE aktiv. Schaue mir das nachher einmal ein, damit ich bequem Orte aufrufen und editieren kann. Da es auch openstreetmap.org betrifft muss ich die Config ändern. Driftet jetzt aber vom Thema des TE ab. :slight_smile:

Die ABE-Regel sieht bei mir so aus:

Site 127.0.0.1:8111 localhost:8111 127.0.0.1:8112 localhost:8112
Accept GET from *
Deny

edit: Edit in OSM ist nun auch drin, allerdings als kleiner Link unten rechts.

Hab das Hillshading-Overlay eingebaut, funzt ganz gut. Kann wer etwas zum Autor sagen? Hillshading by ??? from NASA SRTM data ist ein wenig blöd.

@Sammy: wenn du den Hillshading-Url auf http://{s}.tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png änderst, klappert Leaflet die drei a-b-c-Server zyklisch ab.

Gruss
walter

Ich hab diese ABE-Regeln:

# Prevent Internet sites from requesting LAN resources.
Site LOCAL
Accept from LOCAL
Accept from *.openstreetmap.org
Accept from *.openstreetmap.fr
Accept from *.hotosm.org
Accept from *.openstreetmap.de
Accept from *.geofabrik.de
Accept from *.osm.wno-edv-service.de
Deny

@wambacher

Tja, nachdem der alte Server abgeschaltet wurde, habe ich irgendwo diese URL gefunden, aber leider ohne einen Namen. {s} hatte ich zuerst drin, ich hatte aber nur von c eine Antwort bekommen. Wenn das jetzt wieder geht, packe ich es wieder rein.

edit: Die URL hatte ich von hier: http://wiki.openstreetmap.org/wiki/Hike_%26_Bike_Map
Die Attributierung hatte ich von der alten Quelle übernommen.

danke, wenn ich mal was finde, melde ich mich wieder.

Gruss
walter

Bis eben war meine Testseite - mal wieder - sehr wacklig.

Hab mich mit einem sehr speziellen Problem im GeoServer rumgeschlagen - und gewonnen :wink:
Als Resultat funktionieren jetzt alle Layer und alle Overlays.

Gruss
walter

Jeweils immer nur ein Layer:

  1. Rettungspunkte: Kein Popup (sehe auch keinen Request)
  2. Hydranten: Kein Popup
  3. Firestations: Popup kommt für Hydranten-Layer

Damit konnte ich die Verwirrung des Systems erfolgreich reproduzieren. :slight_smile:

Ich kann deine Fragezeichen in

exceptions: 'application/vnd.ogc.se_inimage',  // ????????????????????

beantworten: Damit sagst du dem Geoserver, das er Exceptions beim Rendern des WMS als Text in das Bild schreiben soll. Du könntest auch application/vnd.ogc.se_xml übergeben, dann würde im Zweifelsfall ein XML-Dokument zurückgeschickt, in dem die Exceptions stehen. Dieses “inimage” ist dafür da, das du deinem Consumer nicht noch beibringen musst, mit XML-Antworten umzugehen.

Schön, dass du dich zu diesem “Angeberthread” äusserst. Ich seh das eher als einen Erfahrungsaustausch bei dieser doch recht frischen Software.

Das mit dem Exception-Handling ist mir natürlich längst bekannt, nur hab ich die ??? halt noch drin. Das Verhalten mit den Error-Images war/ist genau das, was ich wollte.

Zur Zeit klemmt es mit Fonts und Halo im TextSymbolizer aber das ist hier stark OT.

@sammy: jo, manche Popups gehen noch nicht, aber das wird auch noch.

Zur Zeit suche ich in LL eine Möglichkeit, im Layerswitcher die Radio-Buttons der Overlays auszuschalten, die aufgrund der aktuellen Zoomstufe gerade nicht angezeigt werden. Bei OL2 hatte ich das im Griff aber hier halt noch nicht.

Gruss
walter

Sieht gut aus. :slight_smile:

Edit: Einen extra Layer für den Nahverkehr gibt es nicht - oder? Ich kenne nur http://öpnvkarte.de/ und http://opencyclemap.org/. Wäre eine praktische Ergänzung.

Ich habe noch etwas an meiner Karte gespielt:

  • Ergebnismarker der Suche werden nicht mehr ersetzt, können aber über das Kontextmenü gelöscht werden. Vielleicht ändere ich das aber auch wieder (mit der Möglichkeit, den Marker explizit zu behalten).
  • Auch über das Kontextmenü auf der Karte können die Koordinaten angezeigt werden.

Was immer noch fehlt und was ich gerne hätte, ist eine Teilen-Funktion (mit Setzen eines Markers beim Aufruf, URL mit Koordinaten teilen geht ja bereits).

Bin momentan noch am überlegen, ob ich dieses Plugin einbaue: http://w8r.github.io/Leaflet.Bookmarks/

Das ist nur eine Machbarkeitsstudie mit Schwerpunkt “Emergency”. Was da später raus werden wird, ist noch total offen.

Gruss
walter