Horváth Győző, Tarcsi Ádám: Online térképszolgáltatások társadalomtudományi kutatásokhoz
- 1. Online térképszolgáltatások társadalomtudományi kutatásokhoz Horváth Győző, Tarcsi Ádám ELTE Informatika Kar Média- és Oktatásinformatikai Tanszék 1
- 2. Tartalom Bevezetés Online térképek Térképek alkalmazási lehetőségei Térképek készítése ▪ ▪ ▪ ▪ Fusion Tables GeoCharts Google Maps API OpenLayers API 2
- 3. Téma elhelyezése Területek ▪ Társadalomtudomány, szociológia ▪ Térképészet ▪ Informatika Határterület ▪ Online térképek Téma ▪ online térképek szociológiai kutatásokhoz Megközelítés ▪ Elsősorban informatikai oldalról 3
- 5. Térképek A térkép a valóság egy lehetséges modellje, amely meghatározott szabályok szerint képezi le a föld felszínét, és annak tulajdonságait. Térbeli objektumok halmaza 5
- 6. Térképek reneszánsza Információs társadalom Internetképes eszközök Térbeli információk térképen ábrázolhatók GIS (Geographic Information Systems) ▪ online térképek speciális GIS alkalmazások web ▪ univerzális ▪ állandóan elérhető ▪ eszközök (böngészők) folyamatosan fejlődnek 6
- 7. Online térkép Olyan online alkalmazás, amely valamilyen módon térképet használ fel ▪ ▪ ▪ ▪ ▪ ▪ jelölők képek alakzatok megjelenítése távolságmérés útvonaltervezés játék 7
- 8. Online térképek Web mapping ▪ térképek tervezése, implementálása, publikálása a weben ▪ elsősorban technikai folyamat Web cartography ▪ elméleti aspektusok vizsgálata Web GIS ▪ geoadatok feldolgozása, analizálása 8
- 9. Online térképek típusai Analitikus térképek Animált térképek Közösségi térképek Dinamikusan készített térképek Online atlaszok Élő adatokat megjelenítő térképek Statikus térképek 9
- 10. Architektúra Térképszerver Térképadat Térképkliens Szerver Kliens 10
- 11. Térkép szerverek MapServer Deegree GeoServer 11
- 12. Formátumok Adatformátumok PostGIS Oracle Spatial ArcSDE DB2 MySQL Shapefiles GeoTIFF GTOPO30 ECW, MrSID JPEG2000 Kimeneti formátum KML, GML2, GML3 Shapefile PDF GeoRSS, GeoJSON GIF, JPEG, PNG SVG 12
- 13. Webes szolgáltatások WFS - Web Feature Service WMS - Web Map Service WCS - Web Coverage Service VOWSS - Virtual OWS Service WPS – Web processing Service 13
- 14. Térképkliensek osztályozása Megjelenítés ▪ 2D ▪ 3D Platform ▪ ▪ ▪ ▪ webes alkalmazás asztali alkalmazás mobil alkalmazás mobilweb Szolgáltatók ▪ ▪ ▪ ▪ ▪ Google Yahoo Bing Microsoft stb 16
- 15. Térkép API-k A programkód nagy része előre meg van írva Függvénykönyvtárak ▪ Általános interfész ▪ Magas szintű műveletek Application Programming Interface (API) Térkép API ▪ A térképkezelés magas szintű, de általános műveletei ▪ Megjelenítés, mozgatás ▪ Különböző rétegek, objektumok kezelése 17
- 16. Web API 18
- 17. Web API Kliens-oldali API Szerver-oldali API AIM Atom Blogger DTC-XML Gdata GET hCalendar iCal Javascript JSON-RPC POST REST RSS SMS SOAP XML-RPC XMPP 19
- 18. Mashup 20
- 19. Hogyan működnek az online térképek? Objektumok azonosítása: (szélességi és hosszúsági ) koordináta Projekció (3D2D, sokféleképpen, Mercator) 21
- 20. Hogyan működnek az online térképek? A világtérképet felosztják raszteres térképekre, műholdfelvételekre, ún. mozaikcsempékre 22
- 21. Csempe koordináták Google csempe koordináták, 2-es nagyítás esetén. 23
- 22. További térképelemek Térképelemek ▪ Egyéb képek ▪ Jelölők ▪ Vektorgrafikus elemek ▪ Szövegek ▪ Egyéb objektumok Szolgáltatások ▪ ▪ ▪ ▪ ▪ Geokódolás Reverz geokódolás útvonaltervezés POI adatbázis grafikonok 24
- 24. Kutatási térképek Térbeli információval rendelkező adatok ábrázolása Térkép + adat Adat megjelenítése ▪ Térképbeli objektumok felhasználása Összefüggések keresése Tendenciák 26
- 25. Adatok megjelenítése Rétegek ▪ több réteg egymáson ▪ eltérő jellegű információk párhuzamos megjelenítése (pl. földrengések-atomreaktorok) ▪ előtte-utána térképek Jelölők ▪ egyéb információk csatolása ▪ jelölők összevonása Vektorgrafikus elemek ▪ grafikonok ▪ határok 27
- 26. Adatok megjelenítése Képek ▪ Jelölőkhöz adás ▪ Régi térképek Térképadatok ▪ Régi térképek 28
- 29. Google Föld – 3D objektumok rajzolása 31
- 30. Google Föld – 3D objektumok rajzolása 32
- 32. A 2007-es San Diego-i tűzvész 34
- 33. Diagram rajzolása a Térképre 35
- 36. A leginkább Twittelt turistahelyek 38
- 37. Google Maps példák http://www.morethanamap.com/demos/visu alization/population 39
- 43. Átlagos négyzetméter árak, 2008 47
- 44. Aktív korúak munkanélküli segélye 48
- 46. Eszközök Google Fusion Tables ▪ Google Drive ▪ http://www.google.com/drive/apps.html#fusiont ables CartoDB ▪ http://cartodb.com/ Speciális célra tervezett eszközök ▪ Ha nem megy vele programozás 50
- 47. Google Fusion Tables Saját adatok ▪ Excel ▪ Google Spreadsheet ▪ CSV 51
- 48. Google Fusion Tables Magyarország megyéi 52
- 49. Google Fusion Tables Heat map 53
- 51. Eszközök Térképalapú grafikonkészítő eszközök Minimális programozási ismeret Paraméterezési kérdés Adatok behelyettesítése Google Chart Tools ▪ GeoChart ▪ GeoMap (elavult) ▪ Intensity Map(elavult) 55
- 52. GeoChart regió mód Különböző régiók színezése az adatok szerint Régiók meghatározhatóak ▪ ▪ ▪ ▪ világ kontinens kontinens részlet (pl. Nyugat-Európa) ország ld. geochart_region.html 56
- 53. GeoChart jelölő mód Jelölők elhelyezése ▪ szín ▪ méret Régió megadható ld. geochart_marker.html 57
- 54. Google Maps Fusion Tables Layer Fusion Tables adatok is lekérdezhetők Rugalmas ld. fusion_tables_heatmap.html 58
- 55. PROGRAMOZÁS 59
- 56. Általános API-k Google Maps API OpenLayers API Leaflet PolyMaps stb. 60
- 57. Google Maps API Sokoldalú Többféle platform Kötött térképforrás API kulcs 61
- 58. Példa – 1. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src=/slideshow/horvth-gyz-tarcsi-dm-online-trkpszolgltatsok-trsadalomtudomnyi-kutatsokhoz/27556045/"http:/maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(47.4732826, 19.0636569); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> 62
- 59. OpenLayers API Nyílt forráskódú, kliens oldali JavaScript könyvtár interaktív webes térképekhez Asztali és mobil böngészők Szolgáltatófüggetlen (térképadat, licensz) Testreszabható stílusok, megjelenés Többféle projekció 63
- 60. Rétegek Több réteg egymás fölött Akármennyi, akármilyen típusú Cserélhető sorrend Kétféle réteg ▪ Alapréteg (csak 1 lehet) ▪ Fedőréteg (akármennyi) 64
- 61. Térkép megjelenítése Előkészületek ▪ JavaScript könyvtár letöltése (openlayers.org) ▪ HTML váz ▪ CSS Lépések 65
- 62. HTML váz <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My OpenLayers Map</title> <link type="text/css" rel="stylesheet" href="map.css" /> <script type="text/javascript" src=/slideshow/horvth-gyz-tarcsi-dm-online-trkpszolgltatsok-trsadalomtudomnyi-kutatsokhoz/27556045/"OpenLayers.js"></script> <script type="text/javascript"> var map; function init() { //The code goes here } </script> </head> <body onload="init();"> <div id="map"> </div> </body> </html> 66
- 63. JavaScript var map; function init() { map = new OpenLayers.Map('map', {}); var wms = new OpenLayers.Layer.WMS( 'OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'}, {} ); map.addLayer(wms); if(!map.getCenter()){ map.zoomToMaxExtent(); } } 67
- 64. Raszter rétegek Google Maps Bing (Microsoft) Yahoo! Maps OpenStreetMap WMS 68
- 65. Vektor réteg Általános megjelenítő réteg Interaktív Feature ▪ Vektorgrafikus elemek · kör · vonal · poligon ▪ Stílus ▪ Kapcsolt adat 69