Karten-Webanwendungen erstellen mit Openlayers und Openstreetmap Vortrag von Udo Pütz muon IT Dienstleistungen auf dem Software Freedom Day 2011 in Köln 17.9.2011
Inhalt Vorstellung Mich Openstreetmap (OSM) Openlayers Grundlagen Javascript PHP Anwendungen Slippy Map Points of Interest (POI) GPX Weiteres Reverse Lookup Openrouteservice
Vorstellung Udo Pütz Udo Pütz Studium der Physik (ohne Abschluß) Ausbildung Fachinformatiker Systemintegration 4 Jahre Angestellter in IT Unternehmen Seit August 2011Selbstständig nicht wirklich Programmierer
Vorstellung Openstreetmap 20. August 2004 17. Juli 2005 Limehouse Town Hall – 1. Mappingparty Weihnachten 2005 1000. Benutzer angemeldet 24.10.2008 Hamburg zu 99,8% erfasst (http://www.golem.de/0810/63151.html)
Vorstellung Openstreetmap Technik GPS Positionen = einzelne Punkte gpx Potlatch2 Vektordaten Tileserver: Mapnik Osmarender Cycle Map
Vorstellung Openlayers 30 Juni 2005: Von MetaCarta nach der O'Reilly Where 2.0 Konferenz gestartet 27 Juni 2006: Release 1.0 November 2006: OpenStreetMap stellt die "slippy map" basierend auf OpenLayers vor
Grundlagen Javascript <HTML> <script type= "text/javascript"> </HTML> Request Client Webserver
Grundlagen PHP <HTML> <?php <script type= "text/javascript"> ?> </HTML> code.php: <HTML> <?php ... ?> </HTML> code.php: <HTML> ... </HTML> <HTML> <script type= "text/javascript"> </HTML> http://server/code.php Request Client Webserver
Anwendung Slippy map <html> <head> <title>OpenLayers Demo</title> <style type="text/css"> html, body, #basicMap { width: 500; height: 500; margin: 0; } </style> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script> function init() { map = new OpenLayers.Map("basicMap"); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); map.setCenter(new OpenLayers.LonLat(6.986915, 50.94915) // Center of the map .transform( new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection ), 15 // Zoom level ); </script> </head> <body onload="init();"> <div id="basicMap"></div> </body> </html>
Anwendung Points of Interest (POI) Liste mit Punkten von Interesse Spezielle Syntax: lat lon icon iconSize iconOffset title description Einzelne Felder jeweils durch Tab getrennt 50.94915 6.9869 http://www.../marker.png 21,25 -10,-25 Coworking Cologne Software Freedom Day 2011 Code-Erweiterung: ); var poi = new OpenLayers.Layer.Text( "POIs", { visibility: true, location:"/poi.txt" } ); map.addLayer(poi); </script> </head> <body onload="init();"> <div id="basicMap"></div> </body> </html>
Anwendung GPX GPS Handys zeichnen in dem Format auf Code-Erweiterung: ); var gpx = new OpenLayers.Layer.GML( "gpx", “route.gpx”, { format: OpenLayers.Format.GPX, style: {strokeColor: “red”, strokeWidth: 4, strokeOpacity: 0.5} } ); map.addLayer(gpx); </script> </head> <body onload="init();"> <div id="basicMap"></div> </body> </html>
Weiteres Address/Reverse Lookup Address Lookup http://nominatim.openstreetmap.org/searc h/129%20Deutz- Mülheimer%20Strasse,%20Deutz?format =xml&limit=1 Reverse Lookup http://nominatim.openstreetmap.org/revers e?format=xml&lat=50.94915&lon=6.98691 5&zoom=18&addressdetails=1 <reversegeocode timestamp="Thu, 15 Sep 11 17:21:22 -0400" attribution="Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0." querystring="format=xml&lat=50.94915&lon=6.986915&zoom=18&addressdetails=1"> <result place_id="2063373073" osm_type="node" osm_id="1069220713" lat="50.949154" lon="6.986928">Coworking Cologne, 129, Deutz-Mülheimer Straße, Deutz, Köln, Regierungsbezirk Köln, Nordrhein-Westfalen, 51063, Deutschland</result> <addressparts> <leisure>Coworking Cologne</leisure> <house_number>129</house_number> <road>Deutz-Mülheimer Straße</road> <suburb>Deutz</suburb> <city>Köln</city> <county>Köln</county> <state_district>Regierungsbezirk Köln</state_district> <state>Nordrhein-Westfalen</state> <postcode>51063</postcode> <boundary>51063</boundary> <country>Deutschland</country> <country_code>de</country_code> </addressparts></reversegeocode> <searchresults timestamp="Thu, 15 Sep 11 17:30:14 -0400" attribution="Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0." querystring="129 Deutz-Mülheimer Strasse, Deutz" polygon="false" exclude_place_ids="2112888611" more_url="http://open.mapquestapi.com/nominatim/v1/search?format=xml&exclude_place_ids=2112888611&accept-language=de,en;q=0.5&q=129+Deutz-M%C3%BClheimer+Strasse%2C+Deutz"><place place_id="2112888611" osm_type="node" osm_id="955155215" place_rank="30" boundingbox="50.9391157532,50.9591195679,6.97696184158,6.99696231842" lat="50.9491175" lon="6.9869619" display_name="DingFabrik e.V., 129, Deutz-Mülheimer Straße, Deutz, Köln, Regierungsbezirk Köln, Nordrhein-Westfalen, 51063, Deutschland" class="leisure" type="hackerspace"/></searchresults>
Weiteres Reverse Geocode - Beispiel
Weiteres OpenRouteService
EOF udo.puetz@muon.de http://muon.de Twitter.com/muonIT http://test.muon.de/sfd.html http://test.muon.de/sfd-poi.html http://test.muon.de/sfd-gpx.html