OpenStreetMap 기반의 Mapbox 오픈소스 매핑 서비스

2016. 9. 1.

㈜ 이지매핑 대표 최규성

[email protected]

구두발표세션

2OpenStreetMap 기반의 Mapbox 오픈소스 매핑 서비스

브리태니카 백과사전 vs. 위키피디아


OpenStreetMap

무료로 사용하는 지도 데이터

• 전세계를 대상으로 하는 지도 구축 프로젝트 또는 그 성과물

• 자발적으로 수집하는 지리정보(VGI)의 대표적인 사례

• 약어: OSM

• www.openstreetmap.org

배경

• Wikipedia 성공에 착안하여 2004년 영국(Steve Coast)에서부터 시작

• 크라우드소싱에 의한 데이터 축적

• 추진 주체: OSM 재단

(OpenStreetMap Foundation, 비영리)

• 개방 데이터베이스 라이선스

(ODbL, Open Database License)


OpenStreetMap 초기화면 – www.openstreetmap.org


OSM 데이터 모델

요소 (Element) 비고

노드 (node) 포인트

노선 (way)

개방

폐합

면형

관계 (relation) 경로, 회전 제한, 다중폴리곤

태그 (tag) 노드, 노선, 관계에 적용하는 부속정보


Java 환경을 이용한 OpenStreetMap (OSM) 편집기

• GPL 라이선스를 따르는 오픈소스

• 윈도우용, Mac OS X용

• https://josm.openstreetmap.de

주요 기능

• OSM 데이터 (노드, 노선, 관계) 및 메타데이터 편집

• 배경 영상

• GPX 트랙 로딩

확장기능 (Extension)

• 플러그인 (Plugin)

• 프리셋 (Preset)

• 룰 (Rule)

• 스타일 (Style)

• 배경 (Background)

JOSM – Java OpenStreetMap Editor

https://josm.openstreetmap.de/


데이터 구축 매핑을 위한 지침

OpenStreetMap 온라인 도움말

OpenStreetMap 데이터 매핑 (구축가이드) – Mapping Guides by Mapbox

제3자 제공 e-Book – OpenStreetMap, Packt Publishing, Ltd.


OpenStreetMap 온라인 도움말

www.openstreetmap.org/help


OpenStreetMap 데이터 매핑 (구축 가이드) – 한눈에 보기

www.mapbox.com/mapping


OpenStreetMap e-Book

OpenStreetMap: Be your own Cartographer, Jonathan Bennett, Packt Publishing, Ltd. (2010)


OpenStreetMap 데이터 활용

OpenStreetMap

비상업용

상업용

ODbL

개방 데이터베이스 라이센스

ODbL : CC BY-SA 유사 (BY: Attribution, SA: Share-Alike)

• Mapbox• Mapzen• …


OSM에 대한 Mapbox 상용화 적용 사례

OpenStreetMap

Mapbox StreetsOpenStreetMap+ 독자적 확보 데이터

Mapbox Terrain USGS 등 13개 기관

Mapbox Satellite NASA, DigitalGlobe, USGS

사용자 보유 데이터

Terms of

Service

업데이트

개선

데이터 전담팀


Mapbox Streets

전세계 4,000만 Km 도로망

전세계 1억 2,600만 건물 및 관련 주소

전세계 200만 매핑 참여 사용자


스타일화된 Mapbox 맵 (6종)

Mapbox Streets Mapbox Outdoors Mapbox Dark

Mapbox Light Mapbox Satellite Mapbox Satellite Streets


문제 해결

ProblemSolving

Mapbox 활용 개념

데이터 맵 분석 도구

디자인Design

발행Publish

확장Extend


Mapbox 구성 요소

구성 요소

Building blocks

맵

(디자인, 데이터)

실시간 렌더링벡터 맵

개발자 도구

• 모바일 SDK• JavaScript API

검색 & 지오코딩 경로 영상

• 드론• 위성 영상

Mapbox


Mapbox 구성 요소

구성 요소 (상세)

TypeBuilding Block

Base Map

Design Tool

APIJavaScriptLibrary

맵Vector Maps

Mapbox Studio

개발자도구

Web services API:Styles, Uploads, Surface, Distance, Static, Tiles

Open source tools: Turf.jsGeospatial analysis

Open source tools: CarmenVector tile-based geocoder

Open source tools: TippecanoeBuilding vector tile datasets from GeoJSON

C++

Open source tools: RasterioR/W geospatial raster dataset

Python

검색 & 지오코딩

Geocoding API

경로 Directions API

영상Mapbox imagery

User’s imagery (Drone)


공간정보를 결합융합하는 방식

Mapbox구성요소

mix &match

웹사이트

App

맵

개발자도구

검색 &지오코딩 경로

영상


디자인 – 발행 – 확장

디자인Design

발행Publish

확장Extend

Mapbox Studio Mapbox GL JSMapbox.js

Mapbox EditorMapbox Static API

Mapbox SDK

데이터 맵 부가 기능

Geocoding APIDirections APIDistance API

Map Matching APITurf.js


사례 시연: 실시간 데이터 App (주문 – 패키지 배송 모니터링)

https://www.mapbox.com/home/video/packages.mp4


맵 갤러리

Mapbox Studio로써 디자인한 맵

www.mapbox.com/gallery

http://www.mapbox.com/gallery


개발자 도구 (1)

플랫폼

웹 서비스

디자인 도구


개발자 도구 (2)

오픈 소스 도구

기술 표준사양


Mapbox가 선도하는 기술 사양

Mapbox Vector Tile Specification

Mapbox GL Style Specification

MBTiles Specification

for encoding tiles vector data

for data drawing & style

for storing tiled map data in SQLite databases


적용 산업 분야

매핑 플랫폼을 필요로 하는 전 산업분야

www.mapbox.com/industries

부동산 교통 물류 농업 사회복지 정부행정 체력 & 야외 활동

재정 보험 천연 자원 안전 보건 언론매체 드론

http://www.mapbox.com/industries


도입 사례 SHOWCASE

모범적인 사례www.mapbox.com/showcase

Foursquare

Pinterest

National Geographic

Roadtrippers

Evernote

Financial Times

GitHub

Scoot

Etsy

http://www.mapbox.com/showcase


부동산 사례: ApartmentList

조건에 맞는

세입대상 아파트 검색

https://www.apartmentlist.com/

https://www.apartmentlist.com/


교통 사례: Rand McNally TripMaker

150년 전통 도로교통지도 회사

여행자를 위한 경로 및 교통관련 정보 제공

tripmaker.randmcnally.com

http://tripmaker.randmcnally.com/


물류 사례: Instacart

온라인 주문 식료품 배달, 픽업 서비스

미국내 식료품 점포망과 연계, 협업

www.instacart.com

http://www.instacart.com/


소셜네트워크 사례: FOURSQUARE

위치 기반의 소셜 네트워크 서비스

특정 장소 체크인 위치를 맵에 표시

www.foursquare.com

http://www.foursquare.com/


정부기관 사례: Federal Communications Commission (미국)

www.fcc.gov

통신망 대시민 서비스 수준,

통신사업자 경쟁현황 등을 맵에 표시

정보공개 및 대 의회 보고

www.fcc.gov

http://www.fcc.gov/

http://www.fcc.gov/


금융 사례: Square (모바일 결제)

새로운 개념의 POS

• 실시간 매출동향

• 판매 보고서

신용카드 결제시

• 앱을 이용하여 결제를 기록하고

• 연동하여 위치정보를 부가

squareup.com

https://squareup.com/


자원관리 사례: Department of Energy (미국)

energy.gov/maps 에너지 관련 자원현황을 매핑

• 지열 분포와 지열발전소

• 건물 에너지 효율성 개선 현황

• …

energy.gov/maps

http://energy.gov/maps

http://energy.gov/maps


치안 사례: Police.uk 범죄 지도 (영국)

www.police.uk

상세 도로망 수준 범죄 발생위치 지도를시민에게 서비스

시민은 필요에 따라 영역, 내용을 필터링하여 활용

https://www.police.uk/metropolitan/00BK17N/crime/


언론매체 사례: Financial Times

www.ft.com

지도학적 고품질, 사용자 정의지도 활용

비즈니스 뉴스 및 탐사 보도

http://www.ft.com/


서비스 모델

매핑 플랫폼

인프라형 서비스

플랫폼형 서비스

소프트웨어형 서비스

클라우드인프라

자가구축인프라

Mapbox 플랫폼

사용자 App

Cloud On-premise

• Mapbox for Cloud Mapbox.com

• Mapbox for On-premise Infrastructure Atlas Server


Mapbox 판매 플랜

플랫폼 사용 방식

스타터STARTER

스탠더드STANDARD

프리미엄PREMIUM

엔터프라이즈ENTERPRISE

Mapbox Studio SDK (iOS, Android, Web) Directions API Geocoding APITurf geospatial analysis Pre-made map style

무료

유료

유료

유료

업그레이드

업그레이드

업그레이드

+ more


Mapbox.com

AtlasServer

Mapbox 판매 플랜 비교

플랜제공 내용

스타터STARTER

스탠더드STANDARD

프리미엄PREMIUM

엔터프라이즈ENTERPRISE

저장 공간 1 GB 5 GB 50 GB !

월간 사용 맵 한도 50,000 100,000 1,000,000 5,000,000

월간 모바일 사용자 수 한도 50,000 80,000 300,000 300,000

Map Studio 스타일 한도 10 20 30!

custom

부가 서비스 –

• 스타터 서비스• E-mail 지원 우선

순위

• 스탠더드 서비스• 24/7 고급 지원• SLA 보증• 맵에서 Mapbox

로고 제거

• 프리미엄 서비스• 전담 매니저• 영구 지오코딩• Atlas Server

- On-premise- Offline

국제 표준 가격 (가이드) 무료 $49 / 월 $499 / 월 별도


Atlas Server

사용자 자가구축 인프라에서 운영하는 Mapbox

• 방화벽 내부 behind firewall

• 오프라인 offline

• 아마존 웹 서비스 AWS cloud

• 사용자용 Mapbox.js

• Turf 공간 분석

• 플러그인

- 히트맵- 밀도 클러스터- 마커 심볼 애니메이션- 레이어 스와이프- 커스터마이징, …

Mapbox Streets

사용자데이터 영상정보

• 드론• 위성

Ubuntu CentOS Red Hat Enterprise Linux


Atlas Server & Mapbox.js

Atlas Server

• 사용자용 버전의 Mapbox.js & Turf 라이브러리

• Leaflet 위에서 개발된 성과

Leaflet (www.leafletjs.com)

• 모바일에 친숙한 대화형(interactive) 맵 구현에 사용되는

오픈소스 JavaScript 라이브러리

• 개발자용 매핑 기능을 제공하는 33 KB 분량의 JavaScript

• 제3자 플러그인(plug-in)을 사용하여 손쉽게 기능을 확장

Leaflet 플러그인

http://www.leafletjs.com/


Leaflet 플로그인 (예)


Leaflet by Vladimir Agafonkin & a Team

Leaflet is developed by Vladimir Agafonkin of Mapbox

with a team of dedicated contributors


Mapbox.js 예제

데이터 애니메이션 라인.폴리곤 그리기 비디오.사진 링크

포인트 클러스터 실시간 데이터 그리기

https://www.mapbox.com/atlas/

https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/

https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/

https://www.mapbox.com/mapbox.js/example/v1.0.0/show-polygon-area/

https://www.mapbox.com/mapbox.js/example/v1.0.0/show-polygon-area/

https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-image-slideshow/

https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-image-slideshow/

https://www.mapbox.com/mapbox.js/example/v1.0.0/markercluster-with-mapbox-data/

https://www.mapbox.com/mapbox.js/example/v1.0.0/markercluster-with-mapbox-data/

https://www.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/

https://www.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/


Blog로 소개되는 특징 있는 맵 https://www.mapbox.com/blog/

Tableau에 임베드

대중교통(버스)

GPS 트랙 (대전)Flickr 사진 트래킹


Visualizing 3 Billion Tweets

https://www.mapbox.com/labs/twitter-gnip/locals

https://www.mapbox.com/labs/twitter-gnip/locals/#10/40.7591/-73.9852

https://www.mapbox.com/labs/twitter-gnip/locals/#10/40.7591/-73.9852


Querying Elevation Data from Drones

https://www.mapbox.com/blog/elevation-drone-data-surface-api




Financial Times: London Renting Crisis

https://www.mapbox.com/blog/financial-times-london-rent-map




요약 정리 Summary

Mapbox – 오픈 소스 매핑 플랫폼 (개발자 타겟)

기술 제품

서비스 모델 & 판매 플랜

판매플랜

스타터Starter

스탠더드Standard

프리미엄Premium

엔터프라이즈Enterprise

서비스모델

Mapbox.com클라우드 서비스

Atlas Server자가구축 서버


사람은 의미 있는 일을 위해

돈을 낙엽처럼 태울 줄 알아야 한다.

뿌리깊은 나무, 한창기

Technology

OpenStreetMap 기반의 Mapbox 오픈소스 매핑 서비스