2001年から2011年までのヨーロッパの人口動態の変化を示すインタラクティブマップが最近公開されました。この期間には、各自治体の最も詳細な統計情報が利用できます。 カラースケールは、ヨーロッパ（ロシアとCIS諸国を除く）およびトルコのすべての地点で、文字通り人口の減少または成長の度合いを示します。
Airbnbチームの開発者の1人が、この人口統計マップの作成に参加しました。 そのようなプロジェクトを自分で作成する方法を学びたいですか？ それから猫にようこそ。
前提条件
この例では、 ベルリンとその階数に関する情報を含むベルリンの データセットを使用します 。
まず、作業環境を準備します。
Tilemillのインストールは、さまざまなデータソースを使用して迅速かつ簡単にマップを作成できるマッピングアプリケーションです。
完成した形状をダウンロードします—既に必要なデータが含まれているファイル 。 独自のデータセットがある場合は、それらをシェープファイルと組み合わせる必要があります。 これを行うには、たとえばQuantum GISを使用するなど、多くの方法があります。
Mapboxでアカウントを取得します-50,000回の地図表示の制限がある無料の関税があります。
新しいプロジェクトを作成する
マップデータが表示されるレイヤーを追加することから始めます。 Tilemillを起動して、新しいプロジェクトを作成します。
左側に世界地図が表示され、右側にいくつかのCarto CSSルール（TileMillで使用されるマップデザインの言語）があります。 したがって、画面の左側にマップのプレビューが反映され、右側にさまざまな部分のスタイルを定義します。
データインジェクション
シェイプを追加します—ファイルを新しいレイヤーとして追加します（左下隅のレイヤーアイコン、レイヤーの追加）。 IDは、プロジェクト内のレイヤーの一意の識別子です。 形状-データソースとしてのファイルを選択し、[保存]をクリックします。
すべてが正常に機能していることを確認します。 次の行を追加して、形状を色付けします。
#buildings{ polygon—fill: green; }
レイヤーを追加するときに割り当てられた「建物」識別子を使用して、スタイルを設定できます。 マップは次のようになります。
この例では、建物の階数を視覚化します。 国のスタイルを削除し、マップの黒の背景を設定します。
Map { background—color: black; }
建物の階のスタイルについては、自分に適した特定のオブジェクトのみに色を付けることができます。 この例では、小さな建物は緑に塗られ、中程度の建物はオレンジに塗られ、より高い建物は青に塗られます。 好きな色を使用できます（この例では、色の選択にChroma.jsカラースケールヘルパーが使用されています）。
#buildings{ polygon—fill: #d4ffdf; line—opacity:0; /* smaller buildings — green */ [floors = 1]{ polygon—fill: #b0f1b8; } [floors = 2]{ polygon—fill: #8ae393; } [floors = 3]{ polygon—fill: #5fd36c; } /* smaller buildings — orange */ [floors = 4]{ polygon—fill: #fff98f; } [floors = 5]{ polygon—fill: #f0e759; } [floors = 6]{ polygon—fill: #e0d500; } /* higher buildings — blue */ [floors >= 7]{ polygon—fill: #def3ff; } [floors > 15]{ polygon—fill: #bbdcfc; } [floors > 30]{ polygon—fill: #65aef4; } [floors > 60]{ polygon—fill: #0098f0; } }
次のように表示されます。
インタラクティブ機能を追加
属性テーブルからデータを抽出し、ツールチップ/ポップアップを使用して地図に表示できます。 この例では、建物の階数のヒントを含むポップアップウィンドウを表示します。 この機能を有効にするには、左下隅の手のアイコンをクリックして、「ティーザー」を選択する必要があります。 次に、インタラクティブ機能を維持する「建物」レイヤーを定義し、「ホバー時に表示されるコンテンツ」セクションに「フロア」を追加する必要があります。
プロジェクトを保存した後、建物の上にマウスを移動すると、情報を含むウィンドウがポップアップ表示されます。
mbtilesをエクスポートする
インタラクティブ機能は、MBTiles形式にエクスポートできます。これは、マップを保存するために特別に設計されており、オンラインおよびオフラインでマップにアクセスできます。
ただし、レイヤーをエクスポートする前に、透明な背景を設定します。
Map { background—color: transparent; }
最終的に、コードは次のようになります。
Map { background—color: transparent; } #buildings{ polygon—fill: #d4ffdf; line—opacity:0; /* smaller buildings — green */ [floors = 1]{ polygon—fill: #b0f1b8; } [floors = 2]{ polygon—fill: #8ae393; } [floors = 3]{ polygon—fill: #5fd36c; } /* smaller buildings — orange */ [floors = 4]{ polygon—fill: #fff98f; } [floors = 5]{ polygon—fill: #f0e759; } [floors = 6]{ polygon—fill: #e0d500; } /* higher buildings — blue */ [floors >= 7]{ polygon—fill: #def3ff; } [floors > 15]{ polygon—fill: #bbdcfc; } [floors > 30]{ polygon—fill: #65aef4; } [floors > 60]{ polygon—fill: #0098f0; } }
レイヤーをmbtilesにエクスポートするには、右上隅の[エクスポート]をクリックして[MBTiles]を選択する必要があります。 データがレンダリングされるまで待つ必要があります。 レイヤーを定義できない場合は、次の設定を使用してマップをエクスポートします。
- ズーム：9-13
- センター：13.3944,52.5141,10
- 境界：13.0621,52.3475,13.7089,52.6734
プロセスの最後に、* .mbtilesを保存します。
MapBoxにアップロード
.mbtilesファイルを取得して、Mapboxアカウントにアップロードします 。 新しいレイヤーを読み込んだ後、アカウントの[データ]タブで見つけます。 次に、このレイヤーを使用して新しいプロジェクトを作成します。
マップが表示されない場合は、検索バーを使用してください。 カードとIDのコピーを保存します（「プロジェクト」->「情報」セクションにあります）。
Webアプリケーション
ブラウザに地図を表示するには、 Mapbox.jsを使用します 。これには、階層の数を表示する必要があるデータの相互作用を記述する「グリッド」レイヤーが既に含まれているためです。 Leafletをutfgrid Pluginと組み合わせて使用することもできます。
手始めに、この定型コードを使用できます。 地図をダウンロードし、建物にカーソルを合わせるとコンソールのフロア数を表示します。 パスキーとカードIDを変更するだけです。
<!DOCTYPE html> <html> <head> <meta charset=utf—8 /> <title>Map example</title> <meta name='viewport' content='initial—scale=1,maximum—scale=1,user—scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' /> <style> * { margin:0; padding:0; } html, body{ height: 100%; } #map { height:100%; width:100%; background: #111; } .building—info { position: absolute; left: .5em; top: .5em; color: white; font—size: 2.5em; font—family: Arial, sans—serif; } </style> </head> <body> <div id='map'></div> <div class='building—info'></div> <script> L.mapbox.accessToken = 'your—access—token'; var mapid = 'your—map—id'; var infoElm = document.querySelector('.building—info'); var map = L.mapbox.map('map', mapid, {gridLayer : false, zoomControl : false }).setView([52.5141,13.3944,10], 11); map.attributionControl.addAttribution('Source: Senatsverwaltung für Stadtentwicklung und Umwelt Berlin'); var dataLayer = L.mapbox.gridLayer(mapid).addTo(map); dataLayer.on('mouseover', function(evt){ if(typeof evt.data === 'undefined'){ return infoElm.innerHTML = ''; } infoElm.innerHTML = 'floors: ' + evt.data.floors; }); </script> </body> </html>
ご覧のとおり、上記の方法で、興味深い地図製作プロジェクトをすばやく簡単に作成できます。 もちろん、既製のデータが既にある場合、これは重要なコンポーネントです。