暑い夏も終わり歩いて様々な場所を散策するには適した季節に入っているがデジタルにしろアナログにしろ地図の役割は欠かせない。知らない道をウォーキングしていると、一本横の道にはあんなスポットがあったのかと時間を経て後悔することもある。

歩いて30分かからない程度のスポット情報

データを活用した記事やコンテンツを制作するEd Jeffersonさんが作ったLocal Wikipedia(https://edjefferson.com/localwiki/ )は、位置情報をもとに半径1.5マイル(約2.4km)周辺のWikipediaの情報を集約して届けるという仕組みだ。Wikipediaには緯度・経度情報が記されているスポットも多く、これを用いて歩いて30分かからない程度のスポットをWebページとしてまとめて地図とともに表示する。

  • Local Wikipedia

    Local Wikipedia

  • 現在位置情報(ボタンを押してブラウザで許可)や35.681236, 139.767125のように緯度経度を入れるとWikipediaリンクや地図上での位置をまとめた集約ページが表示される

    現在位置情報(ボタンを押してブラウザで許可)や35.681236, 139.767125のように緯度経度を入れるとWikipediaリンクや地図上での位置をまとめた集約ページが表示される

地図に表示されるスポットはWikipediaへのリンクが生成されているため、スマートフォンで開いて、概略を確認しながら歩いて行ける近場のスポットへと足を進められる。ウォーキングやトレッキングの際に見過ごすスポットも少なくなる。データを用いて実践的な機能を提供するアイデアコンテンツだ。

自分用の簡易版Wikipediaマップを作ってみる

筆者は以前、JavaScriptライブラリLeaflet.jsを使ってGPXからマップ表示を行っているが、個人用にこれにならってウォーキングマップを作ってみると面白そうだと考えた。npm公式のCDNを読み込み、Leaflet.js公式サイトにあるサンプルコードに任意の位置情報とタイトル(L.marker([35.681236, 139.767125]).addTo(map).bindPopup('東京駅');)を追加する。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Leaflet Test</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <style>
    #map { height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    const map = L.map('map').setView([35.68, 139.76], 13); // 東京駅

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

L.marker([35.681236, 139.767125]).addTo(map).bindPopup('東京駅');
L.marker([35.679882, 139.764607]).addTo(map).bindPopup('KITTE');
L.marker([35.681167, 139.764857]).addTo(map).bindPopup('丸ビル');
L.marker([35.681932, 139.764379]).addTo(map).bindPopup('新丸ビル');
L.marker([35.682372, 139.760909]).addTo(map).bindPopup('皇居外苑（和田倉噴水公園）')
L.marker([35.675876, 139.763980]).addTo(map).bindPopup('東京国際フォーラム');
L.marker([35.680556, 139.769722]).addTo(map).bindPopup('八重洲地下街');
L.marker([35.683806, 139.774473]).addTo(map).bindPopup('日本橋');
L.marker([35.684388, 139.773792]).addTo(map).bindPopup('COREDO日本橋');
L.marker([35.684722, 139.773056]).addTo(map).bindPopup('日本橋三越本店');
</script>
</body>
</html>

これをHTML形式で保存(tes.html)でフォルダ(Desktop/20261026)に保存する。ローカルサーバが必要なので、ここではPythonがインストールされた環境で20261026に移動して

python -m http.server 8000

と入力してPython標準のローカルサーバを起動して、ブラウザでhttp://localhost:8000/tes.htmlにアクセスすると、ポイントが表示される。

  • HTMLファイルを保存したフォルダでpython -m http.server 8000を実行

    HTMLファイルを保存したフォルダでpython -m http.server 8000を実行

  • ブラウザでアクセスすると設定したポイントが表示される

    ブラウザでアクセスすると設定したポイントが表示される

bindPopup('東京駅');の部分はHTMLでリンクを追加できるので、以下のようにWikipediaへのリンクを加えた形で実行する。

L.marker([35.681236, 139.767125]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/東京駅" target="_blank">東京駅（Wikipedia）</a>');
L.marker([35.679882, 139.764607]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/KITTE" target="_blank">KITTE（Wikipedia）</a>');
L.marker([35.681167, 139.764857]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/丸の内ビルディング" target="_blank">丸ビル（Wikipedia）</a>');
L.marker([35.681932, 139.764379]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/新丸の内ビルディング" target="_blank">新丸ビル（Wikipedia）</a>');
L.marker([35.682372, 139.760909]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/和田倉噴水公園" target="_blank">皇居外苑（和田倉噴水公園）</a>');
L.marker([35.675876, 139.763980]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/東京国際フォーラム" target="_blank">東京国際フォーラム（Wikipedia）</a>');
L.marker([35.680556, 139.769722]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/八重洲" target="_blank">八重洲地下街（Wikipedia）</a>');
L.marker([35.683806, 139.774473]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/日本橋" target="_blank">日本橋（Wikipedia）</a>');
L.marker([35.684388, 139.773792]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/COREDO日本橋" target="_blank">COREDO日本橋（Wikipedia）</a>');
L.marker([35.684722, 139.773056]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/三越" target="_blank">日本橋三越本店（Wikipedia）</a>');
  • リンク付きのポップアップになる。クリックすると

    リンク付きのポップアップになる。クリックすると

  • Wikipediaの該当ページへとブラウザで飛べる

    Wikipediaの該当ページへとブラウザで飛べる

事前にルートがわかっている場合になるが、AIを使って自身の散策ルートを指定し、

L.marker([35.681236, 139.767125]).addTo(map).bindPopup('<a href="https://ja.wikipedia.org/wiki/東京駅" target="_blank">東京駅（Wikipedia）</a>');のかたちでリスト表示して

のように追加ポイントをAIに作らせるとあとはコピー＆ペーストで加えておくだけだ。自分専用のウォーキングWikipediaマップを構築できる。