こんにちは。Leafletでgeojsonなどのファイルを参照、表示するWEB地図を作ろうと思って勉強していますが、index.htmlを直接実行しただけではうまく動きませんでした。この場合、ローカル―サーバーの導入などが必要となり、私のような初心者がつまづくポイントになると思うので（私のように）、以下にメモします。
ここでは、VSCodeの拡張機能【Live Server】を利用して簡単にローカルサーバを導入して、Leafletで作ったWEB地図の動作を確認する方法を紹介します。
動作環境
- windows10
- Visual Studio Code v1.64.2
- Live Server v5.7.4
素材
dayjournalさんの「JavaScriptではじめるWebマップアプリケーション (PDF版)」で勉強しています。サンプルコードはこちらに公開してくださっています。
以下の章番号などは、このサンプルコードの番号を指します。
VS Codeでのサンプルコードの表示
以下、上記資料の「05-2 外部GeoJSONフィル読み込み」のサンプルコード[05-02]を参照しています。
- 下記の画面は、VSCodeでLeaflet用のファイルセットがフォルダを開き（ここではLeafletフォルダ）、index.htmlを開いたところ。メニューの[実行]-[デバッグの開始]をクリックすると、ブラウザに地図が表示される。以下、VSCodeの画面と、ブラウザに表示された地図。
本地図では、フォルダ内のgeojsonファイルを参照するようにしているのだが、うまく表示されていない。そのため、下記のように、ローカルサーバを立ち上げる必要がある。
Live Serverによるローカルサーバ―の構築
VSCodeの拡張機能であるLive Serverを使うと簡単にできる。
Live Serverの導入方法は以下を参照した。
-
Live Serverをインストールしたら、下記の画面のように、VSCodeのフォルダで先ほどのindex.htmlを右クリックして、「Open with Live Server」をクリックする。
-
すると、ローカルサーバが作られて以下のようにブラウザが開き、geojsonファイルを反映した地図が表示される。
以上です。
参考
VSCodeによるWEBアプリの構築については、以下のjmoocの講座で勉強させてもらってます。
Webで学ぶJavascript 2020