Web開発者向けの最高のオンラインマッピングツールの調査：ロードマップからロードマップへ

公開: 2022-03-11

優れた便利な地図に勝るものはありません。

今日、オンラインマップの使用は、簡単で魅力的なプロセスです。 独自のオンラインマップを作成することは、もはや大きな仕事ではありません。 無料でシンプルなものから、豊富で複雑な機能まで、さまざまなオンラインマッピングツールを自由に利用できます。 Webマッピングに精通していないWeb開発者にとって、選択の苦痛は恐ろしいかもしれません。 マップを作成したいのですが、どこから始めればよいのか、どのツールを使用すればよいのかわかりません。 私はこの最高のマッピングツールのリストを手伝うためにここにいます。

少しの歴史

テクノロジーは当初から、地図作成と地図の使用方法に影響を与えてきました。 技術が進歩するにつれて、地図作成と地図作成のプロセスは、パピルスに手動で描かれた地図からWeb上のインタラクティブな地図に至るまで進化しました。

Web開発者向けのマッピングツール
過去のマッピング。

20世紀の後半は、地図作成のターニングポイントでした。 コンピューターは選択のツールになりました。 航空写真、衛星画像、リモートセンシングにより、空間データの収集方法が変わりました。 地理情報システム（GIS）が誕生しました。 最終的に、GISマップはデスクトップからWebに移行し始め、大手GISベンダーはオンラインマップの最初のフレームワークを作成し始めました。

しかし、GISマッピングは簡単ではありません。 それには、多くのサーバー側テクノロジー、地理空間標準、およびプロトコルと、それらの実装が必要です。 地理空間データと地図投影法、データの収集方法、データの表示方法、使用する色、データを特定の縮尺に一般化する方法、地図にラベルを配置する方法、設定方法についての知識が必要です。マップを提供するサーバー、空間データベースの使用方法など。 GISには、WMS、WFS、EPSG、CRS、SLD、GML、TMSなどの略語がたくさんあります。それらを知って理解するには、本、学術論文、記事を読む必要があります。

オンラインマッピングの進化

最初のWebマップは通常、単一の非常に小さなマップ画像のみを表示していました。 当時、パンは、8つの可能なコンパス方向（N、NW、W、SW、S、SE、E、NE）のいずれかで、通常はマップサイズの半分だけ1ステップ移動することによって実装されていました。 ユーザーがパンまたはズームボタンをクリックした後、まったく新しい画像をマップサーバーにレンダリングし、ネットワーク経由でロードしてから、ブラウザで処理する必要があります。 テクノロジーの制約により、マップはWebページ全体のごく一部しか占めていませんでした。 より良い相互作用を得るために、初期の地図には、FlashのようなプラグインやJavaに基づく適切なプラグイン、さらにはInternetExplorerでのみ機能するActiveXが必要でした。

グーグルは2005年にグーグルマップを導入したときにマッピングの世界をひっくり返しました。その革新の中で、グーグルはドラッグによる継続的なパンを導入しました。 彼らの解決策は、「タイル」と呼ばれる多くの小さな正方形の画像にスライスされた地図を表示することでした。 これらのタイルは「マップタイルサーバー」からレンダリングおよび提供され、通常は256x256ピクセルです。 ズームとパンでは、Webページ全体をリロードするのではなく、新しいマップタイルをロードするだけで済みます。 その結果、ブラウザウィンドウの半分以上をカバーするより大きな可視マップが作成され、マップを探索するためのスムーズなエクスペリエンスが提供されました。 スムーズなズームおよびパン機能でマップを「スリップ」させる機能があるため、これらの新しいマップは「スリッピーマップ」と呼ばれていました。 Googleはスクリプトも許可しているため、ユーザーはGoogleの地図を自分のウェブサイトに配置して自分のデータを地図に追加できます。 その結果、「マップマッシュアップ」という別の新しい用語が作成されました。

突然、オンラインマップが人気になります。 見栄えの良い地図をWebサイトに追加するために、地図製作者やGISスペシャリストである必要はありません。 「Web2.0」ムーブメントの翼で、インタラクティブコンテンツの簡単な作成を可能にするHTML5、CSS3、SVGなどの最新テクノロジーを構築することで、インタラクティブマップは今や新しいルネッサンスを生きています。

オンラインマップ
将来のマッピング？

地図データ

前述のように、初期のオンラインマップは、GISデータのセットとその空間ジオデータベースに基づいていました。 その値札は言うまでもなく、そのデータにアクセスできる人はあまりいませんでした。 GoogleとOpenStreetMap（OSM）プロジェクトのデータセットはそれを変えました。 Googleのデータベースは非公開であり、制限がありますが、OSMは、世界の無料地図を作成するための共同プロジェクトとして、ウィキペディアの概念に触発されました。 OpenStreetMapは、空間データに貢献し、維持するボランティアマッパーのコミュニティによって構築されています。

要するに、今日の簡単な地図作成に貢献した最大の革命は、地図サーバーと空間データベースの保守に関連する問題が取り除かれたことです。

Webマッピングフレームワークの選択

では、すべてのオプションを使用して、適切なオンラインマッピングツールをどのように選択するのでしょうか。 一方では、Google、MapQuest、Microsoft、Nokiaなどの商用オンラインマッププロバイダーがあります。 これらのサービスは、マップタイルと適切なJavaScript APIを提供して、それらを表示し、マップと対話します。 一方、OpenStreetMapベースのマップタイルを簡単にロードできるオープンソースのマッピングプロジェクトがあります。 これらには、OpenLayersとLeafletが含まれます。 そして、MapBoxやCartoDBなどのプロジェクトがあります。これらのプロジェクトは、オープンソースライブラリとOSMデータに基づいてビジネスモデルを構築し、付加価値を提供しますが、無料ではありません。

これらの各カテゴリの例をいくつか見てみましょう。 ここでは、これらのオンラインマッピングツールのいくつかについて説明し、それぞれの簡単な概要とコード例を示し、長所と短所を比較検討します。 また、別の読み物として興味深いと思われるD3.jsマッピングチュートリアルも作成しました。

グーグルマップ

最も明白な選択であるGoogleマップから始めましょう。 Google Maps APIの最初のバージョンは2005年2月に導入され、現在のGoogle MapsAPIv3は2009年6月に導入されました。GoogleMapsAPIは単なるJavaScriptAPIエンドポイントではありません。 それはより多くのプロジェクトを含み、広範囲のカスタマイズでグーグルマップをウェブページに埋め込むためのいくつかの異なる方法を提供します。

現在利用可能なGoogleMapsAPIには次のものがあります。

  • Google Maps Javascript API
  • Google Static Maps API
  • Google Maps Embed API
  • iOS用GoogleマップSDK
  • Google Maps Android API v2

適切なAPIを選択できるように、GoogleはAPIピッカーを開発しました。

基本的なAPIは無料ですが、いくつかの制限が課せられていることに注意してください。 1つ目は、エンドユーザーが地図に自由に公開してアクセスできるようにする必要があるということです。 2つ目は、使用制限です。サイトが90日間にわたって、毎日25,000を超えるマップの読み込みを生成しない限り、サービスは無料です。 より大きな縮尺が必要な場合、プライベートマップが必要な場合、または企業や商用のWebサイトを運営している場合は、Google Maps APIforWorkの料金を支払うことを検討する必要があります。

実装

簡単な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>

結果のマップは次のようになります。

APIを使用したグーグルマップ

長所

  • Googleによって開発および保守されています。
  • Webサイトまたはアプリケーションにマップを含めるためのさまざまなAPIがたくさんあります。
  • ユーザーの大きなコミュニティ。
  • 非常に優れたAPIドキュメントで、多くの例があります。

短所

  • ある時点で追加が表示されないことは確かですか？
  • 誰もがそれを使用しています。 すべてのマップは（ほとんど）同じように見えます。
  • クローズドで適切なAPI。
  • Googleによって公式に開発されたプラグイン以外のプラグインはありません。
  • Google MapsforWorkの価格が不明確です。

OpenLayers

OpenLayersは、Googleマップと同等のオープンソースとしてMetaCartaによって開発され、最初のバージョンは2006年6月に公開されました。OpenLayersは、リッチなWebベースの地理的アプリケーションを構築するためのJavaScript APIを実装する、オンリングマッピングツールです。 GoogleMapsAPI。 OpenLayersは非常に速く多くの牽引力を獲得し、最初の開発は急速でした。 OpenLayers 2は、バージョン1からわずか2か月後の2006年8月にリリースされました。ライブラリーは絶えず開発中であり、新しい機能を備えた新しいバージョンが絶えず追加されていました。 この急速な進歩の欠点は、バージョン2ライブラリが非常に大きくて不格好になり、最終的にサイズが1MBに達し、100,000行を超えるコードが含まれるようになったということです。 多くの機能が付属していますが、通常のユーザーがすべてを必要としているわけではありません。

これが、ライブラリを包括的に書き直した主な理由でした。 目標は、プロジェクション、標準プロトコル、編集機能のサポートなど、OpenLayers2と同じ機能を備えた最新のHTML5およびCSS3機能をターゲットにすることでした。 主な焦点は、パフォーマンスの向上、ビルドの軽量化、ビジュアルコンポーネントの改善、APIの改善でした。 この大幅に改善されたOpenLayers3は、2014年8月に公開されました。

実装

前の例と同じマップを見てみましょう。今回はOpenLayers3を使用しています。

 <!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>

そして結果：

openlayers3でマップ

長所

  • 無料のオープンソース。
  • マッピングのニーズに対応する機能満載のライブラリ。
  • たくさんの例。
  • さまざまなデータ型とGIS標準のサポート。
  • 地図投影法と編集機能の組み込みサポート。

短所

  • バージョン3はまだ開発が進んでおり、APIはポイントリリースごとに変更されています。
  • 複雑なAPI構文。
  • バージョン3のドキュメントは、現在、可能な限り完全ではありません。

リーフレット

Leafletは、OpenLayersの肥大化、混乱、複雑さへの反応として生まれたと言っても過言ではありません。 Vladimir Agafonkinは、OpenLayersのラッパーを作成するように依頼されましたが、代わりに、シンプルで軽量なOpenLayersの代替案を作成し、2011年5月にLeafletが誕生しました。 ウラジミールは、このオンラインマップツールのシンプルさ、パフォーマンス、使いやすさに焦点を当てました。 コアライブラリには基本的な機能しかありません。これは、ほとんどの実際のユースケースに十分です。 それでも、Leafletは、開発とコアライブラリへの追加が簡単な大量のプラグインで拡張できます。 さらに、Leafletは、モバイルサポートを念頭に置いてゼロから開発されました。

リーフレットは使いやすく、十分に文書化されたAPIと、GitHubで入手できる簡単なソースコードが含まれています。 パフォーマンス、使いやすさ、シンプルさ、小さなサイズ、モバイルサポートに重点を置いているため、OpenLayersよりもはるかに複雑ではありません。

リーフレットの未来も面白そうです。 ウラジミール氏によると、彼は次のメジャーリリースをさらにシンプルにし、パフォーマンスをさらに向上させ、プラグインインフラストラクチャをアップグレードすることを計画しています。

実装

これは以前と同じマップですが、今回は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という名前の新興企業は、見栄えが良く、より用途の広いオンラインマップを構築することを目的として、オンライン地図作成市場に革命を起こそうとしています。 MapBox JavaScript APIはLeafletを採用しており、Leafletプラグインとして記述されています。 Leafletの機能を拡張し、ユーザーが作成したカスタムマップやデータセットのMapBoxホスティングなど、他のMapBoxWebサービスと統合します。 JavaScript APIに加えて、MapBoxには次の接続されたサービスが含まれています。

  • モバイルiOSおよびAndroidSDK。
  • 事前に設計されたマップのセット。
  • マッピングライブラリを必要とせずに表示できる静的マップ。
  • GeoCodingサービス。
  • 道順サービス。

MapBoxは、マッピングサービスだけでなく、個人的に取得した衛星画像、NASAからのオープンデータ、OpenStreetMapからのコミュニティ主導の世界データなどのデータへのアクセスも提供します。 データのスタイリングは、CSSとLESSスタイリングフレームワークに基づいて、MapBoxによって作成されたスタイルフォーマットであるCartoCSSを使用して行われます。 MapBoxサービスは無料利用枠を提供しますが、帯域幅とストレージに制限があり、深刻な使用にはサービスの料金を支払う必要があります。

多くの大企業は、MapBoxが提供する利点を認識しており、自社のサイトで使用しています。 いくつか例を挙げると、Foursquare、Evernote、Pinterest、The Financial Times、GitHub、Etsyなどがあります。

CartoCSS

これは、MapBoxのデザイナーによって作成されたPiratesと呼ばれるスタイルを使用した滑らかなMapBoxマップの例です。 MapBoxはLeaflet上で実行されるため、これをWebページに埋め込むコードは上記のLeafletの例と同様になります。

cartocssを使用したマップ

上記のように、CartoCSSはMapBoxでベクタータイルのスタイルを設定するために使用されます。 これは、オープンソースでもあるMapBoxStudioを使用して行われます。 MapBox Studioを使用すると、独自のマップスタイルを最初から作成したり、他のデザイナーが作成した既存のスタイルを変更および拡張したりすることができます。 カスタムマップがMapBoxアカウントにアップロードされると、MapBoxAPIを使用してサイトに埋め込むことができます。

以下は、 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でマップ

ここで、他の事前に設計されたMapBoxスタイルのいくつかを見てください。

長所

  • リーフレットを拡張します。
  • 詳細で雲ひとつない衛星画像の大きなリポジトリ。
  • 詳細な地形データ。
  • たくさんの接続されたサービス。
  • 箱から出して美しくデザインされた地図。
  • 既存のマップをスタイリングおよびカスタマイズするためのグラフィカルインターフェイス。

短所

  • グッズは無料ではありません。
  • 価格は、機能よりもトラフィックに基づいています。

CartoDB

より複雑な地理空間データの視覚化と分析のために、CartoDBはそこにある最高のツールの1つです。 これは、PostGISと呼ばれるクラウド内の空間対応データベースに地理データを保存するクラウドサービスであり、データにアクセスし、PostGISの空間的および地理的位置情報を使用して分析し、Leafletを使用して表示するためのツールを提供します。

CartoDBは、地理空間データの視覚化と保存を容易にするための代替手段がないために作成されました。 したがって、CartoDBはGoogleのFusionTablesの代替と見なされる可能性があります。 ユーザーは、CSV、KML、Excelテーブルなど、さまざまな形式でデータセットをインポートし、Google、Here（Nokia）、OpenStreetMapなどの一般的なソースからのマップ上に重ねることができます。 すべての地理データは実際のデータベースに保存されているため、SQLを使用してデータにアクセスしてクエリを実行し、CSSを使用してスタイルを設定できます。

CartoDBサービスは「フリーミアム」として提供されます。 データを公開したままにしておくユーザーは、CartoDBWebサイトでプロジェクトを無料でホストできます。 プライベートデータを保存したり、5 MBを超えるデータをインポートしたり、5つを超えるテーブルを使用したりするには、ユーザーはプレミアムプランに加入する必要があります。

GeoJSON

CartoDBはデータを視覚化するためのツールであるため、他のオンラインマッピングツールの例とは少し異なる方法で使用されます。 CartoDBマップは、マップ上に地理参照された座標を持つすべてのデータを自動的に視覚化します。 したがって、PostGISデータベースに追加するだけでザグレブのラベルを表示できます。 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を使用したマップ

ただし、CartoDBの機能を実際に理解するには、ギャラリーをご覧ください。

長所

  • 地理空間データの管理と保存に最適です。
  • 多くのデータ形式と大規模なデータセットをサポートします。
  • LeafletやPostGISなどの実績のあるオープンソース製品に基づいています。
  • フリーミアムモデル。

短所

  • 無料ではありません。
  • 料金は保存されているデータサイズに基づいており、非常に大きなデータセットを使用すると高額になる可能性があります。

Web開発者向けのその他のオプション

これらは現在利用可能な最も人気のあるマッピングフレームワークですが、他にもあまり知られていないオプションがあります。 Microsoftエコシステムに縛られている場合は、BingMapsAPIと呼ばれるGoogleマップに似たAPIを提供します。

そして、オンラインマッピングの世界で恐竜であるMapQuestに言及せずにはいられません。 それはまだ存在していて、MapQuestマッピングツールを提供しています。

マップ作成の少し異なるアプローチを探している場合、Kartographは、デザイナーやデータジャーナリストのニーズを念頭に置いて作成されているため興味深いものです。

マップのスタイリング

これらのフレームワークはすべて、マップのスタイルと外観をカスタマイズする方法を提供します。 MapBoxとCartoDBは、CSSまたはCSSのバリエーションを使用したスタイリングを提供します。

Googleの面では、GoogleMapsAPIのバージョン3でカスタムスタイルの地図が導入されました。 これにより、開発者、特にデザイナーは、あらゆる場所で見られるデフォルトのGoogleマップのデザインをカスタマイズし、ウェブサイトの全体的なビジュアルテーマにさらに合わせることができるようになりました。 豊富なGoogleマップコミュニティ内で、いくつかのスタイリングリソースが生まれました。 最も注目すべきは、Googleマップのカスタムスタイルを作成して無料で共有する人々のコミュニティであるSnazzyMapsです。

OpenLayersまたはLeafletを使用することにした場合は、事前にレンダリングされたマップタイルに制限されます。 幸い、Google、Nokia、Bing、デフォルトのOSMタイルから、Stamenなどのデザイナーによって特別に作成されたものまで、さまざまな範囲のマップタイルを選択できます。 利用可能なマップタイルがいくつ存在するか、またはそれらが互いにどのように見えるかを知るには、StreetmapSmackdownまたはMapcompareサイトにアクセスしてください。

Webマップとマッピングツールの未来

マッピングの世界の未来は面白そうです。 ほんの数年前には空想科学小説のように見えたであろういくつかの新しい技術があります：

  • ベクターのみ-D3.jsでラスター画像の代わりにベクターマップを使用すると、標準のフレームワークでは不可能な新しい機能の世界がもたらされます。 MapBoxも、OpenGLに基づくMapBox GLを使用して、この方向に進んでいます。
  • 3D -3次元の地形と建物がマップに表示されるようになり、OpenLayersv3にはCesiumのサポートが組み込まれています。
  • WebブラウザでのGISと空間分析-Turfを使用してすでに可能です。 Turfは、空間および統計操作、データ分類、GeoJSONデータ作成をすべてブラウザー内でサポートするJavaScriptライブラリです。

要約

ここにリストされている最高のオンラインマッピングツールには、それぞれ長所と短所があります。 たとえば、コード例は、OpenLayersがもたらす複雑さに対して、Leafletの使用の単純さを示しています。 しかし、Leafletは、OpenLayersが解決する複雑な空間問題を解決しません。 選択はあなたのニーズが何であるかにかかっています。

要約する：

  • グーグルマップ-特に開発者以外の人がグーグルが（悪名高い）有名なすべての力とともにウェブ上で基本的な地図を入手するための、よくまとまった、確立されたマッピングソリューション。
  • OpenLayers-他のマッピングフレームワークが空間分析の問題を解決できない状況向け。
  • リーフレット-現在、特にMapBoxまたはCartoDBが提供する追加のサービスが必要ない場合は、一般的なマッピングの目的に最適なマッピングフレームワークを簡単に作成できます。
  • MapBox-地図のスタイリングをより細かく制御したい場合や、詳細な衛星画像、ジオコーディング、道順など、他の人が提供していないサービスが必要な場合に、急速に成長し、市場が変化するマッピングソリューション。
  • CartoDB-さまざまなデータ形式で保存された重いデータセットがある場合は、もう探す必要はありません。

Toptal Engineeringブログでさらに読む：

  • よりスマートなキャッシングを使用して、マップクラスターに50倍高速にサービスを提供