なすしおばらまっぷ 開発者向けドキュメンテーション

なすしおばらまっぷ

那須塩原都市情報 API を使うと、営利・非営利を問わず、地図と位置情報を活用したウェブサイトやアプリケーションを作ることができます。

「那須塩原都市情報API」 について

「那須塩原都市情報API」 は、那須塩原市が公開する地図情報の API 提供サービスです。

市民、民間企業、学術団体が営利目的、非営利目的を問わず無料で利用し、地図と位置情報を活用したウェブサイトやアプリケーションを作ることができます。
那須塩原市では、那須塩原都市情報 API を活用し、「なすしおばらまっぷ」として、市民向けデジタル地図サービスの提供を行っています。

那須塩原都市情報 API で提供される情報は、国土地理院の「地理院地図」、那須塩原市が保有している位置情報データをオープンデータとして公開しているものです。

現在公開している情報は、都市計画や市の施設情報などで、かんたんな記述でみなさんのウェブサイトやアプリの地図上に表示できる他、API での取得もできます。

クイックスタート

地図とデータを表示して、開発を始めましょう。

地図を表示する

HTML

<div id="map"></div>

<script type="text/javascript" src="https://maps.city.nasushiobara.tochigi.jp/api.js"></script>

CSS

html, body, #map
{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

Javascript

const myCity = new city.Nasushiobara.Map();

データを表示する

那須塩原市がなすしおばらまっぷで公開しているデータを、地図上に表示できます。

観光スポットを表示する

loadData メソッドを使って、地図上になすしおばらまっぷで公開されているポリゴンデータを表示できます。

const myCity = new city.Nasushiobara.Map();

myCity.on('load', () => {

  myCity.loadData('観光/観光スポット');

})

データを取得する

以下のように地図上に表示している地物（ポリゴンや点）のデータを取得できます。

const myCity = new city.Nasushiobara.Map();

myCity.on("load", () => {
  myCity.loadData("防災・防犯/雪崩危険箇所").then((layers) => {
    myCity.on("click", (e) => {
      const features = myCity.queryRenderedFeatures(e.point, {
        layers: layers
      });
      console.log(features.map(feature => feature.properties));
    });
  });
});

対応データ

カスタマイズする

なすしおばらまっぷは、Maplibre, Geolonia Maps と互換性があります。詳しいカスタマイズの方法は、Intro - MapLibre GL JS を参照してください。

独自ドメインでホスティングする

なすしおばらまっぷを、独自ドメインでホスティングする場合は那須塩原市にお問い合わせください。

お問い合わせの際には、利用するドメイン名を伝えてください。その後 API キーを発行します。 API キーを使用して以下のようにスクリプトを読み込むことができます。

https://maps.city.nasushiobara.tochigi.jp/api.js?api-key=<APIキー>

開発環境での利用

なすしおばらまっぷは以下のドメインでは、APIキーの指定なしで利用できます。

ご利用にあたって

「なすしおばらまっぷ利用規約」に同意の上、ご利用ください。