地図にピンを刺してみよう（Leaflet.js サンプル）

緯度・経度を指定して、地図上にピン（マーカー）を立てる練習用のサンプルです。 プログラミングが初めての人でも動かせるように、1つのファイルだけで完結しています。

教材（課題・参考サイト）は TEXTBOOK.md にあります。

サンプルは2つ入っています。中身は地図の取得先（L.tileLayer に書く URL）が違うだけで、 あとは同じです。

ファイル	地図
index.html	OpenStreetMap — 世界中のボランティアが作っている地図
index-gsi.html	地理院地図 — 国土地理院（国の機関）が公開している日本の地図

ファイルを手に入れる

git を使わない場合（おすすめ・アカウント不要）

GitHub のこのページから ZIP でまるごとダウンロードできます。

1. ファイル一覧の右上にある、緑の Code ボタンを押します。

2. メニューが開くので、いちばん下の Download ZIP を押します。

3. ダウンロードされた ZIP を解凍（ダブルクリック）します。

git が使える場合

git clone https://github.com/kuwachiji/sample.git
cd sample

使いかた

インターネットにつながっている必要があります（地図の絵と Leaflet をネットから読み込むため）。

1. まず index.html をダブルクリック

東京駅あたりの地図と3本のピンが出たら、それで準備完了です。 入力欄に緯度・経度を入れて「ピンを刺す」を押してみましょう。

ただし、地図が「Access blocked」という絵で埋まることがあります。 パソコンの中のファイルを直接開くと、OpenStreetMap 側に「どこからの要求か分からない」と 判断され、地図の絵を返してもらえないためです。その場合は次へ。

2. index-gsi.html をダブルクリック

地図を地理院地図（国土地理院）に変えたものです。こちらは ダブルクリックで開いても地図が表示されます。 地名も日本語なので、日本国内を扱うならこちらのほうが読みやすいはずです。

中身は index.html と同じで、地図の取得先だけが違います。

3. それでもだめなら、簡易サーバーを立てる

学校の端末など、ファイルを直接開くこと自体が制限されている場合はこちらです。 index.html の入ったフォルダを、簡易的なウェブサーバーとして公開してから開きます。 準備はいりません。Mac も Windows も、最初から入っているもので動きます。

1. ファイルのあるフォルダをターミナル（Windows は PowerShell）で開きます。

• Mac … Finder でフォルダを右クリック →「フォルダに新規ターミナル」 （出てこない場合は、ターミナルで cd と打ってから、フォルダをウインドウにドラッグ＆ドロップ）
• Windows … エクスプローラーでフォルダを開き、上のアドレス欄に powershell と打って Enter

2. 下のコマンドを実行します。

Mac:

python3 -m http.server 8000

Windows:

py -m http.server 8000

3. ブラウザで http://localhost:8000/index.html を開きます。

終わるときは、ターミナルで Ctrl + C を押すとサーバーが止まります。 ファイルを書きかえたときは、サーバーはそのままでブラウザを再読み込みするだけで反映されます。

エディタに VS Code を使っているなら、拡張機能「Live Server」を入れて index.html を右クリック →「Open with Live Server」でも同じことができます。

緯度・経度の調べかた

• Google マップ で場所を右クリックすると、 35.658581, 139.745433 のような数字が出ます。前が緯度、後ろが経度です。
• 日本はだいたい 緯度 24〜46 / 経度 123〜146 の範囲です。

試してみる例：

場所	緯度	経度
東京タワー	35.658581	139.745433
大阪城	34.687315	135.526201
札幌時計台	43.062660	141.353539

コードを書きかえてみる

index.html をテキストエディタで開いて、const pins = [ の部分を探してください。

const pins = [
  { name: "東京駅", lat: 35.681236, lng: 139.767125 },
  ...
];

name が名前、lat が緯度（latitude）、lng が経度（longitude）です。

この行をまねして増やしたり、数字を変えたりすると、最初から出るピンが変わります。 書きかえたら保存して、ブラウザを再読み込み（リロード）してください。

つまずいたときは

• 地図が真っ白: CSS の #map { height: 60vh; } を消していませんか？ 地図を入れる箱には高さの指定が必要です。
• ピンが出ない: 緯度と経度を逆に入れていないか確認してみてください。
• 地図の絵が出ない: インターネットにつながっているか確認してください。
• 地図が「Access blocked」「403」という絵で埋まる: index.html をダブルクリックで 開いたときに起こります。index-gsi.html を開くか、簡易サーバーを立ててください。
• http://localhost:8000 を開いても表示されない: サーバーを動かしたターミナルを 閉じていませんか？ 閉じるとサーバーも止まります。開いたままにしておいてください。

使っているもの

• Leaflet 1.9.4 — 地図を表示するライブラリ
• OpenStreetMap — 地図データ（index.html）
• 地理院地図 — 地図データ（index-gsi.html）