horváth győző, tarcsi Ádám: online térképszolgáltatások társadalomtudományi kutatásokhoz
TRANSCRIPT
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
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
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
ONLINE TÉRKÉPEK
4
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
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
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
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
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
Architektúra
Térképszerver
Térképadat
Térképkliens
10
Kliens
Szerver
Térkép szerverek
MapServer
Deegree
GeoServer
11
Formátumok
Adatformátumok
PostGIS
Oracle Spatial
ArcSDE
DB2
MySQL
Shapefiles
GeoTIFF
GTOPO30
ECW, MrSID
JPEG2000
Kimeneti formátum
KML, GML2, GML3
Shapefile
GeoRSS, GeoJSON
GIF, JPEG, PNG
SVG
12
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
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
▪ Yahoo
▪ Bing
▪ Microsoft
▪ stb
16
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
Web API
18
Web API
AIM
Atom
Blogger
DTC-XML
Gdata
GET
hCalendar
iCal
Javascript
JSON-RPC
POST
REST
RSS
SMS
SOAP
XML-RPC
XMPP 19
Kliens-oldali API
Szerver-oldali API
Mashup
20
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
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
Csempe koordináták
Google csempe koordináták, 2-es nagyítás esetén.
23
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
TÁRSADALOMTUDOMÁNYI ÉS MARKETING ALKALMAZÁSOK
25
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
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
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
Heatmap - hőtérkép
29
Földrengések és atomreaktorok
30
Google Föld – 3D objektumok rajzolása
31
Google Föld – 3D objektumok rajzolása
32
KML információk megjelenítése
33
A 2007-es San Diego-i tűzvész
34
Diagram rajzolása a Térképre
35
Saját képréteg
36
Ókori görögország
37
A leginkább Twittelt turistahelyek
38
Google Maps példák
http://www.morethanamap.com/demos/visualization/population
39
Kistérségek fejlettsége
41
Belföldi vándorlási különbözet
42
Nyugdíjasok aránya
43
Alacsony nyugdíjúak aránya
45
Diplomások aránya, 2001
46
Átlagos négyzetméter árak, 2008
47
Aktív korúak munkanélküli segélye
48
TÉRKÉPKÉSZÍTÉS MAGAS SZINTŰ ESZKÖZÖKKEL
49
Eszközök
Google Fusion Tables
▪ Google Drive
▪ http://www.google.com/drive/apps.html#fusiontables
CartoDB
▪ http://cartodb.com/
Speciális célra tervezett eszközök
▪ Ha nem megy vele programozás
50
Google Fusion Tables
Saját adatok
▪ Excel
▪ Google Spreadsheet
▪ CSV
51
Google Fusion Tables
Magyarország megyéi
52
Google Fusion Tables
Heat map
53
GEOGRAFIKONOK – MINIMÁLIS PROGRAMOZÁS
54
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
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
GeoChart jelölő mód
Jelölők elhelyezése
▪ szín
▪ méret
Régió megadható
ld. geochart_marker.html
57
Google Maps Fusion Tables Layer
Fusion Tables adatok is lekérdezhetők
Rugalmas
ld. fusion_tables_heatmap.html
58
PROGRAMOZÁS
59
Általános API-k
Google Maps API
OpenLayers API
Leaflet
PolyMaps
stb.
60
Google Maps API
Sokoldalú
Többféle platform
Kötött térképforrás
API kulcs
61
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="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
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
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
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
HTML váz
66
<!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="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>
JavaScript
67
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(); } }
Raszter rétegek
Google Maps
Bing (Microsoft)
Yahoo! Maps
OpenStreetMap
WMS
68
Vektor réteg
Általános megjelenítő réteg
Interaktív
Feature
▪ Vektorgrafikus elemek
· kör
· vonal
· poligon
▪ Stílus
▪ Kapcsolt adat
69