Leaflet – komfortabel Web-Maps erstellen
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 96 | |
Author | ||
License | CC Attribution 4.0 International: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
Identifiers | 10.5446/40726 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
| |
Keywords |
10
17
18
20
22
32
33
41
45
55
56
62
69
71
78
79
82
84
85
88
92
00:00
Lecture/ConferenceXMLUML
00:29
Point cloudJavaScriptAPIArcGISGoogle MapsHTMLCross-site scriptingCompact spaceDisplayFactory (trading post)Overlay-NetzDivision (mathematics)Level (video gaming)WalkthroughMobile appWEBDirection (geometry)Google MapsJavaScriptHöheStatement (computer science)Block (periodic table)Variable (mathematics)ErweiterbarkeitError messageWeb pageLevel (video gaming)HTMLPixelPlug-in (computing)Parameter (computer programming)CodeOpen sourceSTYLE <Programmierumgebung>Category of beingVector graphicsProviderPoint cloudSmart cardContent (media)EASY <Programm>Noten <Programm>Lecture/ConferenceJSONXMLUML
07:50
Computer animation
08:09
Scripting languageBlock (periodic table)
08:28
ProviderJavaScriptVALLevel (video gaming)CodeVariable (mathematics)
08:51
Menu (computing)WalkthroughComputer animation
10:03
DownloadModule (mathematics)User interfaceNetzplanProgram flowchartComputer animation
10:52
Coordinate systemMetrePolygonRadiusWEBCodeDecimalVideo game consoleEuclidean vectorDatenformatCoordinate systemTypMetreRow (database)LinieCurve fittingLevel (video gaming)Set (mathematics)Instanz <Informatik>Event horizonPolygonSupremumDemosceneVector graphicsBound stateRoute of administrationPixelVariable (mathematics)Computer fileRadiusAttribute grammarGRADEIterationComputer animationProgram flowchart
18:01
Local area networkDownloadMenu (computing)CodeSound effectComputer animation
18:40
CodeGeometrySoftwareData typeRow (database)Plug-in (computing)Attribute grammarWeb pageEvent horizonPlane (geometry)Pattern languageDemosceneWeb-AnwendungComputer animationXML
20:49
XMLUML
21:30
HTTPInferenceWorld Wide WebLecture/ConferenceComputer animation
Transcript: German(auto-generated)
00:07
Wir hören jetzt einen Vortrag Leaflet komfortablen Maps, Web-Maps erstellen von Numa Gremlin. Numa Gremlin ist GISS-Entwickler bei der Firma Geosys in Berlin, ist auch Dozent bei dem GISS-Trainer auch in Berlin und hat auch ein Buch herausgebracht, das Leaflet Cookbook.
00:26
Und da wird er uns jetzt ein paar interessante Sachen, denke ich, erzählen. Gut. Ja, ich werde heute kurz Leaflet präsentieren. Was ist Leaflet oder auch kurz, was ist Webmapping? Wie werde ich eine Webmapp erstellen, für die, die noch gar nichts in die Richtung gemacht haben?
00:42
Erstmal, es gibt einerseits Webmapping-Lösungen, Sachen, die schon programmiert wurden, fertig sind. Ich logge mich ein, erstelle den Account, logge mich ein, lade Daten hoch und kann die visualisieren. Kugis Cloud ist zum Beispiel ein gutes Beispiel. Karto, früher hieß das KartoDB. Mapbox hatte auch mal so einen Viewer, den gibt es nicht mehr so richtig.
01:02
GISS Cloud, Mango Map und dann gibt es auch größere Firmen, die in die Richtung was erstellen. Die will ich aber jetzt nicht unbedingt nennen, hier bei der Foskis. Genau, oder ich benutze keine vorgefertigte Lösung, weil die doch nicht alles kann, was ich brauche. Ich will eventuell meine eigene Custom-Lösung, ich will was selbst entwickeln, oder ich brauche etwas, das komplexer ist, zum Beispiel Geo-Portale oder ähnliche Ämter, die Daten bereitstellen.
01:26
Genau, auch da gibt es viele, viele Bibliotheken. Alles JavaScript, ich muss JavaScript schon ein bisschen verstehen, um sowas zu programmieren. Auch hier Google Maps ist bekannt, man sieht 1000 Google Maps Karten auf Restaurants, Läden, überall auf Seiten.
01:43
Open Source gibt es natürlich auch, mehrere Bibliotheken, zwei große Player, würde ich sagen. Das wären OpenLayers und Leaflet. Die soll man schon mal gehört haben. Auf die Unterschiede will ich jetzt nicht eingehen, da kann man vieles sagen. Beide sind sehr gut, beide können einiges, haben auch Unterschiede.
02:02
Leaflet ist aber vor allem gut, wenn man nicht so viele Erfahrungen hat oder es erst mal lernt. Ich habe erst mal Webentwicklung gelernt, ich möchte jetzt eine Karte erstellen. Dann ist Leaflet meistens die einfachere Wahl, als gleich mit OpenLayers einzusteigen. Wenn die Projekte richtig komplex werden, große Anwendungen, wie gesagt, so ein Geo-Portal,
02:20
dann ist OpenLayers wahrscheinlich doch die bessere Wahl. Genau, also erst mal kurz, was muss ich überhaupt lernen? Webentwicklung heißt HTML, CSS, JavaScript. In einer Woche kann man die Basics schon mal verstehen, würde ich sagen, und dann kann man schon die Leaflet-Karte programmieren. Also man muss jetzt nicht groß alles perfekt können. Also nicht da abschrecken lassen, vor allem JavaScript.
02:42
Ich weiß, Programmierung, anfangs hat man jetzt ein bisschen Angst, aber das ist nicht so schlimm. Man lernt das erst, wenn man es benutzt, und zwar, wenn man Leaflet benutzt, zum Beispiel. Genau, dann kommen wir zu Leaflet, leafletjs.com. Ist so eine Bibliothek, wie gesagt, um Webmaps zu programmieren. Was sind so die Merkmale? Wieso ist Leaflet cool? Wieso ist Leaflet eine gute Bibliothek?
03:04
Na ja, einerseits, es ist kompakt. Man sieht hier im Qualcode 138 KB, das ist keine riesen Datei, die jeder User jetzt erst mal runterladen muss. Also relativ kompakt, läuft natürlich auch schnell, hat viele Vorteile, wie gesagt. Es ist dokumentiert, und man muss sagen, sehr gut dokumentiert.
03:22
Man weiß ja, im Open-Source-Bereich ist nicht alles immer super dokumentiert. Leaflet ist richtig gut dokumentiert. Also man kann alles nachschlagen, wenn man einmal weiß, wie man diese Doku liest, dann findet man da alles. Und dann muss man auch nicht, man wird immer noch ein bisschen googeln, ein paar Sachen suchen, weil es dann doch immer etwas schneller geht. Aber theoretisch steht alles in dieser Doku, die ist richtig gut.
03:43
Genau, Leaflet ist erweiterbar. Ich habe ja gesagt, eventuell kann eine andere Bibliothek ein bisschen mehr, Openair zum Beispiel kann viel mehr. Aber Leaflet ist erweiterbar. Wenn etwas fehlt, das ich wirklich brauche, dann kann ich es selbst programmieren oder ich schaue, ob es Plugins gibt. Also aus dem Desktop-Bereich wissen wir, Kugis zum Beispiel, gibt es hunderte Plugins.
04:01
Und bei Leaflet ist es auch so. Hier sieht man verschiedene Kategorien. Sucht man sich ein Plugin aus, kann man es installieren. Die können natürlich ganz unterschiedlich sein, wie die programmiert wurden, wie die eventuell sogar bereitgestellt werden oder funktionieren. Aber im Endeffekt ist Leaflet erweiterbar. Und das ist ein Pluspunkt. Und Leaflet ist einfach.
04:21
Das meinte ich vorhin, wenn man Beginner ist, noch nicht so die Erfahrung hat, ist Leaflet relativ einfach zu benutzen. Sehr einfach einzusteigen. Und das für den Rest des Vortrages. Ich zeige einfach ein paar Beispiele, was man so machen kann. Viele ganz, ganz einfache Sachen. Aber ihr werdet sehen, dass das meiste einfach Einzahler sind. Das ist gar nicht so schwierig.
04:40
Wie gesagt, ja, die Beispiele. Also erst mal, wie erstelle ich eine Map? Ich kann in zwei Folien zeigen, wie ich eine Karte in Leaflet erstelle. Erst mal ein bisschen HTML. Ich erstelle einen Diff in meiner Webseite. Also Info im Buddy kommt ein Diff rein. Dem gebe ich eine ID. Ich muss das nochmal ansprechen. Dann werde ich ein Dust Diff stylen. Styling ist, wie gesagt, optional.
05:01
Aber jede Leaflet-Karte braucht eine Höhe. Also es gibt Bibliotheken, die automatisch eine Höhe zuweisen. Bei Leaflet ist das nicht der Fall. Ich muss explizit sagen, diese Karte hat 100 Prozent der Höhe. Also vom Buddy oder vom Bildschirm, was auch immer. Oder hat 500 Pixel Höhe, wie in diesem Beispiel. Sonst ist die Null Pixel hoch und dann ist die offiziell da. Aber man sieht sie nicht.
05:21
Und es gibt keine Fehlermeldung. Und da habe ich schon Tage verloren. Aber mittlerweile weiß ich das. Genau. Das wäre das eine. Also Diff anlegen, Diff stylen. Wie gesagt, Höhe reicht. Das war es schon. Und dann kann ich gleich JavaScript nutzen. Meine JavaScript Befehle hier, die von Leaflet bereitgestellt werden. Immer Lpunkt, irgendein Befehl.
05:41
Damit instanziere ich dann ein Element und kann es benutzen. Man sieht hier, die Map ist schnell angelegt. Ich leg eine Variable an. Auch die ist optional. Aber meistens will man die Map hier nochmal ansprechen. Also leg ich eine Variable Map an. Der Befehl heißt Lmap. Und mein Diff, das ist der erste Parameter hier, heißt wie gesagt Map.
06:00
Ich habe ja gesagt Diff, ID, Map. Genau. Und dann kommt ein Center da rein und eine Zoom-Stufe. Und dann ist diese Karte bereit. Da gibt es noch 30, 40 weitere Parameter, die man jetzt befüllen kann. Aber im Endeffekt ist die Karte in ein paar Zeilen programmiert. Und das war's. Und schon erscheint die. Was heißt erscheinen bei Leaflet? Das heißt erst mal das hier.
06:21
Hätte man sowas eventuell erwartet, eher nicht. Ist erst mal so ein grauer Block. Aber wenn man überlegt, wenn ich einen Giz öffne, ist es auch erst mal leer. Ich muss erst mal Daten laden. Und so eine Basemap, eine Hintergrundkarte ist sowieso optional. Meistens im Giz werde ich die sowieso nicht laden. Nur wenn ich Infos wirklich finden will und visualisieren möchte. In Leaflet genau das gleiche.
06:42
Die Basemap ist optional. Ich kann auch nur Vektordaten laden oder Rastadaten. Aber die Basemap brauche ich nicht. Geht aber auch. Und auch das ist nicht schwierig. Hier sind ein paar Zeilen Code. Da wird diese Standard OpenStreetMap-Karte eingebunden. Da ist auch so ein Block, da machen wir mal Copy-Paste, weil das kann man sich sowieso nicht merken.
07:00
Genau, man sieht hier eine Variable Basemap an. Und dann sage ich Basemap add to map. Add to heißt der Befehl, indem ich irgendein Element meiner Karte, also diesem Container, diesem grauen Ding da hinzufüge. Genau. Und in dem Fall so sieht dann die OpenStreetMap-Karte aus. Man kennt sie. Dann hätte ich die richtige Map, so wie ich mir das vorstelle.
07:23
Also im Endeffekt, div anlegen, div styling, map anlegen, basemap hinzufügen. Also wirklich vier Schritte. Und schon hat man eine fertige Map, die man benutzen kann, mit der man arbeiten kann. Dann Inhalte fehlen jetzt noch. Also es sind noch keine Vektor-Daten drin, aber das kommt dann danach. Und das ist nicht so schwierig, wie gesagt. Was ich kurz erwähnen möchte, ist, es gibt hier eine ganz gute Übersicht mit Basemaps.
07:45
So eine Leaflet Providers heißt, das ist eigentlich ein Plugin, aber man kann das auch so aufrufen. Ich mach das mal kurz. Ob die Maus funktioniert? Ja. Hier, so sieht die Seite aus. Und ich brauche hier rechts einfach nur einen anderen Radio-Button anzuklicken.
08:04
Und schon habe ich eine andere Basemap. Gut, in dieser Seite natürlich, wie kriege ich das in meine Reihen? Ganz einfach, dieser Block hier, den kopiere ich. Ich kopiere in meiner Anwendung. Man sieht es nicht so gut. Das finden Sie mich erst mal kurz rein. Ach so, die Bildschirmlose, wie heißt die?
08:24
Magnifier auf Englisch, gut. Suche mal kurz rein. Und dann sehen wir hier, dass das so ähnlich aussieht, wie diese OpenStreetMap-Karte. Außer, dass die Variable hier jetzt anders heißt. Die Variable kann ich natürlich auch Basemap nennen. Erst mal egal. Hier, France.
08:40
So sieht die dann aus. Einfach rüberkopieren, in den Code hauen und dann der Map hinzufügen. Und schon ist eine andere Basemap drin. Geht super, super schnell. Wie gesagt, das hier sind Basemaps, die öffentlich verfügbar sind. Nicht unbedingt nur in Leaflet. Also ich kann das auch jetzt mit OpenLayers oder jeder Anwendung, die Infi teilst, also Kacheln unterstützt,
09:03
kann sowas dann im Endeffekt laden. Hier nochmal so was Info, was ich relativ interessant fand. Also wusste ich auch nicht, bis ich das dann zufällig gesehen habe. Also wenn man sich Länder anschaut, wo man nicht unbedingt die Schrift lesen kann oder verstehen kann, dann ist die OSM-Karte nicht immer die beste Karte. Aber es gibt eine OSM.de, eine deutsche Version, wo die Sachen nochmal übersetzt wurden.
09:25
Und da kann man alles lesen. Also kann man die auch dann, hier aus der Europäerweltweit kann man alles eigentlich lesen. Fand ich ganz cool. So als extra Info wollte ich das erwähnen. Genau, hier noch ein Beispiel. Das ist der gleiche Ausschnitt. Man sieht links schwierig, rechts geht es ein bisschen besser.
09:44
Genau, und für die Metalheads unter uns gibt es hier die Spinal-Map. Spinal-Map heißt sie. Bin ich nicht so oft ein in Projekten jetzt, aber es ist cool, dass es geht. Also wenn man ein bisschen rumspielt oder so eine Konzertkarte erstellt,
10:02
ist das eventuell die Basemap dann. Genau, aber Basemap heißt nicht immer Basemap-Kacheln. Das kann auch was ganz anderes sein. Ein gutes Beispiel ist die BVG in Berlin. Rufen wir auch auf. Die benutzen auch hier Leaflet. Das hier ist der Fahrplan in Berlin. Also die U-Bahn, S-Bahn.
10:21
Ist der ganze Netzplan. Topologisch passt das alles, aber geografisch natürlich nicht. Es ist einfach nur ein Schema eigentlich. Trotzdem wird hier eine Leaflet-Karte benutzt. Wieso? Na ja, ich kann die Karte bewegen. Ich kann reinzoomen. Ich kann rauszoomen. Und ich habe solche Hover-Effekte. Ich habe Pop-ups. Wenn ich irgendwo hinklicke, kommt dann was und so weiter und so fort.
10:40
Also kann man auch Leaflet für Sachen benutzen, die nicht wirklich geografisch in dem Sinne sind. Das gibt es für alles. Info auf der Erdoberfläche. Aber diese Karte ist nicht georeferenziert in dem Sinne. Genau. Das zu Basemaps. Nächstes Thema. Koordinaten. Koordinaten, jeder weiß das, wenn man mal mit GISS anfängt.
11:02
Anfangs erscheinen die Daten an der falschen Stelle. Erscheinen gar nicht oder nichts funktioniert. So ist es zu lernen und halt GISS. Und das liegt meistens in den Koordinaten. Bei Leaflet ist es eigentlich ganz einfach. Koordinaten werden wie übergeben? Einfach in Array, also die eckigen Klammern. Und dann ein Lat-Wert und ein Long-Wert. Also wie viel Grad Nord-Süd und Ost-West. Und das war's. Immer WGS 84.
11:21
Also hier kein UTM, kein Gauss-Krüger, was auch immer einfügen. Das wird nicht funktionieren. Kann man sagen, das ist ein Nachteil. Das ist nicht flexibel. Andererseits wird man gezwungen, immer erst mal mit WGS zu transformieren. Und alles ist konsistent. Braucht man doch andere Koordinatensysteme, kann man das auch mit Bibliotheken wie Proj 4 transformieren. Ist kein Problem. Aufpassen muss man, dass das Lat-for-Long ist.
11:41
Das ist so eine relativ häufige Fehlerquelle. Da landen dann die Deutschland-Daten öfters im Indischen Ozean, wenn man die vertauscht. Viele Datenformate, GeoJSON oder auch andere Anwendungen benutzen eher Long-for-Lat. Also kommt es auch vor, dass man in Leaflet erst mal einen Datensatz lädt, den man schon kennt und der in der falschen Stelle landet. Muss man halt aufpassen.
12:01
Genau, aber an sich Koordinaten eingeben, nichts instanzieren. Einfach nur einen Array anlegen mit zwei Floats, also Dezimalzahlen und das war's. Wirklich sehr, sehr einfach. Ein Marker ist eigentlich das Wort für Punkt, aber es ist kein richtiger Punkt, falls es kein Vektor ist, sondern es ist eigentlich ein Raster, ein kleines PNG, das da geladen wird. Auch der Befehl ist sehr einfach. L.marker und was haue ich da rein?
12:21
Natürlich ein Koordinatenpaar. Lat-long, wie wir gerade gesehen haben. Und ich habe die Variable m genannt und auch hier mr2 meiner Karte hinzufügen, genau wie vorhin die Basemap. Also auch das relativ easy, sehr konsistent. Koordinaten immer auf die gleiche Art und Weise eingeben und dann dieser add to Befehl, der immer wieder vorkommt.
12:41
Marker mit Popup. Hier könnt ihr gerne mal schauen, wo das ist. Das ist eine Insel, relativ große, coole Insel aus Popup. Und das war's, eine Zeile Code mehr, ein Befehl mehr und ich klicke auf diese Marker und schon kriege ich so ein kleines Fenster. Das kann ich ausbauen. Ach so, das kommt ein bisschen später. Was ich erst einmal sagen wollte,
13:01
ist, dass wenn der Marker nicht passt, dieses Bild kann ein bisschen nervig sein und man will doch was anderes. Kann man sein eigenes natürlich benutzen. Oder es gibt zwei Elemente, die nennen sich Circle und Circle-Marker. Das ist ein richtiger Vektordatensatz. Man sieht, das ist ein Kreis hier. Was ist der Unterschied? Auch hier sieht man, wie die benutzt werden.
13:20
L-Punkt, Circle oder Circle-Marker, Array hinzufügen mit Koordinaten, Radius eingeben, add to map. Alle sind in einem Schritt in diesem Fall. Radius steht da 10. Sie sehen unterschiedlich aus. Das muss man halt wissen. Beim Circle wären das 10 Meter und beim Circle-Marker sind das 10 Pixel. Das ist der Unterschied.
13:40
Da kann man sich schon auch mal erinnern, dass der Punkt, wo wir raus sind, nicht mehr sichtbar ist, wenn es 10 Meter sind, aber das lernt man auch schnell. Genau, Punkt auf Styling. Ich muss zugeben, dieses Blaue ist nicht immer das, was man braucht, oder auch nicht das Schönste eventuell. Eventuell braucht man mal einen orangen oder grünen Marker, was auch immer. Dazu gibt es dieses Ding, das nennt sich Path.
14:01
Path kann jeder Vektor in Leaflet gestylt werden. Man sieht, es gibt so etwas wie Stroke, Color, Opacity, alle möglichen Properties, die man hier hinzufügen kann. Und die fügt man einfach so in Optionen-Objekte hinzu. Jedes Leaflet-Element hat nochmal Optionen, geschreifte Klammern. Und da fügt man das dann einfach ein.
14:22
Also ich brauche nicht nochmal irgendwie ein Style-Element, eine Instanz von so einem Style-Objekt an, Style-Klasse anzulegen. Und da das zuzuweisen, ich sage einfach nur in den Optionen kommt nochmal sowas wie Color oder Fill-Color rein. Und das war's. Und genau die Optionen kann ich auch bei einer Linie benutzen oder bei einem Polygon. Wie gesagt, recht einfach dann.
14:40
Hier sieht man, hier sein Polygon wird angelegt. Auch da habe ich die gleichen Properties benutzt. Beim Mooder-Dreieck hier. Genau. Genau die gleichen Styling wie dieser Circle. Und trotzdem muss ich mir nicht groß Infi Gedanken machen. Das ist cool. Hier füge ich mehrere Marken auf einmal hinzu. Drei verschiedene Städte. Problem ist, dass diese Karte jetzt
15:02
nur zwei anzeigt. Weil die Karte ist Infi auf der Kornaten 00 zentriert, nicht zu weit reingezoomt, sehe ich nur die drei. Wie kann ich jetzt machen, dass die Karte zu dem ganzen Extent von allen Daten springt? Na da können wir Gruppen anlegen. Wir können Daten gruppieren. Eine Feature Group nennt sich das. Oder Layer Group geht es auch. Erstmal egal.
15:20
Ich lege eine Gruppe an. Ich füge die der Map hinzu. Nicht die Daten an sich. Und dann füge ich die Daten dieser Gruppe hinzu. Und dann sind die schon mal gruppiert. Und dann habe ich einen Befehl mehr. Ich extrahiere die Bounding Box. B-Box, B-Box da oben genannt. Von dieser Gruppe. Und dann benutze ich einen Befehl, der heißt Fit Bounds. Sowas wie Set Extent kann man es auch nennen.
15:42
Map, Fit Bounds, Bounding Box. Und schon, ich leite die Anwendungen und zack, zoomt die da hin. Und so habe ich eine Anwendung, die immer zu allen, die immer alle Daten anzeigt. Ganz einfach. Gruppen kann man auch benutzen, um alle Layer auf einmal zu entfernen oder hinzuzufügen. Super praktisch, wenn man Layer-Switcher hat, um ein- und auszuschalten. Eine Gruppe kann auch Punkte,
16:01
Linien, Polygone enthalten. Also egal, was da drin ist von Typ. Man kann damit auch jeden Layer auf einmal behandeln. Also anstatt Marker bei Popup, bei Popup, bei Popup. Drei Mal aufzurufen, ruf ich einfach die Gruppe auf, sage ich Each Layer. Das ist eigentlich eine Schleife, die da durchläuft. Und bei jeder Iteration kann ich auf diesen aktuellen Layer zugreifen. Und dann
16:20
ruf ich den Popup-Befehl auf. Jetzt steht dann dreimal Hallo drin. Nicht das aller sinnvollste, aber wenn ich da jetzt Attribute noch drin hätte, kann ich die auch extra heran. Und dann wird es spannend. In dem Falle nochmal zum Popup. Das kann ich auch stylen. Das ist im Anfang nur Text, der umgesetzt, interpretiert wird. Also wenn ich da Markup reinhaue, wie so ein H2, so ein Heading, zweite Ordnung, oder so ein Span,
16:42
wo ich da nochmal ein bisschen CSS-Styling einfüge, kann ich das auch stylen. Also auch da ist es relativ flexibel. GeoJSON, wenn man mit dem Datenformat arbeitet, ich kann eine Gruppe zu einem GeoJSON exportieren. Auch viele andere Datenformate, also andere Vektoren. Und dann logge ich mir das hier in meine
17:00
Konsole und dann sieht man, dass ich jetzt einen GeoJSON habe, das ich auch weiterhin benutzen kann. Wo zum Beispiel, naja, aufrufen wie geojson.io, copy-paste und schon wird das angezeigt. Oder ich haue das in meinen Texteditor, speichere das .geojson ab, und schon ist die Datei in QGIS. Also ein paar Zeichen Code in Leaflet und nachher ist es in QGIS. Das ist schon schön, wie das
17:22
alles gut zusammen funktioniert. Genauso wie Events. Also ein Event, definieren ist relativ einfach. Ich sage MapOn, wenn ich auf die Karte klicke, dann wird das Wort Klicke in meine Konsole gelockt. In diesem Falle setze ich einen Marker. Also eine der häufigst
17:42
gestellten Fragen auf DeckExchange ist, wie kann ich ein Klicke, ein Marker in der Konter von Klicke kriegen und dann was damit machen. Hier ist die Antwort mit Leaflet. Also ich sage einfach MapOnKlicke. Ich lese dann so ein Eventobjekt, dieses kleine E da oben aus. Lat und Long. Und dann logge ich das in die Konsole. Oder ich mache noch einen Markerbefehl rein und setze einen Marker. Kurze Demo.
18:04
Hier klicke ich auf die Karte und schon ist ein Marker da. So habe ich also relativ schnell Digitalisierungsanwendung geschrieben. Und dann exportiere ich das, wie auch immer, mit einem Button. Und das ist konsistent. Anstatt Klicke könnte ich sowas benutzen wie MouseMove. Ein Wort geändert und schon ein ganz anderes Event registriert. Nicht viel mehr Code.
18:22
Also nur eine Zeile geändert. Aber dann haben wir diesen Effekt halt, bei MouseMove wird ein Marker hinzugefügt. Ist ja so eine Spielerei. Da kann man jetzt eine halbe Stunde rumscrollen, aber bringt nichts. Aber ich will nur zeigen, dass man schnell einen anderen Event benutzen kann und nicht etwas ganz anderes schreiben muss. Einfach nur ein Wort austauschen. Genau.
18:41
Das was dazu. Kann auch mehrere Events auf einmal zuweisen. Statt immer MapOn macht man MapOn und dann ein Objekt, wo alles drin ist. Gruppe A. Aber ich kann auch in der Gruppe etwas zuweisen. Anstatt jedem Marker jetzt einen OnClick zuzuweisen, dann sage ich Gruppe OnClick und schon
19:02
ist dieser Event jedem Lehrer in der Gruppe zugewiesen. Also Pattern Code und jeden Datensatz in der Anwendung behandelt. Letztes Thema, GeoJSON. Wenn es komplexer wird, dann will ich nicht alles selbst digitalisieren oder Koordinaten eingeben. Dann benutze ich einfach GeoJSON. Ein Format
19:20
aus einer anderen Software. Also hier kann man jetzt nicht groß KML, GML, GPX laden. Geht auch mit Plugins. Aber generell arbeitet man einfach mit GeoJSON. Das Coole daran, der Befehl ist flexibel. Also wenn ihr euch damit auskennt, GeoJSON gibt es mehrere Ebenen. Es gibt nur die Geometrie. Oder es gibt ein ganzes Feature. Das hat nochmal Attribute. Die Properties. In meinem Fall fehlen die,
19:42
aber sind leer. Oder es kann eine Feature Collection sein. Die sammelt dann mehrere Daten. Auch verschiedene Datentypen. Und im Endeffekt, der Befehl, den liefert, ist einfach l.GeoJSON. Und dann gebe ich dann dieses Ding da ein und sage R2Map. Und schon habe ich einen richtig großen Datensatz in meiner Anwendung.
20:01
Genau, Bonus. Keine Zeit, ich weiß. Aber ich erwähne es trotzdem. Man kann auch jetzt L.E.F.L.E.D. nochmal ausmachen, indem man sagt, wir machen Geoverarbeitung in dieser Anwendung. Da gibt es zwei oder drei Forstgist-Vorträge von mir von den letzten Jahren. Einmal kurz googeln. Könnt ihr euch das anschauen. Also ich kann jetzt auch mit L.E.F.L.E.D. einen Puffer brechen, Intersect, Erase, alles Mögliche, was man im normalen Standard-Gist auch machen kann.
20:22
Auch gar nicht so schwierig. TURF funktioniert mit alles, mit OpenLayers, mit L.E.F.L.E.D., alles für L.E.F.L.E.D. versteht es. Aber vor allem hier wird es spannend. Genau, und wer schon mal ein Demo mit TURF anschauen möchte, auf unserer Webseite haben wir so ein kleines Dashboard bereitgestellt, da kann man einfach Daten hochladen und die dann live im Browser behandeln. Man sieht, dass ein Puffer eine Millisekunde dauert. Und das ist echt, echt
20:41
schön. Das Giststarten dauert schon länger. Also benutze ich lieber eine Web-Anwendung dafür. Genau, könnt ihr euch anschauen, ist ganz spannend. Kann man auch die Daten exportieren. Genau, und dann jetzt ist hier aber der Foskis versprochen, dass Weihnachten ein Buch, ein gutes Buch, rauskommt. Das Top-Weihnachtsgeschenk. Das hat zeitlich leider nicht so ganz gepasst. Aber jetzt ist es raus.
21:02
Ein besseres Cover auch, muss man sagen. Mehr Rezepte, also so ein Cookbook, dann kann man sich viele kleine Sachen beibringen. Und jetzt ist es halt ein Ostergeschenk, kein Weihnachtsgeschenk. Könnt ihr gerne hier bei Locate Press oder Amazon kaufen. Und wenn ihr mal reinschauen möchtet, ich bin unten noch beim geosys.gist-trainer-
21:22
ich bin aber nur 20 Minuten da, weil ich jetzt in der halben Stunde noch einen Workshop habe. Wer Lust hat, noch ein bisschen mehr Überliefer zu lernen, kommt bitte zu meinem Workshop. Ich glaube, wir sind noch ein paar Plätze frei. Und ich glaube, das war's dann auch schon. Danke.
21:43
Ja, nun mal. Vielen Dank für den schönen Vortrag.