Meteor – ein neuer Webframework-Stern

Als SW-Entwickler erlebt man bei der Nutzung von Web-Technologien immer mal wieder dieses Aha-Gefühl, sodass einem sofort deutlich wird: „Diese Technologie wird die Web-Entwicklung maßgeblich beeinflussen“. Die Programmiersprache, das Web-Framework oder die Denkweise, mit der man aktuell ein Web-Projekt umsetzt, wird in wenigen Jahren als schwergewichtig und veraltet angesehen werden.

Dieses Aha-Gefühl hatte ich gerade wieder, als ich die Meteor-Plattform ausprobiert hatte. Es scheint mir einen ähnlich wegweisenden Einfluss zu haben, wie andere bekannte Technologien:

Mit meiner kleinen Beispiel-Anwendung kann ein Anwender (passend zur Bundestagswahl 2013) seine Wahlstimme abgeben, welche Partei er wählt und einen entsprechenden Marker auf einer Karte in der Nähe seines Heimatortes setzen. Als clientseitige Standalone-Lösung läßt sich das einfach mit OpenLayers realisieren, allerdings sollen die Wahlstimmen serverseitig gespeichert werden und andere Clients automatisch benachrichtigt werden! Das Beispiel besteht gerade einmal aus 60 Zeilen HTML-Code und 160 Zeilen JavaScript-Code (davon 100 Zeilen für OpenLayers) !!! Ja, bei so wenig Code kann man sich drei Ausrufezeichen mal leisten.

Meteor: Wahlstimmen auf OpenStreetMap-Karte

Meteor: Wahlstimmen auf OpenStreetMap-Karte

Weiterlesen

Advertisements

GeoJSON erzeugen mit Java

Bei der Webentwicklung hat sich für den Austausch von Daten zwischen Server und Client das JSON-Format bewährt. Es ist gegenüber XML kompakter, lässt sich trotzdem einfach lesen und wird von JavaScript direkt in verwendbare Objekte umgewandelt. Eine spezielle JSON-Ausprägung für geografische Daten bildet das GeoJSON-Format. Dieses Format wird auch von OpenLayers unterstützt, sodass man keinen umfangreichen JavaScript-Umwandlungscode schreiben muss. Der folgende GeoJSON-Code enthält die Daten mit Geo-Koordinaten für drei Plätze in meiner Heimat:

{ "type": "FeatureCollection", "features": [
{ "type": "Feature", "id": 1, "properties": { "name": "", "image": "playground.png"} , "geometry": { "type": "Point", "coordinates": [8.5864, 52.8988] } },
{ "type": "Feature", "id": 2, "properties": { "name": "Balkan-Restaurant", "image": "restaurant.png"} , "geometry": { "type": "Point", "coordinates": [8.5992, 52.9106] } },
{ "type": "Feature", "id": 3, "properties": { "name": "carpe diem", "image": "hairdresser.png"} , "geometry": { "type": "Point", "coordinates": [8.5873, 52.9079] } }
] }

Wie wird jetzt dieser GeoJSON-Code serverseitig generiert? Da GeoJSON auch normales JSON ist, können wir es genauso generieren, wie wir JSON generieren würden. Manche Sprachen unterstützen die Transformation zwischen Objekten und JSON direkt:

  • JavaScript: JSON.stringify($object) und JSON.parse($string)
  • PHP: json_encode($object) und json_decode($string)

In Java müssen wir selber Code dafür schreiben oder eine entsprechende Bibliothek nutzen. Zum Glück gibt es allerhand Java-Bibliotheken für JSON. Mit den Bibliotheken org.json, json-simple und Jackson habe ich ausprobiert, wie leicht das Erzeugen von JSON mit solchen Bibliotheken von der Hand geht. Das ist nur eine kleine Auswahl von den über 20 auf json.org aufgelisteten Bibliotheken.

Weiterlesen

Bremer Landesgrenze mit OpenStreetMap-Daten und QGIS erzeugen

Bevor mir die Android-Anwendung „Nette Toilette Navigator“ für den Apps4Bremen-Wettbewerb in den Sinn kam, habe ich mit einer Webanwendung auf Kartenbasis spekuliert. Dazu passend hat Bremen auch Kartenmaterial in Form eines WMS-Dienstes zur Verfügung gestellt. Die interaktive Karte hätte per OpenLayers verschiedene Daten auf den Layern des WMS-Dienstes oder einer  OpenStreetMap-Karte angezeigt. Dabei sollte die Bremer Landesgrenze grafisch hervorgehoben werden. Leider konnte ich die Daten der Landesgrenze nicht so einfach finden, wobei sie natürlich bei OpenStreetMap auf irgendeine Art verfügbar sind.

Für meine bisherigen Karten mit OpenLayers und OpenStreetMap war es nie notwendig, Daten (wie die Landesgrenze) zuvor per GIS (Geographisches Informationssystem) aufzubereiten. Beim RHOK-Berlin hat mir allerdings ein Team-Kollege das Programm QGIS kurz gezeigt, sodass ich wusste, mit dem Programm müsste ich das eigentlich schaffen. In diesem Blog-Artikel beschreibe ich, wie man OpenStreetMap-Daten mit QGIS aufbereitet und das Ergebnis in die Karte der eigenen Webseite integriert:

Interaktive OpenStreetMap-Karte mit hervorgehobener Bundeslandgrenze

Weiterlesen

Location Picker auf Basis von OpenStreetMap

Ich stelle gerade ein Web-Projekt von Google Maps auf OpenStreetMap mit OpenLayers um. Das klappt größtenteils ganz gut, aber die Implementierung eines Location Pickers ging mir mit Google Maps leichter von der Hand als mit OpenStreetMap/OpenLayers. Das lag vielleicht auch daran, dass es für Google Maps weit mehr Beispiele gibt und ich ein passendes OpenStreetMap/OpenLayers-Beispiel nicht sofort gefunden habe. Dieses Beispiel hilft hoffentlich anderen Entwicklern, die ebenfalls einen Location Picker mit OpenStreetMap und OpenLayers realisieren wollen.

Mit meiner kleinen Beispielanwendung soll der Anwender Name, Adresse und Geo-Koordinaten von Sehenswürdigkeiten erfassen können. Die Anwendung besteht aus einer HTML-Seite mit JavaScript und einer Server-Komponente auf Basis von Java-Servlets. Anhand eines Markers auf einer Karte kann der Anwender die Position der Sehenswürdigkeit markieren, indem er den Marker auf der Karte verschiebt. Die Adresse kann händisch eingegeben werden oder sie wird von einem Geocoder-Dienst anhand der Geo-Koordinaten automatisch ermittelt. Ach, was erzähl ich – ein Bild sagt ja schon alles:

Location Picker mit OpenStreetMap

Weiterlesen

Markers für OpenStreetMap-Karten mit OpenLayers

Google hat die Lizenzbedingungen für die Verwendung der Maps-API angepasst und damit muss man jetzt eventuell für den Dienst zahlen (siehe auch Heise FAQ). Zum Glück gibt es ja das OpenStreetMap-Projekt (OSM), das eine kostenfreie Alternative bietet und jetzt sicherlich noch größere Verbreitung findet.

Viele Freiwillige sammeln für OSM weltweit Daten (z.B.: Straßenverläufe, Fahrradwege, Restaurants, Postkästen) und die erstellten OSM-Karten kann jeder für eigene Zwecke nutzen. OpenStreetMap liefert beispielsweise unter der Adresse http://a.tile.openstreetmap.org/8/134/83.png die folgende vorgefertigte, statische Karte aus:
Wenn wir allerdings wie mit Google Maps innerhalb einer Karte navigieren wollen, benötigen wir für unsere Webseite eine spezielle JavaScript-Bibliothek. Diese muss allerhand Aufgaben erledigen: Navigationselemente anzeigen, passende Karten-Bilder anfordern, diese Karten korrekt anzeigen und zusätzliche vom Benutzer festzulegende Elemente, wie Marker, darstellen. OpenLayers ist momentan die Standard-Bibliothek für diesen Einsatzzweck und wer OpenLayers mal einsetzen möchte, sollte sich einfach mal dessen zahlreichen Beispiele ansehen.
Weiterlesen