Meine kleine Leaflet-Komposition

SammysHP · 2015-08-23 16:08:38

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. 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.

Zyras · 2015-08-23 16:22:34

Ä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.

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:

Last edited by Zyras (2015-08-25 17:26:52)

wambacher · 2015-08-23 17:01:57

SammysHP wrote:

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

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.

Last edited by wambacher (2015-08-23 17:10:14)

SammysHP · 2015-08-23 17:02:34

@Zyras

Klar, kein Problem: https://cloud.finf.uni-hannover.de/inde … iHWmv013JR

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.

@wambacher

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

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.

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

Last edited by SammysHP (2015-08-23 17:08:10)

wambacher · 2015-08-23 17:32:59

SammysHP wrote:

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

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. (*)

Den Edit-Button werde ich mir wohl noch klauen.

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

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

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 (wer den Joke versteht, kennt sich wirklich aus)

Last edited by wambacher (2015-08-23 20:44:55)

Zyras · 2015-08-23 18:08:32

@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.

Last edited by Zyras (2015-08-23 18:08:57)

wambacher · 2015-08-23 18:30:31

Zyras wrote:

@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.

Zyras · 2015-08-23 19:03:30

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.

SammysHP · 2015-08-23 19:10:11

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.

Last edited by SammysHP (2015-08-23 19:13:09)

wambacher · 2015-08-23 21:56:23

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

gormo · 2015-08-24 07:48:10

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

SammysHP · 2015-08-24 09:02:00

@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.

Last edited by SammysHP (2015-08-24 09:05:42)

wambacher · 2015-08-24 09:37:42

SammysHP wrote:

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

wambacher · 2015-08-25 15:39:53

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

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

Gruss
walter

Last edited by wambacher (2015-08-25 15:40:47)

SammysHP · 2015-08-25 15:58:43

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.

gormo · 2015-08-25 16:20:09

wambacher wrote:

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

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.

wambacher · 2015-08-25 16:41:40

gormo wrote:

Ich kann deine Fragezeichen in
exceptions: 'application/vnd.ogc.se_inimage',  // ????????????????????
... beantworten.

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

Last edited by wambacher (2015-08-25 16:42:46)

Zyras · 2015-08-25 17:29:37

wambacher wrote:

Als Resultat funktionieren jetzt alle Layer und alle Overlays.

Sieht gut aus.

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.

Last edited by Zyras (2015-08-25 17:59:13)

SammysHP · 2015-08-25 20:00:46

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/

Last edited by SammysHP (2015-08-25 20:01:27)

wambacher · 2015-08-25 20:04:33

Zyras wrote:

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.

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

Gruss
walter

wambacher · 2015-08-25 20:09:25

SammysHP wrote:

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

Hübsch - ich wüsste nur noch nicht, was ich damit anfangen sollte. hab ich mir mal abgespeichert für alle Fälle.

SammysHP · 2015-08-25 20:29:00

Natürlich kann man auch Bookmarks im Browser nutzen, das integriert sich aber nicht so schön in die Oberfläche.

Falls man übrigens das Kontextmenü des Browser öffnen möchte (z.B. für die Tile-URL), kann man die Shift-Taste beim Rechtsklick gedrückt halten.

Last edited by SammysHP (2015-08-25 20:30:34)

gormo · 2015-08-26 07:15:33

wambacher wrote:

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

Ich meinte das "Angeberthread" begeistert - ich finde, ihr baut mit Leaflet super Sachen! Ich guck da total gerne zu.

...und wollte einmal mit GIS-Wissen angeben. Hat nicht geklappt. :(

wambacher · 2015-08-26 11:59:35

gormo wrote:

Ich meinte das "Angeberthread" begeistert - ich finde, ihr baut mit Leaflet super Sachen! Ich guck da total gerne zu.

Kam bei mir total anders rüber - nun denn, das ist ja geklärt

...und wollte einmal mit GIS-Wissen angeben. Hat nicht geklappt.

Nutzt du den GeoServer aktiv? Nur für den Fall, dass ich mal eine Frage haben sollte. Die Mailing Liste vom GeoSserver ist echt lahm, kein Vergleich mit dem Forum.

Gruss
walter

ps: mein Problemchen mit Font und Halo ist geklärt, wie man hier im "Contours"-Overlay sehen kann.
Ursache: Die Beispiele in der Doku waren falsch

TSM1904 · 2015-08-31 16:38:02

Hallo cziher, Leaflet mit Overpass-Api?

Announcement

#1 2015-08-23 16:08:38

Meine kleine Leaflet-Komposition

#2 2015-08-23 16:22:34

Re: Meine kleine Leaflet-Komposition

#3 2015-08-23 17:01:57

Re: Meine kleine Leaflet-Komposition

#4 2015-08-23 17:02:34

Re: Meine kleine Leaflet-Komposition

#5 2015-08-23 17:32:59

Re: Meine kleine Leaflet-Komposition

#6 2015-08-23 18:08:32

Re: Meine kleine Leaflet-Komposition

#7 2015-08-23 18:30:31

Re: Meine kleine Leaflet-Komposition

#8 2015-08-23 19:03:30

Re: Meine kleine Leaflet-Komposition

#9 2015-08-23 19:10:11

Re: Meine kleine Leaflet-Komposition

#10 2015-08-23 21:56:23

Re: Meine kleine Leaflet-Komposition

#11 2015-08-24 07:48:10

Re: Meine kleine Leaflet-Komposition

#12 2015-08-24 09:02:00

Re: Meine kleine Leaflet-Komposition

#13 2015-08-24 09:37:42

Re: Meine kleine Leaflet-Komposition

#14 2015-08-25 15:39:53

Re: Meine kleine Leaflet-Komposition

#15 2015-08-25 15:58:43

Re: Meine kleine Leaflet-Komposition

#16 2015-08-25 16:20:09

Re: Meine kleine Leaflet-Komposition

#17 2015-08-25 16:41:40

Re: Meine kleine Leaflet-Komposition

#18 2015-08-25 17:29:37

Re: Meine kleine Leaflet-Komposition

#19 2015-08-25 20:00:46

Re: Meine kleine Leaflet-Komposition

#20 2015-08-25 20:04:33

Re: Meine kleine Leaflet-Komposition

#21 2015-08-25 20:09:25

Re: Meine kleine Leaflet-Komposition

#22 2015-08-25 20:29:00

Re: Meine kleine Leaflet-Komposition

#23 2015-08-26 07:15:33

Re: Meine kleine Leaflet-Komposition

#24 2015-08-26 11:59:35

Re: Meine kleine Leaflet-Komposition

#25 2015-08-31 16:38:02

Re: Meine kleine Leaflet-Komposition

Board footer