Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Karten-Webanwendungen erstellen mit Openlayers und Openstreetmap
Vortrag von Udo Pütz muon IT Dienstleistungen auf dem Software Freedom Day 2011 in Köln
2
Inhalt Vorstellung Mich Openstreetmap (OSM) Openlayers Grundlagen
Javascript PHP Anwendungen Slippy Map Points of Interest (POI) GPX Weiteres Reverse Lookup Openrouteservice
3
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
4
Vorstellung Openstreetmap
20. August 2004 17. Juli Limehouse Town Hall – 1. Mappingparty Weihnachten Benutzer angemeldet Hamburg zu 99,8% erfasst (
5
Vorstellung Openstreetmap Technik
GPS Positionen = einzelne Punkte gpx Potlatch2 Vektordaten Tileserver: Mapnik Osmarender Cycle Map
6
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
7
Grundlagen Javascript
<HTML> <script type= "text/javascript"> </HTML> Request Client Webserver
8
Grundlagen PHP <HTML> <?php <script type=
"text/javascript"> ?> </HTML> code.php: <HTML> <?php ... ?> </HTML> code.php: <HTML> ... </HTML> <HTML> <script type= "text/javascript"> </HTML> Request Client Webserver
9
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=" <script> function init() { map = new OpenLayers.Map("basicMap"); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); map.setCenter(new OpenLayers.LonLat( , ) // 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>
10
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 ,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>
11
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>
12
Weiteres Address/Reverse Lookup
Address Lookup h/129%20Deutz- Mülheimer%20Strasse,%20Deutz?format =xml&limit=1 Reverse Lookup e?format=xml&lat= &lon= &zoom=18&addressdetails=1 <reversegeocode timestamp="Thu, 15 Sep 11 17:21: " attribution="Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0." querystring="format=xml&lat= &lon= &zoom=18&addressdetails=1"> <result place_id=" " osm_type="node" osm_id=" " lat=" " lon=" ">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: " 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=" " more_url=" place_id=" " osm_type="node" osm_id=" " place_rank="30" boundingbox=" , , , " lat=" " lon=" " 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>
13
Weiteres Reverse Geocode - Beispiel
14
Weiteres OpenRouteService
15
EOF udo.puetz@muon.de http://muon.de Twitter.com/muonIT
Ähnliche Präsentationen
