horváth győző, tarcsi Ádám: online térképszolgáltatások társadalomtudományi kutatásokhoz

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

PDF

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

▪ Google

▪ 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