Baukasten für Webanwendungen

From OpenStreetMap Wiki
Jump to navigation Jump to search

broom

This article or section may contain out-of-date information. The information may no longer be correct, or may no longer have relevance.
If you know about the current state of affairs, please help keep everyone informed by updating this information. (Discussion)

broom

Help (89606) - The Noun Project.svg

OSM wird umso erfolgreicher, je besser es gelingt, die Daten aus der Geo-Datenbank in nützlichen Anwendungen zu verwenden und je mehr Menschen dies erfolgreich tun. Je leichter die Daten selektiert, dargestellt und genutzt werden können, desto motivierter und engagierter sind Aktive und desto mehr werden Dritte neugierig und aktiv. Desto qualitativer und stetiger ist das Wachstum und desto erfolgreicher wird OSM.

Goal

Einen Baukasten erstellen, der OSM-Anwendern erlaubt, eigene Websiten mit OSM-Daten zu bereichern.

Dieser Baukasten soll jedem ermöglichen, die OSM-Daten individuell zu nutzen.

Concept

Vorausgesetzt wird, dass der Anwender mit einem einfachen Texteditor und einem ftp-Programm umgehen kann. Damit soll er alle Aufgaben im Umgang mit dem Baukasten erledigen können. Die zentralen Dateien sind im Grundbaukasten enthalten. Alle Anpassungen und Erweiterungen werden als Textbausteine zur Verfügung gestellt, für die nachvollziehbar beschrieben wird, was sie leisten und wie sie eingebaut und konfiguriert werden. Variablen und Schalter werden besonders hervorgehoben und ihre Verwendung nachvollziehbar beschrieben. Für jede Anwendung gibt es ein anschauliches Musterbeispiel.

Basic Kit

Der Grundbaukasten besteht aus fertigen Dateien, die kopiert und auf den eigenen Server hochgeladen bereits lauffähig sind. Schon der Grundbaukasten enthält erste Variationsmöglichkeiten. Und er ist mit weiteren Bausteinen beliebig erweiterbar.

Workshop

Beim grossen OSM-Treffen in Essen (21.-23.11.2008) fand ein Workshop zum Thema "Baukasten für Web-Anwendungen" statt. Nach einem Brainstorming im Plenum arbeiteten 7 Teilnehmer an den Ideen und planten die Realisierung. Teilnehmer: Markus, Ulf, ...

Projectleader: Ulf

ToDo-List
...
Timetable
bis zum Jahresende sollen erste konkret anwendbare Ergenbisse vorliegen.

Think Tank

16 Teilnehmer haben in einem Brainstorming ihre Ideen auf Karten geschrieben. Diese wurden in sechs Bereiche zusammengefasst:

Daten aus OSM-DB filtern
suchen, auswählen, darstellen
eigene Daten darstellen
aus Datei, Liste, Tabelle
auf die Karte zeichnen
Linien, Flächen, Hinweispfeile, Sprechblasen
Wegbeschreibung
zu mir oder zu dir, Bus-/Bahnfahrplan
Community, Erfolg
Soziales Netz, Historie der Einträge, Statistik
Export
JPG, drucken, Daten

Ideas

  1. Suchen: nach Strasse & PLZ, POIs in bestimmtem Gebiet, POI-Auswahl mit anklickbaren Icons aus Liste
  2. Scroll-Bereich einschränken
  3. Objekte nach eigenen Bedürfnissen filtern
  4. für mich "unnütze" POIs ausblenden (Beispiel: Mitwettbewerber)
  5. Overlay mit Infos aus Relationen (Routen, ...)
  6. ungerenderte POIs anzeigen aus DB & eigener Quelle
  7. gib mir alle Ausflugsziele im Umkreis von x km
  8. Karte mit Pins: mehrere Pins auf einer Karte mit Sprechblase
  9. Beziehungen zwischen ausgewählten Daten darstellen
  10. POI-Wahl: POI-Typen ein-/ausblenden. In Basisdarstellung vom Darsteller vordefiniert, optional mit GUI zur Live-Änderung der dargestellten Punkte durch Anwender.
  11. eigene POIs als Layer darstellen
  12. Daten fremder Quellen über OSM legen
  13. Anbindung an eigene (Web-) Anwendung: Einbindung ohne grossen Programmieraufwand per Klick (Branchenbuch, Stadtwiki, Strassenseiten, ...)
  14. Karte mit Polygon oder Layer: Wahlkreisgrenzen etc. darstellen
  15. Klasse meines Sohnes mit Fotos anzeigen
  16. Polygone darstellen, Gebäudeflächen, Zonen
  17. POIs markieren
  18. Handskizze über Karte legen
  19. parametrisierbarer Renderer/Radroutenplaner für Radfahrer: mit einstellbarer Bevorzugung/Vermeidung von bestimmten Strassen-/Radwegarten (Surface)
  20. Wegepolygon darstellen
  21. GPX-Track darstellen: auf der Karte soll der per URL übergebene GPX-Track in der gewählten Farbe, Dicke und Lineatur dargestellt werden
  22. Anfahrtsbeschreibung: "so finden sie uns" mit einzugebendem Startpunkt, wahlweise per Auto, Rad, ÖPNV
  23. Routing zu uns. "so finden sie uns"
  24. Anfahrtskizze: so kommt man zu uns
  25. Fahrpläne von Bus-/Bahnlinien im Kartenausschnitt oder bei Klick auf die Linien oder Haltestellen
  26. Wo wohnt wer: Vereinsmitglieder, Kunden, Lieferanten
  27. Mitfahrgelegenheit: wer fährt von wo wann mit wem zum Treffen
  28. wo ich schon war: POI-Liste mit Fotos und Popup (XML, Excel) auf Karte anzeigen
  29. Mitglieder der Gruppe X in der Nähe von Y
  30. Verein möchte seine Mitglieder in verschiedenen Orten darstellen
  31. History-Slider
  32. ich will eine Box markieren und alle Änderungen die seit meinem letzten Besuch der Seite erfolgt sind angezeigt bekommen
  33. Darstellung und Vergleich von zeitlicher Entwicklung
  34. Sprechblasen
  35. klickbare Links: ein Klick auf einen hervorgehobenen Punkt, Linie oder Fläche verlinkt auf externe Website
  36. Karte mit Bubble-Pin: Bild der Destination anzeigen
  37. Beschriftung der POIs auf kyrillisch
  38. historische Karten (Mittelalter)
  39. Legende: durch Überschriften gegliederte Erklärung der dargestellten Objekte
  40. MuoseOver-Legende: Kurztext zu Punkt, Linie, Fläche bei MouseOver
  41. Karten zeichnen nach eigenen Vorgaben
  42. RSS-feed in Popups von POIs abonnieren
  43. POIs nur in bestimmten Zoomstufen: bei einem POI kann man hinterlegen, in welchen Zoomstufen er angezeigt wird
  44. Objekte nur in bestimmten Zoomstufen (vom Anwender wählbar)
  45. Eigene Symbole für Tags: bestehende Tags sollen mit eigenen Symbolen (GIF, etc.) dargestellt werden
  46. Karte nach eigenen Bedürfnissen stylen
  47. Textfelder einbinden
  48. eigene Farben zuordnen mit SVG
  49. Karte in Web-Seite eingebunden oder in neuem Fenster anzeigen
  50. Karte in Dokumente und Dateien einbinden
  51. eigenen Standort markieren, Popup-Text
  52. grafische Wegbeschreibung
  53. viele Punkte aus einer Liste in der Karte darstellen (Sehenswürdigkeiten, Einkaufsmöglichkeiten, Verkehrsverbindungen, Löschwasserentnahmestellen, Transportmittel etc)
  54. Polygone aus einer Liste in der Karte darstellen (Immobilien, Regionen)
  55. Daten aus einer eigenen Datenbank selektieren und anzeigen
  56. Daten aus OSM (regional) selektieren und anzeigen
  57. Auswahlmenü für verschiedene Layer
  58. Demonstration der Verwendung von www.microformats.org in Popups
  59. Polygon zeichnen und POI (eines best. Typs) innerhalb des Polygons in Datenbank oder Liste speichern
  60. eigene Spezialkarte erzeugen: Skipisten, Skitouren, Schlittelwege, Bergtouren, Kletterführer, Flusswanderkarte, Kajak-Touren, Radwege, Wanderkarte, Stadtplan, Touristenführer mit Hotels und Sehenswürdigkeiten, Infotafel
  61. Wegbeschreibung auf der eigenen Website
  62. Wegbeschreibung per eMail verschicken
  63. Reiseberichte erstellen (Route, Sehenswürdigkeiten, Fotos)
  64. Illustrationen erstellen für Wikipedia, Stadtwikis und andere Projekte
  65. Adressen aus Adressliste auf Karte anzeigen (keine Koordinate vorhanden)
  66. jedes Kartenelement hat ein Popup mit Zusatzinformation und Links
  67. Netzplan ÖPNV (auch zur mapping-QA geeignet)
  68. Vereinfachte Wegepläne für Anfahrt-/-gehbeschreibung, welche nur (wichtige) Kreuzungen begradigte Wege beinhaltet
  69. Daten nach Suchkriterien aus der OSM-Datenbank auslesen
  70. Aus der OSM-Datenbank ausgelesene Daten in der Karte darstellen
  71. Daten aus der OSM-Datenbank auslesen, die innerhalb eines Polygons liegen
  72. Daten aus der OSM-Datenbank auslesen, die innerhalb eines Radius liegen (Mittelpunkt per GPS oder Marker)
  73. Schiebeschalter um die Transparenz der Basiskarte zu regeln
  74. ...

Websurface

Der Baukasten soll über eine Weboberfläche steuerbar sein.

Example:

Build your own map - based on OpenStreetMap
Here you can generate a web page showing an OpenStreetMap customized to your needs.

Size
What should be the size of the map on your website?
O Width: ____ Height: ____ (pixels)
O Full Size (as large as possible)
O ... - give some recommendations for common usage scenarios.

Base Layer
The base map to display:
O Mapnik (default on OpenStreetMap.org, best looking street map, in most cases best choice)
O Osmarender (more details than Mapnik)
O Cycle Map (map dedicated to cyclists, with shadings)
O NoName (debugging: shows "where the streets have no name")
O informationfreeway.org (debugging: request rerendering of osmarender tiles) 

O Google
O Yahoo
O NASA World Wind
O Virtual Earth

O Your Own 1: _____
O Your Own 2: _____ 

Default base layer is: _____

O ... - how to best select sequence of layers?

Overlays
O Maplint
O Data
O Your Own 1: _____
O Your Own 2: _____
O GML
O KML
O Drawing
O ... - how to add the various possible ways of data display?

Map Section
O Position and Zoomlevel (Simply paste an example OSM URL here) _____

O Mark current position - use icon: _____
 
Additional Features
O Permalink (for later reuse, store the position and zoomlevel in the page URL)
O Map Key (Legend of symbols) ?
O Measure

OpenStreetMap on your web page

Some of the various ways to get a somehow customized OpenStreetMap on your own web pages.

Prerequisites

Well, before you start it's a good idea to have some basic knowledge about:

  • how to upload files to your web server (FTP client, ...)
  • how to work with an ASCII text editor (no, not MS Word!)
  • how html and javascript basically works

Basically: how to maintain a web page. Knowing how to work with Dreamweaver, Frontpage or alike is probably NOT enough!

Requirements for "your map"

Easy to set up?
You need a simple and "quick to set up" solution or special features that will probably "require more work"?
Static picture or "Slippy map"?
Is a simple map picture (e.g. png, ...) with a fixed area size (e.g. village, town, country, continent or world) enough or is a "slippy map" with variable zooming (like on openstreetmap.org) needed?
Area size?
You need to display an area with the size of a: Village, Town, Country, Continent, World?
Print?
Especially pages like "how to reach us" benefits from a simple possibility to print them.
Customized map rendering?
Do you need special map rendering, e.g. for a map emphasizing hiking trails?
Inclusion of your own data?
Do you want to display your own data on the maps, e.g. a collection of POIs or outlines of special objects?

Methods

Integrates into page with Difficulty / Effort "Slippy" Area Size Print Customized Rendering Render own data
Export tab Image (png, ...) Easy No Any Yes No No
Kosmos with default rendering Image (png, ...) Easy No <= City Yes No No
Kosmos with customized rendering Image (png, ...) Intermediate No <= City Yes Yes convert to .osm first
Openlayers.org with default maps JavaScript Intermediate Yes Any Screenshot No limited
Openlayers.org with customized maps JavaScript Advanced Yes Any Screenshot Yes Yes
Export Tab

Use the export tab on http://www.openstreetmap.org to create map pictures (png, pdf, ...) for static display on a web page. Unless you edit the resulting picture with Gimp or alike, there's no way to customize the rendering.

Kosmos

Use Kosmos to render your own map pictures (png, ...) for static display on a web page. It's possible (but requires effort) to implement your own map rendering. The maximum size of the rendered area is depending on the amount of data in that area. Depending on the developer machine, a city like Hamburg (1 million habitants) might the maximum here.

OpenLayers.org

Use OpenLayers to display a "Slippy" map on your web page. This is a flexible javascript framework to display various existing "slippy maps" like openstreetmap or Google Maps.

Solutions