웹 개발자를 위한 최고의 온라인 매핑 도구 설문조사: 로드맵에 대한 로드맵

게시 됨: 2022-03-11

유용하고 좋은 지도만큼 좋은 것은 없습니다.

오늘날 온라인 지도를 사용하는 것은 쉽고 매력적인 과정입니다. 자신만의 온라인 지도를 만드는 것은 더 이상 큰 일이 아닙니다. 무료 및 단순한 것부터 풍부하고 사용하기 복잡한 기능에 이르기까지 광범위한 온라인 매핑 도구를 마음대로 사용할 수 있습니다. 웹 매핑에 익숙하지 않은 웹 개발자에게는 선택의 고뇌가 겁이 날 수 있습니다. 지도를 만들고 싶지만 어디서부터 시작해야 하고 어떤 도구를 사용해야 할지 모릅니다. 최고의 매핑 도구 목록을 돕기 위해 여기 있습니다.

약간의 역사

기술은 처음부터 지도 제작과 지도 사용 방식에 영향을 미쳤습니다. 기술이 발전함에 따라 파피루스에 수동으로 그린 지도에서 웹상의 대화형 지도에 이르기까지 지도 제작 및 지도 제작 프로세스가 함께 발전했습니다.

과거의 매핑.

20세기 후반은 지도 제작의 전환점이었습니다. 컴퓨터는 선택 도구가 되었습니다. 항공 사진, 위성 이미지 및 원격 감지는 공간 데이터 수집 방식을 변경했습니다. 지리 정보 시스템(GIS)이 탄생했습니다. 결국 GIS 지도는 데스크톱에서 웹으로 이동하기 시작했고 대형 GIS 공급업체는 온라인 지도를 위한 첫 번째 프레임워크를 만들기 시작했습니다.

그러나 GIS 매핑은 쉽지 않습니다. 구현과 함께 많은 서버 측 기술, 지리 공간 표준 및 프로토콜이 필요합니다. 지리 공간 데이터 및 지도 투영법에 대한 이해, 데이터 수집 방법, 데이터 표시 방법, 사용할 색상, 데이터를 특정 축척으로 일반화하는 방법, 지도에 레이블을 배치하는 방법, 설정 방법에 대한 지식이 필요합니다. 지도를 제공할 서버, 공간 데이터베이스 사용 방법 등. GIS는 WMS, WFS, EPSG, CRS, SLD, GML, TMS와 같은 약어로 가득 차 있으며, 그것들을 알고 이해하려면 책, 학술 논문 및 기사를 읽어야 합니다.

온라인 매핑의 진화

첫 번째 웹 맵은 일반적으로 매우 작은 단일 맵 이미지만 표시했습니다. 그 당시 패닝은 N, NW, W, SW, S, SE, E, NE의 8가지 가능한 나침반 방향 중 하나로 일반적으로 지도 크기의 절반으로 한 단계 이동하여 구현되었습니다. 사용자가 이동 또는 확대/축소 버튼을 클릭한 후 완전히 새로운 이미지를 맵 서버에서 렌더링하고 네트워크를 통해 로드한 다음 브라우저에서 처리해야 합니다. 기술의 제약으로 인해 지도는 전체 웹 페이지에서 아주 작은 부분만을 차지했습니다. 더 나은 상호 작용을 위해 초기 맵에는 Flash와 같은 플러그인이나 Java 기반의 적절한 플러그인이 필요했으며 Internet Explorer에서만 작동하는 ActiveX도 필요했습니다.

Google은 2005년 Google Maps를 출시하면서 지도 세계를 완전히 뒤집어 놓았습니다. 그 혁신 중 Google은 드래그하여 지속적인 패닝을 도입했습니다. 그들의 해결책은 "타일"이라고 하는 여러 개의 작은 정사각형 이미지로 분할된 지도를 표시하는 것이었습니다. 이러한 타일은 "지도 타일 서버"에서 렌더링 및 제공되었으며 일반적으로 256 x 256픽셀입니다. 확대/축소 및 패닝은 이제 전체 웹 페이지를 다시 로드하는 대신 새 지도 타일을 로드하기만 하면 됩니다. 그 결과 브라우저 창의 절반 이상을 덮고 지도 탐색을 위한 부드러운 경험을 제공하는 더 큰 가시적 지도가 생성되었습니다. 부드러운 확대/축소 및 패닝 기능으로 지도를 "슬립"하는 기능 때문에 이러한 새 맵을 "미끄러운 맵"이라고 불렀습니다. Google은 또한 스크립팅을 허용하여 사용자가 Google 지도를 자신의 웹사이트에 올리고 지도에 자신의 데이터를 추가할 수 있었습니다. 이로 인해 "맵 매시업"이라는 또 다른 새로운 용어가 만들어졌습니다.

갑자기 온라인 지도가 대중화되었습니다. 멋진 지도를 웹사이트에 추가하기 위해 더 이상 지도 제작자나 GIS 전문가가 될 필요가 없습니다. "웹 2.0" 운동의 날개에서 HTML5, CSS3 및 SVG와 같은 현대 기술을 기반으로 대화형 콘텐츠를 쉽게 만들 수 있는 대화형 지도는 이제 새로운 르네상스를 살고 있습니다.

미래의 매핑?

지도 데이터

앞서 언급했듯이 초기 온라인 지도는 GIS 데이터 세트와 공간 지리 데이터베이스를 기반으로 했습니다. 가격표는 말할 것도 없고 그 데이터에 접근할 수 있는 사람은 많지 않았습니다. Google과 OpenStreetMap(OSM) 프로젝트 데이터세트가 이를 변경했습니다. Google의 데이터베이스는 비공개이며 제한이 있는 반면 OSM은 무료 세계 지도를 만들기 위한 공동 프로젝트인 Wikipedia의 개념에서 영감을 받았습니다. OpenStreetMap은 공간 데이터에 기여하고 유지 관리하는 자원 봉사 맵퍼 커뮤니티에 의해 구축되었습니다.

요컨대, 오늘날의 손쉬운 지도 제작에 기여한 가장 큰 혁명은 지도 서버 및 공간 데이터베이스 유지와 관련된 문제가 제거되었다는 것입니다.

웹 매핑 프레임워크 선택

그렇다면 모든 옵션에서 올바른 온라인 매핑 도구를 선택하는 방법은 무엇입니까? 한편으로는 Google, MapQuest, Microsoft 및 Nokia와 같은 상용 온라인 지도 제공업체가 있습니다. 이러한 서비스는 지도 타일을 보고 지도와 상호 작용할 수 있는 적절한 JavaScript API와 지도 타일을 제공합니다. 반면에 OpenStreetMap 기반 지도 타일을 쉽게 로드할 수 있는 오픈 소스 매핑 프로젝트가 있습니다. 여기에는 OpenLayers 및 Leaflet이 포함됩니다. 그리고 오픈 소스 라이브러리와 OSM 데이터를 기반으로 비즈니스 모델을 만들고 부가가치를 제공하지만 무료가 아닌 MapBox 및 CartoDB와 같은 프로젝트가 있습니다.

각 범주의 몇 가지 예를 살펴보겠습니다. 여기에서는 이러한 온라인 매핑 도구 중 몇 가지에 대해 설명하고 각각에 대한 간략한 개요를 코드 예제와 함께 제공하고 장단점을 비교하겠습니다. 우리는 또한 별도의 읽을거리로 흥미롭게 볼 수 있는 D3.js 매핑 튜토리얼을 작성했습니다.

구글지도

가장 확실한 선택인 Google 지도부터 시작하겠습니다. Google Maps API의 첫 번째 버전은 2005년 2월에 소개되었으며 현재 Google Maps API v3는 2009년 6월에 출시되었습니다. Google Maps API는 단순한 JavaScript API 끝점이 아닙니다. 여기에는 더 많은 프로젝트가 포함되어 있으며 광범위한 사용자 정의를 통해 Google 지도를 웹 페이지에 삽입하는 여러 가지 방법을 제공합니다.

현재 사용 가능한 Google Maps API는 다음과 같습니다.

Google 지도 자바스크립트 API
Google 정적 지도 API
Google 지도 포함 API
iOS용 Google 지도 SDK
구글 지도 안드로이드 API v2

올바른 API를 선택하는 데 도움이 되도록 Google은 API 선택기를 개발했습니다.

기본 API는 무료이지만 몇 가지 제한 사항이 있다는 점은 주목할 가치가 있습니다. 첫 번째는 지도가 최종 사용자가 무료로 공개적으로 액세스할 수 있어야 한다는 것입니다. 두 번째는 사용 제한입니다. 사이트에서 90일 동안 매일 25,000개 이상의 지도 로드를 생성하지 않는 한 서비스는 무료입니다. 더 큰 축척이 필요하거나 개인 지도가 필요하거나 기업 또는 상업용 웹사이트를 운영하는 경우 Google Maps API for Work에 대한 비용 지불을 고려해야 합니다.

구현

다음은 코드에서 간단한 Google 지도를 구현하는 방법의 예입니다. API를 사용하여 간단한 지도를 만들고, 지도에 마커를 배치하고, 마우스 클릭으로 팝업을 여는 방법을 보여줍니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(45.8167, 15.9833), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: new google.maps.LatLng(45.8167, 15.9833), map: map }); google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infowindow.setContent("Zagreb"); infowindow.open(map, marker); } })(marker)); </script> </body> </html>

결과 맵은 다음과 같습니다.

장점

Google에서 개발 및 유지 관리합니다.
웹사이트나 애플리케이션에 지도를 포함하기 위한 다양한 API.
큰 사용자 커뮤니티.
많은 예제와 함께 아주 좋은 API 문서.

단점

우리는 어느 시점에서 추가를 보지 않을 것이라고 확신합니까?
모두가 그것을 사용하고 있습니다. 모든 지도(대부분)는 동일하게 보입니다.
폐쇄적이고 적절한 API.
Google에서 공식적으로 개발한 플러그인 외에는 플러그인이 없습니다.
Google Maps for Work의 가격이 불분명합니다.

오픈레이어

OpenLayers는 MetaCarta에 의해 Google Maps와 동등한 오픈 소스로 개발되었으며 첫 번째 버전은 2006년 6월에 게시되었습니다. OpenLayers는 풍부한 웹 기반 지리 응용 프로그램을 구축하기 위해 JavaScript API를 구현하는 온링 매핑 도구입니다. 구글 지도 API. OpenLayers는 매우 빠르게 많은 주목을 받았고 초기 개발 속도도 빨랐습니다. OpenLayers 2는 2006년 8월 버전 1 이후 두 달 만에 출시되었습니다. 라이브러리는 지속적으로 개발 중이었고 새로운 기능을 갖춘 새 버전이 지속적으로 추가되었습니다. 이 급속한 발전의 단점은 버전 2 라이브러리가 매우 크고 투박해져서 결국 크기가 1MB에 이르고 100,000라인이 넘는 코드를 포함한다는 것입니다! 많은 기능이 제공되었지만 일반 사용자에게 모든 기능이 필요한 것은 아닙니다.

이것이 라이브러리를 포괄적으로 재작성한 주요 이유였습니다. 목표는 투영, 표준 프로토콜 및 편집 기능 지원과 같은 OpenLayers 2와 동일한 기능을 사용하여 최신 HTML5 및 CSS3 기능을 대상으로 하는 것이었습니다. 주요 초점은 성능 개선, 더 가벼운 빌드, 더 멋진 시각적 구성 요소 및 더 나은 API에 있었습니다. 이 크게 개선된 OpenLayers 3는 2014년 8월에 게시되었습니다.

구현

이번에는 OpenLayers 3를 사용하여 이전 예제와 동일한 맵을 살펴보겠습니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://openlayers.org/en/v3.2.1/build/ol.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.2.1/resources/jquery.min.js"></script> <script src="http://openlayers.org/en/v3.2.1/resources/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css"> </head> <body> <div class="map"> <div></div> </div> <script type="text/javascript"> var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857')), name: 'Zagreb', }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ target: document.getElementById('map'), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], controls: ol.control.defaults(), view: new ol.View({ center: ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) }); var element = document.getElementById('popup'); var popup = new ol.Overlay({ element: element, positioning: 'bottom-center', stopEvent: false }); map.addOverlay(popup); map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); $(element).popover('show'); } else { $(element).popover('destroy'); } }); map.on('pointermove', function(e) { if (e.dragging) { $(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); </script> </body> </html>

결과:

장점

무료 및 오픈 소스.
매핑 요구 사항을 위한 기능이 풍부한 라이브러리.
많은 예.
다양한 데이터 유형 및 GIS 표준을 지원합니다.
지도 투영 및 편집 기능에 대한 기본 제공 지원.

단점

버전 3은 여전히 활발히 개발 중이며 API는 여전히 모든 포인트 릴리스와 함께 변경됩니다.
복잡한 API 구문.
버전 3 문서는 현재 가능한 만큼 철저하지 않습니다.

전단

Leaflet은 OpenLayers의 팽창, 혼란 및 복잡성에 대한 반응으로 탄생했다고 말하는 것이 안전합니다. Vladimir Agafonkin은 OpenLayers에 대한 래퍼를 구축하라는 요청을 받았지만 대신 간단하고 가벼운 OpenLayers 대안을 만들었으며 2011년 5월에 Leaflet이 탄생했습니다. Vladimir는 이 온라인 지도 도구의 단순성, 성능 및 유용성에 중점을 두었습니다. 핵심 라이브러리에는 대부분의 실제 사용 사례에 충분한 기본 기능만 있습니다. 그래도 Leaflet은 개발하기 쉽고 핵심 라이브러리 위에 추가할 수 있는 엄청난 양의 플러그인으로 확장할 수 있습니다. 또한, Leaflet은 모바일 지원을 염두에 두고 처음부터 개발되었습니다.

Leaflet은 사용하기 쉽고 GitHub에서 사용할 수 있는 간단한 소스 코드와 함께 잘 문서화된 API를 가지고 있습니다. 성능, 사용성, 단순성, 작은 크기 및 모바일 지원에 중점을 둔 결과 OpenLayers보다 훨씬 덜 복잡합니다.

리플릿의 미래도 흥미롭다. Vladimir에 따르면 그는 다음 주요 릴리스를 더욱 단순하게 만들고 성능을 더욱 향상시키며 플러그인 인프라를 업그레이드할 계획이라고 합니다.

구현

이번에는 Leaflet을 사용하여 구현한 동일한 맵을 다시 한 번 보여줍니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div></div> <script type="text/javascript"> var map = L.map('map').setView([45.8167, 15.9833], 10); var mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'; L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7'}).addTo(map); var marker = L.marker([45.8167, 15.9833]).bindPopup("Zagreb").addTo(map); </script> </body> </html>

장점

무료 및 오픈 소스.
작고 빠릅니다.
간단하고 쉬운 API 구문.
모바일 친화적.
빠르고 쉽게 온라인 지도를 얻는 데 좋습니다.
아주 좋은 문서와 함께 많은 예.

단점

고급 기능이 부족합니다.

맵박스

MapBox라는 스타트업은 더 보기 좋고 다재다능한 온라인 지도를 구축하는 것을 목표로 온라인 지도 제작 시장에 혁명을 일으키려고 노력하고 있습니다. MapBox JavaScript API는 Leaflet을 사용하며, Leaflet 플러그인으로 작성되었습니다. 이는 Leaflet 기능을 확장하고 사용자가 만든 사용자 지정 지도 및 데이터 세트를 위한 MapBox 호스팅을 포함하여 다른 MapBox 웹 서비스와 통합됩니다. JavaScript API 외에도 MapBox에는 다음과 같은 연결된 서비스가 포함됩니다.

모바일 iOS 및 Android SDK.
미리 디자인된 지도 세트입니다.
매핑 라이브러리 없이 표시할 수 있는 정적 지도.
지오코딩 서비스.
길찾기 서비스.

MapBox는 매핑 서비스뿐만 아니라 개인적으로 획득한 위성 이미지, NASA의 공개 데이터 및 OpenStreetMap의 커뮤니티 주도 세계 데이터를 포함한 데이터에 대한 액세스를 제공합니다. 데이터 스타일링은 CSS와 LESS 스타일링 프레임워크를 기반으로 MapBox에서 생성한 스타일 형식인 CartoCSS를 사용하여 수행됩니다. MapBox 서비스는 프리 티어를 제공하지만 대역폭과 저장 공간이 제한되어 있으며 심각하게 사용하려면 서비스 비용을 지불해야 합니다.

많은 대기업에서 MapBox가 제공하는 이점을 인식하고 자체 사이트에서 사용하고 있습니다. 여기에는 Foursquare, Evernote, Pinterest, The Financial Times, GitHub, Etsy 등이 포함됩니다.

CartoCSS

다음은 MapBox의 디자이너가 만든 Pirates 라는 스타일을 사용하는 매끄러운 MapBox 지도의 예입니다. MapBox는 Leaflet 위에서 실행되기 때문에 이것을 웹 페이지에 삽입하는 코드는 위의 Leaflet 예제와 유사합니다.

위에서 언급했듯이 CartoCSS는 MapBox에서 벡터 타일의 스타일을 지정하는 데 사용됩니다. 이것은 오픈 소스이기도 한 MapBox Studio를 사용하여 수행됩니다. MapBox Studio를 사용하면 처음부터 자신만의 지도 스타일을 만들거나 다른 디자이너가 만든 기존 스타일을 변경 및 확장할 수 있습니다. 사용자 정의 지도가 MapBox 계정에 업로드되면 MapBox API를 사용하여 사이트에 포함할 수 있습니다.

다음은 Pirates 기본 레이어를 얻는 데 사용되는 CartoCSS의 샘플입니다.

 @name: '[name_en]'; @name_arrr: "[name_en].replace('([Aa]r)','\1rr')"; @land: #fff8f0; @water: #cdd; @park: #cda; Map { background-color:@land; background-image:url(img/noise.png); } #admin[maritime=0][zoom>=3] { line-join: round; line-color: #478; comp-op:multiply; // Countries [admin_level=2] { line-cap:round; line-width: 0.8; [zoom>=6] { line-width: 2; } [zoom>=8] { line-width: 4; } [disputed=1] { line-dasharray: 4,4; line-cap:butt; } } // States / Provices / Subregions [admin_level>=3] { line-width: 0.4; line-dasharray: 10,3,3,3; [zoom>=6] { line-width: 1; } [zoom>=8] { line-width: 2; } [zoom>=12] { line-width: 3; } } } @water_line:lighten(@water,8); #water { ::b { polygon-pattern-file:url(img/water.png); polygon-pattern-alignment:global; } polygon-fill: mix(@water,#fff,50); polygon-gamma: 0.6; comp-op:multiply; a/line-color:@water_line; a/line-width:-0.4; a/line-comp-op:multiply; a/line-smooth:2; b/line-color:@water_line; b/line-width:-0.4; b/line-comp-op:multiply; b/line-smooth:4; c/line-color:@water_line; c/line-width:-0.4; c/line-comp-op:multiply; c/line-smooth:6; [zoom>=12] { a/line-width:0.8; b/line-width:0.8; c/line-width:0.8; } } #waterway { comp-op:multiply; [type='river'], [type='canal'] { line-color: @water; line-width: 0.5; [zoom>=12] { line-width: 1; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [type='stream'] { line-color: @water; line-width: 0.5; [zoom>=14] { line-width: 1; } [zoom>=16] { line-width: 2; } [zoom>=18] { line-width: 3; } } } #landuse { ::glow { comp-op:multiply; [class='park'],[class='pitch'],[class='school'] { line-width:2; line-join:round; [class='park'] { line-color:#ddb; } [class='pitch'] { line-color:#eed; } [class='school'] { line-color:#edb; } } } ::main[zoom>=0] { comp-op:multiply; [class='park'] { polygon-pattern-file:url(img/park.png); polygon-pattern-alignment:global; } [class='school'] { polygon-fill:#ed9; polygon-opacity:0.5; } } ::wood[class='wood'] { line-color:#C3CFB4; line-opacity:0.33; line-width:3; line-join:round; polygon-pattern-file:url(img/forest.png); polygon-pattern-alignment:global; comp-op:multiply; opacity:0.5; } } #building { polygon-fill:#efe8d8; comp-op:multiply; [zoom>=15] { line-color:#efe8d8 * 0.9; [zoom>=15] { line-width:0.2; } [zoom>=16] { line-width:0.4; } [zoom>=17] { line-width:0.8; } } } #tunnel { opacity: 0.5; } #road, #tunnel, #bridge { ['mapnik::geometry_type'=2] { line-width: 1; line-color:#edc; line-comp-op:multiply; [class='motorway'], [class='main'], [class='motorway_link']{ line-color:#dba; [zoom>=10] { line-width: 1; } [zoom>=12] { line-width: 2; } [zoom>=14] { line-width: 3; } [zoom>=16] { line-width: 5; } } [class='street'], [class='street_limited'] { [zoom>=13] { line-width: 1.4; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [class='street_limited'] { line-dasharray: 4,1; } [class='path'] { line-dasharray: 3,2; } } }

아, 친구!

여기에서 미리 디자인된 다른 MapBox 스타일을 살펴보십시오.

장점

전단지를 확장합니다.
상세하고 구름이 없는 위성 이미지의 큰 저장소.
자세한 지형 데이터.
연결된 서비스가 많습니다.
즉시 사용할 수 있는 아름답게 디자인된 지도.
기존 지도의 스타일 지정 및 사용자 지정을 위한 그래픽 인터페이스.

단점

굿즈는 공짜가 아닙니다.
가격은 기능보다 트래픽을 기반으로 합니다.

카토DB

보다 복잡한 지리 공간 데이터 시각화 및 분석을 위해 CartoDB는 최고의 도구 중 하나입니다. PostGIS라는 클라우드의 공간적으로 사용 가능한 데이터베이스에 지리 데이터를 저장하고 데이터에 액세스하고 PostGIS의 공간 및 지리 위치 기능을 사용하여 분석하고 Leaflet을 사용하여 표시하는 도구를 제공하는 클라우드 서비스입니다.

CartoDB는 손쉬운 지리 공간 데이터 시각화 및 저장을 위한 대안이 부족하여 생성되었습니다. 결과적으로 CartoDB는 Google의 Fusion Tables에 대한 대안으로 간주될 수 있습니다. 사용자는 CSV, KML 또는 Excel 테이블을 비롯한 다양한 형식의 데이터 세트를 가져와서 Google, Here(Nokia) 또는 OpenStreetMap과 같은 일반적인 소스의 지도 위에 레이어를 만들 수 있습니다. 모든 지리 데이터는 실제 데이터베이스에 저장되므로 SQL로 데이터에 액세스하고 쿼리한 다음 CSS로 스타일을 지정할 수 있습니다.

CartoDB 서비스는 "프리미엄"으로 제공됩니다. 데이터를 대중에게 공개한 사용자는 CartoDB 웹사이트에서 무료로 프로젝트를 호스팅할 수 있습니다. 개인 데이터를 저장하거나 5MB 이상의 데이터를 가져오거나 5개 이상의 테이블을 사용하려면 프리미엄 플랜에 가입해야 합니다.

GeoJSON

CartoDB는 데이터 시각화를 위한 도구이기 때문에 다른 온라인 매핑 도구 예제와 약간 다르게 사용됩니다. CartoDB 지도는 지도에서 지리참조 좌표가 있는 모든 데이터를 자동으로 시각화합니다. 따라서 PostGIS 데이터베이스에 간단히 추가하여 Zagreb에 대한 레이블을 표시할 수 있습니다. 다음은 GeoJSON 형식의 예입니다.

 { "type": "FeatureCollection", "features": [ { "type":"Feature", "geometry": { "type":"Point", "coordinates":[15.9833,45.8167] }, "properties": { "cartodb_id":1, "name":"Zagreb", "description":null, "created_at":"2015-02-20T21:02:16Z", "updated_at":"2015-02-20T21:03:59Z" } } ] }

그러나 CartoDB가 무엇을 할 수 있는지 실제로 이해하려면 갤러리를 살펴보십시오.

장점

지리 공간 데이터를 관리하고 저장하는 데 적합합니다.
많은 데이터 형식과 대규모 데이터 세트를 지원합니다.
Leaflet 및 PostGIS와 같은 입증된 오픈 소스 제품을 기반으로 합니다.
프리미엄 모델.

단점

무료가 아닙니다.
가격은 저장된 데이터 크기를 기반으로 하며 매우 큰 데이터 세트를 사용하는 경우 비용이 많이 들 수 있습니다.

웹 개발자를 위한 기타 옵션

이것들은 현재 사용 가능한 가장 인기 있는 매핑 프레임워크이지만 실제로는 잘 알려지지 않은 다른 옵션도 있습니다. Microsoft 생태계에 묶여 있다면 Bing Maps API라는 Google Maps와 유사한 API를 제공합니다.

그리고 온라인 매핑 세계인 MapQuest에서 공룡을 빼놓을 수 없습니다. 그것은 여전히 주변에 있으며 MapQuest 매핑 도구를 제공합니다.

지도 제작에 대해 약간 다른 접근 방식을 찾고 있다면 Kartograph가 디자이너와 데이터 저널리스트의 요구 사항을 염두에 두고 만들어졌기 때문에 흥미롭습니다.

지도 스타일 지정

이러한 모든 프레임워크는 지도의 스타일과 모양을 사용자 정의하는 방법을 제공합니다. MapBox 및 CartoDB는 CSS 또는 CSS의 변형을 사용한 스타일 지정을 제공합니다.

Google에서는 Google Maps API 버전 3에서 맞춤 스타일 지도를 도입했습니다. 이를 통해 개발자, 특히 디자이너는 어디에서나 볼 수 있는 기본 Google 지도 디자인을 맞춤설정하고 웹사이트의 전반적인 시각적 테마에 더 많이 부합하도록 더 많은 공간을 확보할 수 있었습니다. 풍부한 Google 지도 커뮤니티 내에서 몇 가지 스타일링 리소스가 탄생했습니다. 가장 주목할만한 것은 Google 지도용 맞춤 스타일을 만들고 무료로 공유하는 사람들의 커뮤니티인 Snazzy Maps입니다.

OpenLayers 또는 Leaflet을 사용하기로 결정했다면 사전 렌더링된 지도 타일로 제한됩니다. 다행히도 Google, Nokia, Bing 또는 기본 OSM 타일에서 Stamen과 같은 디자이너가 특별히 만든 타일에 이르기까지 다양한 맵 타일을 선택할 수 있습니다. 사용 가능한 지도 타일이 얼마나 많은지 또는 서로 비교하여 어떻게 보이는지 확인하려면 Streetmap Smackdown 또는 지도 비교 사이트를 방문하십시오.

웹 맵 및 매핑 도구의 미래

매핑 세계의 미래가 흥미롭게 보입니다. 다음은 불과 몇 년 전만 해도 공상과학 소설처럼 보였을 새로운 기술입니다.

벡터 전용 - D3.js에서 래스터 이미지 대신 벡터 맵을 사용하면 표준 프레임워크에서는 불가능한 새로운 기능의 세계가 제공됩니다. MapBox도 OpenGL 기반의 MapBox GL과 함께 이 방향으로 움직이고 있습니다.
3D - 이제 3차원 지형과 건물이 지도에 표시되고 OpenLayers v3에는 Cesium 지원 기능이 내장되어 있습니다.
웹 브라우저에서 GIS 및 공간 분석 - Turf를 사용하여 이미 가능합니다. Turf는 브라우저 내에서 공간 및 통계 작업, 데이터 분류, GeoJSON 데이터 생성을 모두 지원하는 JavaScript 라이브러리입니다.

마무리

여기에 나열된 최고의 온라인 매핑 도구에는 각각 장단점이 있습니다. 예를 들어, 코드 예제는 Leaflet 사용의 단순성과 OpenLayers가 가져오는 복잡성을 보여줍니다. 그러나 Leaflet은 OpenLayers가 해결하는 복잡한 공간 문제를 해결하지 않습니다. 선택은 당신의 필요가 무엇인지에 달려 있습니다.

요약:

Google 지도 - 특히 비개발자들이 웹에서 기본 지도를 얻을 수 있는 잘 조화되고 확립된 매핑 솔루션과 함께 Google이 (잘) 알려진 모든 기능과 함께 제공됩니다.
OpenLayers - 다른 매핑 프레임워크가 공간 분석 문제를 해결할 수 없는 상황에 사용됩니다.
전단지 - 현재, 특히 MapBox 또는 CartoDB가 제공하는 추가 서비스가 필요하지 않은 경우 일반적인 매핑 목적을 위한 최고의 매핑 프레임워크입니다.
MapBox - 지도 스타일에 대한 더 많은 제어를 원하거나 상세한 위성 이미지, 지오코딩 또는 방향과 같이 다른 사람이 제공하지 않는 서비스가 필요한 경우 빠르게 성장하고 시장이 변화하는 매핑 솔루션입니다.
CartoDB - 다양한 데이터 형식으로 저장된 대용량 데이터 세트가 있는 경우 더 이상 찾지 마십시오.

Toptal 엔지니어링 블로그에 대한 추가 정보:

더 스마트한 캐싱을 사용하여 50배 더 빠르게 맵 클러스터 제공