概要説明

Viteを利用してアプリケーションのテンプレートを作成します。その後にLeafletを使って地図の表示から町丁目ポリゴンの表示まで行います。
Node.jsはインストール済みの想定となります。

使用したもの

Vite

Viteとは2020年に発表されたフロントエンドのビルドツールで、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

leaflet

比較的軽量なオープンソースのJavaScript地図ライブラリです。

町丁目ポリゴン

町丁目とは行政界の一つで「富士見町3丁目」「広尾1丁目」など「●丁目」で表わされる行政区画のことです。行政界は他には都道府県や市区町村、大字などがあります。
町丁目ポリゴンとは町丁目の境界データであり、e-stat で小地域（町丁・字等別）という名称で公開されています。

今回使用する町丁目ポリゴンは、TerraMap API からレスポンスされたGeoJSONです。

レスポンスされたGeoJSONのサンプル

PolygonSample.geojson

{
  "type": "FeatureCollection",
  "features": [
      {
          "type": "Feature",
          "properties": {
              "area": {
                  "area": 0.1875635128037082
              },
              "point_coordinates": [
                  139.66641,
                  35.67514
              ],
              "geocode": "13113002802"
          },
          "geometry": {
              "type": "MultiPolygon",
              "coordinates": [
                  [
                      [
                          [
                              139.671072468,
                              35.675472254
                          ],
                          [
                              139.671087008,
                              35.675455055
                          ],
                          [
                              139.668725237,
                              35.674791116
                          ],
                          [
                              139.665545327,
                              35.673872239
                          ],
                          [
                              139.661458827,
                              35.672694079
                          ],
                          [
                              139.661419451,
                              35.672851547
                          ],
                          [
                              139.661380745,
                              35.672937476
                          ],
                          [
                              139.661480105,
                              35.673177857
                          ],
                          [
                              139.661702716,
                              35.673487731
                          ],
                          [
                              139.661785305,
                              35.673651366
                          ],
                          [
                              139.661614923,
                              35.674287572
                          ],
                          [
                              139.6614962,
                              35.674380922
                          ],
                          [
                              139.661459656,
                              35.674408793
                          ],
                          [
                              139.662425327,
                              35.674739902
                          ],
                          [
                              139.66654409,
                              35.676248336
                          ],
                          [
                              139.667841199,
                              35.676698291
                          ],
                          [
                              139.670456339,
                              35.677651212
                          ],
                          [
                              139.670879432,
                              35.675730569
                          ],
                          [
                              139.670937715,
                              35.675631642
                          ],
                          [
                              139.671072468,
                              35.675472254
                          ]
                      ]
                  ]
              ]
          }
      }
  ]
}

Viteを使ってテンプレートを作成

はじめにnpm createコマンドを使用してアプリケーションのテンプレートを作成します。

npm create vite@latest

対話形式で入力や選択を行います。Project nameは「leaflet_polygon_vite」とし、frameworkとvariantは以下のように選択しました。

Need to install the following packages:
create-vite@5.3.0
Ok to proceed? (y) y
√ Project name: ... leaflet_polygon_vite
√ Select a framework: » Vanilla
√ Select a variant: » JavaScript

Scaffolding project in C:\develop\qiita\leaflet_polygon_vite...

Done. Now run:

  cd leaflet_polygon_vite
  npm install
  npm run dev

以上でテンプレートの作成が完了となり、ファイルが作成されました。

Vite環境とLeafletのインストール

以下のコマンドを実行してVite環境とLeafletをインストールしておきます。
cdコマンドで指定するディレクトリはテンプレート作成時に入力したProject nameを指定します。

cd leaflet_polygon_vite
npm install
npm install leaflet

地図の表示

LeafletのQuick Start Guideのサンプルを元にindex.htmlとmain.jsを以下のように編集します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <style>
      body { margin: 0; }
      #map { height: 100vh; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

main.js

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const latLng = [35.67514, 139.66641];
const map = L.map('map');
map.setView(latLng, 16);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);

編集が完了したら以下のコマンドを実行して開発サーバーを立ち上げます。

npm run dev

URLを開くと地図が表示されます。

> leaflet_polygon_vite@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v5.3.1  ready in 238 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

表示結果

GeoJSONファイルを読み込み町丁目ポリゴンを表示

続いてmain.jsに以下のコードを追加してGeoJSONファイルを読み込み、地図上に町丁目のポリゴンを表示するようにします。
GeoJSONファイルはindex.htmlやmain.jsと同じディレクトリに配置します。

main.js

// ポリゴンのスタイル設定
const polygonStyleOptions = {
  color: "#810FCB",
  opacity: 1.0,
  weight: 2.0,
  fillColor: "#810FCB",
  fillOpacity: 0.5,
};

// GeoJSONファイルの表示
fetch("PolygonSample.geojson")
  .then((response) => response.json())
  .then((data) => {
    L.geoJSON(data, polygonStyleOptions).addTo(map);
  });

表示結果