全国のオンライン診療実施医療機関リストをMapbox で表示

まじめな所長＠医療介護データ研究所 @iryokaigodb の方が公開している全国のオンライン診療実施医療機関リストを地図に表示しました。すでに何人の方が地図を利用していますが、Mapbox を利用した例は私が見た限りないようなので、今回は、Mapbox を利用した例を紹介したいと思います。

note.com

全国オンライン診療実施医療機関リストマップ

Mapbox にデータを登録して、Mapbox GL JS を使用して表示した例になります。

valuecreation.github.io

はじめに

データは CSV で提供されていますが、緯度経度は付与されていません。地図に表示するには緯度経度が必要になりますので、住所データからジオコーディングを行う必要があります。

ArcGIS や Google などジオコーディングサービスはありますが、今回はレコード数が多いため無償で使用できる東京大学空間情報科学研究センターが提供する「CSVアドレスマッチングサービス」を使用しました。ただし、街区レベル位置参照情報を使用しているため、幾つか注意が必要です。詳細は、Geocoding Tools & Utilities - FAQ(よくある質問と答え） - データに関するQ&A をご参照ください。より正確な変換（号レベルの変換など）を使用する場合は、有償のサービスを検討することをお勧めします。

newspat.csis.u-tokyo.ac.jp

ジオコーディング結果の CSV は GitHub にも登録していますのでぜひご利用ください。

データの登録

CSV データは Mapbox Studio を使用して登録します。CSV データの登録には幾つか注意が必要で、csv-upload-errors にも記載されています。今回 CSV データのフィールド fX を lon、fY を lat に変更して、CSV データは UTF-8 に変換して保存しました。

www.mapbox.com

CSV データは Tilesets に登録します。CSV データは、Vector 形式で登録され、ファイルフォーマットは pbf（Protocol Buffers【プロトコルバッファー】）です。

f:id:freedom0625:20200509230726p:plain:w350

CSV データのフィールド名は日本語にも対応しています。登録されると以下の画面で示しているように登録したデータを確認することができます。

f:id:freedom0625:20200509230743p:plain:w350

地図の作成

Mapbox Studio を使用して新しい地図を作成します。登録した CSV データはレイヤーとして管理できるようになるため、新しい地図に追加してスタイルなどを変更して表示します。最後に作成した地図を Mapbox GL JS で呼び出して使用します。

はじめに Mapbox Studio の Styles から new styles をクリックして新しい地図を作成します。地図の選択画面が表示されますので、作成したい地図を選択します。今回は Basic を選択し、さらに Choose a variation で Galaxy を選択しました。

mapbox studio

Basic の地図が表示されますので、+ ボタンをクリックして、New layer を作成します。先ほど作成した CSV データの geocode-1njhnq を追加します。

mapbox studio

追加した CSV データの geocode-1njhnq が追加されます。ここで geocode-1njhnq はシンボルのサイズや色、属性値によるフィルタリングなど、スタイルを自由に変更することができます。

mapbox studio

今回は作成した地図は以下から確認できます。 api.mapbox.com

地図の公開と表示

Mapbox Studio で作成した地図は Mapbox が提供している SDK で使用したり、サードパーティと連携して使用もできます。今回は Mapbox GL JS を使用しました。

docs.mapbox.com

作成した地図は Publish ボタンをクリックして公開する必要があります。

f:id:freedom0625:20200510152221p:plain:w350

そして、公開後に Share ボタンをクリックします。Share & develop 画面が表示されますので、Developer resources で Web を選択して、Style URL と Access token をコピーします。これを Mapbox GL JS で使用します。

f:id:freedom0625:20200510152228p:plain:w350

以下は、Mapbox GL JS を使用したコードで、accessToken と style に先ほどコピーした内容を貼り付けます。これで Mapbox Studio で作成した地図を Mapbox GL JS で呼び出して使用することができます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>

  <div id="map"></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoidmFsdWVjcmVhdGlvbiIsImEiOiJjanM0Z21xamQwNHRrM3lueXZrOHBxZmNmIn0.oF6cKsx1z4NzUNiJ7RTXNQ';
    
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/valuecreation/cka1ssr5x3mro1ipdodsmbi31', // stylesheet location 
        // center: [139.767125, 35.681236], // starting position [lng, lat]
        // zoom: 9 // starting zoom
    });

   /************** Map Control *******************/
   map.addControl(new mapboxgl.NavigationControl());

    // Add geolocate control to the map.
   map.addControl(
      new mapboxgl.GeolocateControl({
        positionOptions: {
          enableHighAccuracy: true
        },
        trackUserLocation: true
      })
   );

   map.addControl(
      new mapboxgl.ScaleControl({
        maxWidth: 250,
        unit: 'metric'
      })
   );
  </script>
 
</body>
</html>