OpenStreetMapとNominatim APIで行政区の境界線を取得する

市や区の境界線の座標情報をJavaScriptで取得したいと思ったのでそのメモ。

今回はOpenStreetMap(OSM)を使ってやる。

OSMにはNominatimというものがあり、これが住所によるOSMのデータ検索やその逆を提供してくれます。詳細はこちら。

JA:Nominatim - OpenStreetMap Wiki

このサイトで実際に試すこともできます。

Nominatim Demo

提供されているAPIのリファレンスはこちら。

Overview - Nominatim Documentation

普通にブラウザからでもリクエストすることができます。例えば神奈川県の横浜市の境界線を取りたければこんな感じでリクエストします。普通に住所を指定するだけですね。日本語でも通るかは試していないのでわかりません。

curl "https://nominatim.openstreetmap.org/search?q=Yokohama+Kanagawa+Japan&format=geojson&polygon_geojson=1&limit=1"

レスポンスはこちら。今回はGeoJSON形式を指定しています。なお、最後のpolygon_geojsonがないと境界線の情報はレスポンスされないっぽいです。あとlimitを指定しないと関連する駅とかの情報も返ってきてしまいます。

実際のレスポンスの一部。

{
  "type": "FeatureCollection",
  "licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "place_id": 298463542,
        "osm_type": "relation",
        "osm_id": 2689482,
        "display_name": "横浜市, 神奈川県, 231-0017, 日本",
        "place_rank": 14,
        "category": "boundary",
        "type": "administrative",
        "importance": 0.6481543247107393,
        "icon": "https://nominatim.openstreetmap.org/ui/mapicons/poi_boundary_administrative.p.20.png"
      },
      "bbox": [
        139.464781,
        35.312501,
        139.7769348,
        35.5927382
      ],
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [
                139.464781,
                35.497437
              ],
              [
                139.464784,
                35.497418
              ],
              [
                139.464817,
                35.497217
              ],
              [
                139.464862,
                35.496971
              ],
            (省略)
            ]
          ]
        ]
      }
    }
  ]
}

レスポンスに含まれるcategoryがboundaryでtypeがadministrativeなfeatureのpolygonがいわゆる行政区における境界線です。ルー語みたいになってしまった。

こんな感じなので実はライブラリとかなくても簡単に取得できます。JavaScriptだとaxiosを使ってこんな感じ。

import axios from 'axios';

const main = async () => {
  const baseUrl = 'https://nominatim.openstreetmap.org';
  const placeString = 'Yokohama+Kanagawa+Japan';
  const params = `search?q=${placeString}&format=geojson&polygon_geojson=1&limit=1`;

  try {
    const result = await axios.get(`${baseUrl}/${params}`);
    const coordinates = result.data.features[0].geometry.coordinates;
    console.log(JSON.stringify(coordinates));
  } catch (e) {
    console.error(e);
  }
};

main();

Webで簡単にGeocodingやりたいよねってなったら、JavaScriptのMapライブラリであるLeafletとそのプラグインであるperliedman/leaflet-control-geocoderというのを使って簡単に実装できます。OSM以外にもGoogle Geocoding APIやMapbox Geocodingなどの複数のプロバイダをサポートしているとのこと。詳細は公式サイトで。

サーバーサイドでNode.jsでってなったらnode-geocoderっていうライブラリがあります。こちらも複数のプロバイダをサポートしているようです。