44
A Simple Way to Create a Web Infographic Map: For Public Data and Private Data MangoSystem Research Engineer | Hanjin Lee @jinifor

PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Embed Size (px)

Citation preview

Page 1: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

A Simple Way to Create a Web Infographic Map:

For Public Data and Private Data

MangoSystem Research Engineer | Hanjin Lee

@jinifor

Page 2: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 3: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Who����������� ������������������  Are����������� ������������������  We?!

Page 4: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 5: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 6: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 7: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

How����������� ������������������  to����������� ������������������  Get����������� ������������������  the����������� ������������������  ����������� ������������������  Public����������� ������������������  (Open)����������� ������������������  Data?

Page 8: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

8

NS����������� ������������������  Center����������� ������������������  (National����������� ������������������  Spatial����������� ������������������  Information����������� ������������������  Clearinghouse) https://nsic.go.kr

Page 9: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

9

Open����������� ������������������  Data����������� ������������������  Portal http://data.go.kr

Page 10: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

10

Seoul����������� ������������������  Open����������� ������������������  Data����������� ������������������  Plaza http://data.seoul.go.kr

Page 11: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

11

Seoul����������� ������������������  Open����������� ������������������  Data����������� ������������������  Plaza http://data.seoul.go.kr

Lat����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Lon

Page 12: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

United����������� ������������������  States����������� ������������������  of����������� ������������������  America����������� ������������������  (http://www.data.gov/)

Australia����������� ������������������  (http://data.gov.au/)

United����������� ������������������  Kingdom����������� ������������������  (http://data.gov.uk/)

Japan����������� ������������������  (http://data.go.jp/)

Page 13: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

PINOGIO����������� ������������������  Features?

Page 14: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

14

Open����������� ������������������  Source����������� ������������������  Stack

•PostgreSQL����������� ������������������  /����������� ������������������  PostGIS����������� ������������������  

•GXT����������� ������������������  Server����������� ������������������  (GeoServer����������� ������������������  WPS����������� ������������������  Extension)����������� ������������������  

•OpenLayers3����������� ������������������  /����������� ������������������  Leaflet

Page 15: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

#GXT

Page 16: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

16

GXT����������� ������������������  (Geoprocessing����������� ������������������  Engine)

GXT����������� ������������������  Core

Grid����������� ������������������  Coverage Custom

Vector����������� ������������������  Features Spatial����������� ������������������  Statistics

Geometry Statistics

GeoTools GeoAPI JTS JAI

Page 17: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

17

GXT����������� ������������������  (Geoprocessing����������� ������������������  Engine)

Category Function

GXT����������� ������������������  Modules

Geometry • Area,����������� ������������������  Buffer,����������� ������������������  Centroid,����������� ������������������  Distance,����������� ������������������  ManhattanDistance,����������� ������������������  Union

Vector • Overlay,����������� ������������������  Proximity,����������� ������������������  Calculation,����������� ������������������  Network

Raster• Surface,����������� ������������������  Interpolation,����������� ������������������  Density,����������� ������������������  Distance,����������� ������������������  Reclassification,����������� ������������������  Conversion

Statistics • Classification,����������� ������������������  Basic����������� ������������������  Statistics,����������� ������������������  Pearson,����������� ������������������  Regression

Spatial����������� ������������������  Statistics

• Pattern(Moran’s����������� ������������������  I,����������� ������������������  G-Statistics,����������� ������������������  Spatial����������� ������������������  LQ,����������� ������������������  Nearest����������� ������������������  Neighbor)����������� ������������������  • Distribution(Mean����������� ������������������  Center,����������� ������������������  Central����������� ������������������  Feature,����������� ������������������  Standard����������� ������������������  Distance,����������� ������������������  SDE)����������� ������������������  

• Cluster(k-means)

Custom• Extension����������� ������������������  Data����������� ������������������  Store����������� ������������������  • Web����������� ������������������  KOPSS����������� ������������������  algorithm����������� ������������������  Support

GXT����������� ������������������  Online����������� ������������������  Documentation����������� ������������������  (http://gxt.mangosystem.com/)

Page 18: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

18

GXT����������� ������������������  (Geoprocessing����������� ������������������  Engine)

Category Function

GXT����������� ������������������  Modules

Geometry • Area,����������� ������������������  Buffer,����������� ������������������  Centroid,����������� ������������������  Distance,����������� ������������������  ManhattanDistance,����������� ������������������  Union

Vector • Overlay,����������� ������������������  Proximity,����������� ������������������  Calculation,����������� ������������������  Network

Raster• Surface,����������� ������������������  Interpolation,����������� ������������������  Density,����������� ������������������  Distance,����������� ������������������  Reclassification,����������� ������������������  Conversion

Statistics • Classification,����������� ������������������  Basic����������� ������������������  Statistics,����������� ������������������  Pearson,����������� ������������������  Regression

Spatial����������� ������������������  Statistics

• Pattern(Moran’s����������� ������������������  I,����������� ������������������  G-Statistics,����������� ������������������  Spatial����������� ������������������  LQ,����������� ������������������  Nearest����������� ������������������  Neighbor)����������� ������������������  • Distribution(Mean����������� ������������������  Center,����������� ������������������  Central����������� ������������������  Feature,����������� ������������������  Standard����������� ������������������  Distance,����������� ������������������  SDE)����������� ������������������  

• Cluster(k-means)

Custom• Extension����������� ������������������  Data����������� ������������������  Store����������� ������������������  • Web����������� ������������������  KOPSS����������� ������������������  algorithm����������� ������������������  Support

GXT����������� ������������������  Online����������� ������������������  Documentation����������� ������������������  (http://gxt.mangosystem.com/)

'GXT����������� ������������������  uDig

����������� ������������������  ToolBox'

����������� ������������������  

Free����������� ������������������  for����������� ������������������  R

esearch����������� ������������������  a

nd����������� ������������������  Educa

tion!!����������� ������������������  

uDig����������� ������������������  Plug

in����������� ������������������  Update

����������� ������������������  URL:����������� ������������������  ����������� ������������������  

http://ww

w.mango

system.co

m:8080/g

xt_updat

es����������� ������������������  

Page 19: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Service����������� ������������������  Category

19

MAPS����������� ������������������  

LAYER����������� ������������������  

DATA

JSON,����������� ������������������  XML

JSP����������� ������������������  /����������� ������������������  Ajax

REST����������� ������������������  API

Page 20: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Service����������� ������������������  Category

20

Zone����������� ������������������  Layer

Base����������� ������������������  Map

MAPS����������� ������������������  

LAYER����������� ������������������  

DATA

Page 21: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Mango����������� ������������������  BaseMap

21

Mango����������� ������������������  BaseMap����������� ������������������  

(TMS)

Zone����������� ������������������  Layer

Base����������� ������������������  Map

MAPS����������� ������������������  

LAYER����������� ������������������  

DATA

Physical,����������� ������������������  Gray,����������� ������������������  Black…⋯

Page 22: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Zone(District)����������� ������������������  Layer

22

Zone����������� ������������������  Layer

Base����������� ������������������  Map

MAPS����������� ������������������  

LAYER����������� ������������������  

DATA

Page 23: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Zone(District)����������� ������������������  Layer

23

Zone����������� ������������������  Layer

Base����������� ������������������  Map

MAPS����������� ������������������  

LAYER����������� ������������������  

DATA

National����������� ������������������  point����������� ������������������  number• 100km����������� ������������������  • 10km����������� ������������������  • 1km����������� ������������������  • 100m����������� ������������������  • 10m

Page 24: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

0

#DATA1

Page 25: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

• Support����������� ������������������  Formats����������� ������������������  

• Vector����������� ������������������  Formats����������� ������������������  

• Raster����������� ������������������  Formats����������� ������������������  

• Transform����������� ������������������  support

#DATA

25

MAPS����������� ������������������  

LAYER����������� ������������������  

DATA

Page 26: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

The����������� ������������������  First����������� ������������������  World����������� ������������������  Map����������� ������������������  of����������� ������������������  Korea����������� ������������������  +����������� ������������������  

#LAYER

Page 27: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

#LAYER

27

MAPS����������� ������������������  

LAYER����������� ������������������  

DATA

Page 28: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

28

Spatial����������� ������������������  Statistics

=+

Population����������� ������������������  Cartogram����������� ������������������  ����������� ������������������  Sejong����������� ������������������  Metropolitan����������� ������������������  Autonomous����������� ������������������  City,����������� ������������������  South����������� ������������������  Korea����������� ������������������  

(http://www.sejong.go.kr/stat.do)

Page 29: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

29

Fishnet����������� ������������������  /����������� ������������������  Hexagon

Australian����������� ������������������  Land����������� ������������������  Tenure����������� ������������������  1993����������� ������������������  (source����������� ������������������  :����������� ������������������  http://data.gov.au/dataset)

Fishnet����������� ������������������  Features

Hexagon����������� ������������������  Features

Page 30: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

30

Map����������� ������������������  Styling����������� ������������������  Library

Page 31: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

31

COLOR����������� ������������������  BREWER����������� ������������������  2.0 http://colorbrewer2.org

Page 32: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

32

pinoStyler.js

Spectrum����������� ������������������  ����������� ������������������  Colorpicker

+

Color����������� ������������������  Brewer����������� ������������������  2.0

+

++

Page 33: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

33

pinoStyler.js

UN-GGIM-AP����������� ������������������  VGI����������� ������������������  Portal����������� ������������������  product����������� ������������������  by����������� ������������������  National����������� ������������������  Geographic����������� ������������������  Information����������� ������������������  Institute����������� ������������������  

(http://www.ngii.go.kr)

Page 34: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 35: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 36: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 37: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

Cloudy����������� ������������������  day

Sunny����������� ������������������  day

Rainy����������� ������������������  day

Page 38: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

S����������� ������������������  t����������� ������������������  a����������� ������������������  c����������� ������������������  k����������� ������������������  ����������� ������������������  

o����������� ������������������  f����������� ������������������  

H����������� ������������������  a����������� ������������������  n����������� ������������������  d����������� ������������������  s

#MAPS

Page 39: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

39

MAPS����������� ������������������  Template

…⋯…⋯

Page 40: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

PreviewSettings

Page 41: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

41

MAPS����������� ������������������  Contents

Page 42: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 43: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)
Page 44: PINOGIO : A simple way to create a web infographic map (피노지오 : 웹 인포그래픽 맵을 만드는 간단한 방법)

@jinifor

Thanks!

hjlee mangosystem.com