www.facebook.com/datadesigner2015

1. Mapping

2. 오늘의 수업
재미없는 이론
매핑사례 : 재미와 지루함이 공존하는 영역
오늘의 수업 구성
재미있지만 머리아픈 매핑의 세계

3. 1. 매핑의 개념
컴퓨터 애니메이션에서 모델을 사실적으로 보이기 위해 2차원의 이미지를 3차원의 굴곡이 있는 표면 위로 옮
3D 모델링을 할 때 모델에 텍스쳐를 펴 바르는 작업 ② 레벨디자인 용어 중 하나로, 맵을 만드는 작업
스카우팅(scouting)에서 독지도(讀地圖 : map reading), 작지도(作地圖 : map making) 등과 함께 지도에 관한
3차원 물체 위에 질감이나 2D 이미지를 부여하는 과정. 2차원의 그림을 일정 좌표에 따라 부여하는 방법.
사상 (컴퓨팅) 텍스처 매핑 사상 (범주론) 메모리 맵 입출력 데이터 매핑 가상 메모리, 메모리 관리 기술 관계
한 집합 X의 각 원소 x에 집합 Y의 하나의 원소 y를 대응시키는 관계 f를 X에서 Y 안으로의 사상(대응, 변환 또
컴퓨터 애니메이션에서 모델을 사실적으로 보이기 위해 2차원의 이미지를 3차원의 굴곡이 있는 표면 위로 옮
3D 모델링을 할 때 모델에 텍스쳐를 펴 바르는 작업 ② 레벨디자인 용어 중 하나로, 맵을 만드는 작업
스카우팅(scouting)에서 독지도(讀地圖 : map reading), 작지도(作地圖 : map making) 등과 함께 지도에 관한
3차원 물체 위에 질감이나 2D 이미지를 부여하는 과정. 2차원의 그림을 일정 좌표에 따라 부여하는 방법.
사상 (컴퓨팅) 텍스처 매핑 사상 (범주론) 메모리 맵 입출력 데이터 매핑 가상 메모리, 메모리 관리 기술 관계
한 집합 X의 각 원소 x에 집합 Y의 하나의 원소 y를 대응시키는 관계 f를 X에서 Y 안으로의 사상(대응, 변환 또

4. 컴퓨터 애니메이션에서 모델을 사실적으로 보이기 위해 2차원의 이미지를 3차원의 굴곡이 있는 표면 위로 옮
3D 모델링을 할 때 모델에 텍스쳐를 펴 바르는 작업 ② 레벨디자인 용어 중 하나로, 맵을 만드는 작업
스카우팅(scouting)에서 독지도(讀地圖 : map reading), 작지도(作地圖 : map making) 등과 함께 지도에 관한
3차원 물체 위에 질감이나 2D 이미지를 부여하는 과정. 2차원의 그림을 일정 좌표에 따라 부여하는 방법.
사상 (컴퓨팅) 텍스처 매핑 사상 (범주론) 메모리 맵 입출력 데이터 매핑 가상 메모리, 메모리 관리 기술 관계
한 집합 X의 각 원소 x에 집합 Y의 하나의 원소 y를 대응시키는 관계 f를 X에서 Y 안으로의 사상(대응, 변환 또
컴퓨터 애니메이션에서 모델을 사실적으로 보이기 위해 2차원의 이미지를 3차원의 굴곡이 있는 표면 위로 옮
3D 모델링을 할 때 모델에 텍스쳐를 펴 바르는 작업 ② 레벨디자인 용어 중 하나로, 맵을 만드는 작업
스카우팅(scouting)에서 독지도(讀地圖 : map reading), 작지도(作地圖 : map making) 등과 함께 지도에 관한
3차원 물체 위에 질감이나 2D 이미지를 부여하는 과정. 2차원의 그림을 일정 좌표에 따라 부여하는 방법.
사상 (컴퓨팅) 텍스처 매핑 사상 (범주론) 메모리 맵 입출력 데이터 매핑 가상 메모리, 메모리 관리 기술 관계
한 집합 X의 각 원소 x에 집합 Y의 하나의 원소 y를 대응시키는 관계 f를 X에서 Y 안으로의 사상(대응, 변환 또
1. 매핑의 개념
?

5. 1. 매핑의 개념
굳이 개념을 정의 해야한다면,
컴퓨터를 이용하여 지도를 만드는 것뿐 만 아니라
지도를 데이터베이스화하는 것과 지도를 이용하는 기술을 말한다
자료 : [네이버 지식백과] 매핑기술 [mapping technique] (광물자원용어사전, 2010. 12., 한국광물자원공사)
매핑기술
[mapping technique ]

6. 1. 매핑의 개념
굳이 개념을 정의 해야한다면,
컴퓨터를 이용하여 지도를 만드는 것뿐 만 아니라
지도를 데이터베이스화하는 것과 지도를 이용하는 기술을 말한다
매핑기술
지도를 만들고
지도를 데이터베스화하고
지도를 이용하는 기술
=
[mapping technique ]

7. 1-2. 매핑 적용원리
어디일까요?

8. 1-2. 매핑 적용원리
1단계 : 기호의 의미와는 무관하게 공간적(기하학적)배열을 인식
2단계 : 파악한 정보에대해 개인이 가지고있는 지리적 지식을 적용.
지도의 정보처리 프로세스
자료: 사회과학명저재발견2 – 지도의 이해

9. 1-2. 매핑 적용원리
(어렵지 않아요)
지도 스키마

10. 1-2. 매핑 적용원리
3-6세 주변환경이라는 도메인과 지도라는 도메인을 비유하는 능력 형성
12세 지리적계층을 포함한 여러 이미지 스키마를 구사할 수 있는 능력 형성
지도 스키마

11. 1-3. 매핑의 종류
hexbin Graph
단계구분지도(Choropleth) 버블 그래프(Bubble Graph)

12. 1826년 제작 된 Baron Pierre Charles Dupin의 코로플레스지도.
[ 참고자료 :D3를 이용한 시각적 스토리텔링 ]
1-3. 매핑의 종류
단계구분지도
코로플레스 맵(Choropleth Map)이라고도 하며,
익숙한 모양 덕에 보는 이에게 친숙하게 받아들여진다.
또한, 주변 지역과의 관계를 쉽게 관찰 할 수 있다는 장점이 있다.
(단, 지역의 중요도와는 무관하게 크기만 크다면 지도에서 부각될 가능성이 있음.)

13. [ 뉴욕타임즈의 2004년 대통령선거지도 ]
1-3. 매핑의 종류
http://www.nytimes.com/packages/html/politics/2004_ELECTIONRESULTS_GRAPHIC/

14. 1-3. 매핑의 종류
버블맵
주로 지리데이터가 좌표(위경도 등)로 있을 경우 활용하며,
코로플레스맵에 비해 특정 위치를 정확하게 보여줄 수 있음
(버블맵이라고 언급하지 않는 경우도 많으니, 용어는 참고하는 정도로 보세요!)
http://bost.ocks.org/mike/bubble-map

15. 1-3. 매핑의 종류
http://www.nytimes.com/newsgraphics/2014/01/05/poverty-map/

16. 1-3. 매핑의 종류
http://www.nytimes.com/newsgraphics/2014/01/05/poverty-map/

17. (시작하기)
!!

18. 2-1. 지도 API 서비스
지도 데이터 지도 라이브러리
- 구글
- 다음
- 네이버
- OSM :
참고사이트
- Googlemap custom wizard :
- Mapbox map editor page :
http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html
https://www.mapbox.com/editor/#style
* 구글이 제공하는 국내지도의 경우 커스텀가능 형태가 아님
(벡터타일이미지형태)
: 커스텀가능하지만 국내지도는 불가
: 상세한 국내지도, 접근성 높음
: 상세한 국내지도, 높은 접근성
: 라이센스 부담없으며, 사용자 참여형태
- Leaflet JS
- Mapbox :
- CartoDB :
: 오픈소스, 커스텀 가능
: 지도 로드 및 이벤트 설정
: 지도API와 독립적으로 활용 가능
: 이벤트 핸들링 및 추가 커스텀 작업
시 활용하는 라이브러리
높은 수준의 디자인 가능
쉽고 편리한 데이터 매칭,
다양한 애니메이션 기능 제공
지도 활용기술
- Javascript
- D3.js
- jQuery

19. 2-1. 지도 API 서비스 - 활용사례
http://plus.hankyung.com/storytelling/library/
CartoDB + OSM
OSM의 지도데이터를 바탕으로하고, 데이터 바인딩 및 세팅은 CartoDB를 사용.
Daum API + jQuery
다음 지도를 바탕으로하고, 데이터 바인딩 및 세부적인 세팅은 제이쿼리를 활용.
http://plus.hankyung.com/storytelling/restaurants/

20. Base Layer
Mapping Layer
: geojson, topojson + 데이터바인딩한 형태
: 툴팁 등 다양한 이벤트를 적용하는 부분
* 이해를 돕고자 마커, 툴팁등 이벤트 관련영역을 하나로 묶어 커스텀레이어로 분류하였습니다.
*
:구글, 다음, 네이버, OSM등에서 제공하는 BASE LAYER
Custom Layer

21. 2-1. LeafletJS
LeafletJS
- 오픈소스 자바스크립트 라이브러리
- PC, 모바일에서 활용가능
- 사용지도에 따라 라이센스 걱정없이 활용가능
http://leafletjs.com

22. 2-1. LeafletJS
직접 해보쥬
1. 실습 환경 체크
2. 예시형태 확인
3. 간단실습 A - 위치찾기
4. 간단실습 B - 마커적용

23. 1. 실습 환경 체크
- localhost 상태확인
- 실습폴더 다운로드 확인
- 카카오톡 메시지 (미리)확인

24. 2. 예시형태 확인
- 코드 이해하기
- 예시 확인하기

25. 코드설명 1 example01/index.html<script src="js/leaflet.js"></script>
<script>
var map = L.map('map')
.setView( [ 위도, 경도 ], 줌 레벨 );
//타일레이어를 추가한다.
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: '<a href="타일이미지 URL">제작자</a>,<a href="지도제공자URL">
지도제공자</a>,<a href="CC URL">CC형태</a>',
maxZoom: 허용할 최대 줌 값
}).addTo(map);
</script>
</script>
</body>

26. <script src="js/leaflet.js"></script>
<script>
var map = L.map('map')
.setView( [ 위도, 경도 ], 줌 레벨 );
//타일레이어를 추가한다.
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: '<a href="타일이미지 URL">제작자</a>,<a href="지도제공자URL">
지도제공자</a>,<a href="CC URL">CC형태</a>',
maxZoom: 허용할 최대 줌 값
}).addTo(map);
</script>
</script>
</body>
(오늘 수정하려는 부분)
<script src="js/leaflet.js"></script>
<script>
var map = L.map('map')
.setView( [ 위도, 경도 ], 줌 레벨 );
//타일레이어를 추가한다.
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: '<a href="타일이미지 URL">제작자</a>,<a href="지도제공자URL">
지도제공자</a>,<a href="CC URL">CC형태</a>',
maxZoom: 허용할 최대 줌 값
}).addTo(map);
</script>
</script>
</body>
(오늘 수정하려는 부분)
코드설명 2example01/index.html

27. 3. 간단실습 A : 위치찾기
1. 위경도값 찾기 : mygeoposition.com
2. 코드내에 삽입하기
3. 줌레벨 조정하기

28. 3. 간단실습 A : 위치찾기
1. mygeoposition.com 접속 후 위/경도 값 얻기
2. 코드의 기존 좌표값을 새 위/경도 값으로 수정하기
3. 저장후 새로고침하여 결과확인하기
주소입력

29. 3. 간단실습 A : 위치찾기
1. mygeoposition.com 접속 후 위/경도 값 얻기
2. 코드의 기존 좌표값을 새 위/경도 값으로 수정하기
3. 저장후 새로고침하여 결과확인하기
1. 맵 기준 좌표변경
2. 맵 기준 좌표변경(순서 반대로)
* 필요하다면 객체의 속성값도 변경한다.

30. 3. 간단실습 A : 위치찾기
1. mygeoposition.com 접속 후 위/경도 값 얻기
2. 코드의 기존 좌표값을 새 위/경도 값으로 수정하기
3. 저장후 새로고침하여 결과확인하기

31. 응용 예제
실제 데이터를 바탕으로 다양한 형태의
지도위에 마커를 뿌려봅니다.

32. 3. 실습 : leafletJS + mapbox
1. 새로 업로드된 실습파일을 다운로드 받기
2. 간단실습 내용을 참고하여 빈칸에 적절한 데이터 넣기
3. 저장후 새로고침하여 결과확인하기

33. 감사합니다.
이메일주소 : leo@neuroacs.com

34. 1-2. 매핑 적용원리
어디일까요?