旧街道歩きなどの際は、いつも白黒地図を紙に印刷して携行している。事前に予定ルートや沿道の見どころ等を調べた際、経度緯度や名称のデータを取りみ、マップボックスという地図プラットフォーム用のデータに加工し、自身のオリジナル地図として作成、印刷したものである。
作成したデータは自宅のPCに保存してローカルで使用し、自宅PCではスクロール表示できていたが、ウェブでは今まで表示できなかった。これをウェブでも表示できるよう試してみたら、何とかできた。
↑昨年、千人同心街道を歩いた時、印刷・携行した地図（一部分）
地図をクリックすると別ウィンドウでスクロール可能な地図が現れます。
この元の地図をウェブでスクロール表示できた。白黒地図と言っても、予定ルートや見どころ等のポイントを赤い色で表示しているので、実際はカラー印刷している。ウォーキングには、やはり白黒基調の地図が見やすいもんね。
ウェブで表示できるようになるまで一苦労。自宅PCにローカルで保存してある地図データをブラウザで開くと表示できるので、まず、このファイルをクラウドの onedrive に置いて、アメブロからリンクできないか試してみたが、さすがにクラウドのファイルへのリンクはNGとなった。まあ、安易な発想だったし、かなり乱暴な方法だろう。
次に、これらの地図データをホームページに置く方法を考えた。アメブロから他のページへのリンクならOKである。だが、私は今までホームページなど作ったことがない。あと1か月あまりで高齢者の仲間入りをする私M3Vだが、六十の手習いでチャレンジ。
まずアメブロのホームページサービス amebaOwnd で試してみた。トップページを作った後、サブページにオリジナル地図を置く作業を始めたら、amebaOwnd では外部スクリプトを使えないとわかった。仕方なく、HTML と javascript 2つ、3本のファイルをテキストエディタで結合してアップロードしたところ、地図は表示できたが、なぜか縦スクロールバーが無限に動いてしまう。そのせいか、チェックボックスやボタンを操作できなかった。
25.1.13(月)
amebaOwnd に見切りをつけ、次に google site で試すことにした。google site にホームページを開設することから始め、試行錯誤。トップページを作った後、amebaOwnd の時に作ったファイルをサブページに置いたら、地図は表示できて、チェックボックスやボタンも操作できた。
ただ、今までローカルでの自分専用だったので、かなり使い勝手が悪い。ウェブでは操作しやすいように、いろいろ工夫を加えて改良することにした。当然、HTML や JavaScript などと悪戦苦闘しながらの作業となった。
一番苦労したのが、印刷イメージのA4縦・A4横切り替え。今までの自分専用のものではこの切り替えができず、ウィンドウを別々に開かねばならなかった。
なお、google site も amebaOwnd と同様、外部スクリプトを使えないとわかったが、当面は google site で改良に取り組むことにした。
25.1.16(木)
A4縦・A4横切り替えが、ボタンでできるようになった。だが、自宅PCのローカルファイルで表示した時と、ネットに上げてウェブで表示した時とで、印刷イメージに表示される範囲が異なっている。何でだろう？
25.1.17(金)
いろいろ試したところ、既定倍率／カスタム倍率の指定で、同じ印刷イメージにできた。同じブラウザ(グーグルクローム)でも、ローカルファイルとウェブで、印刷に関する動作が異なるらしい。また、A4縦，A4横どちらも1万分の1、つまり印刷した紙での1cmが実際の100mになるように数値を設定したが、これも理屈や計算で決めたのではなく、自宅のPCとプリンタでやってみて経験的に決めたもの。
このあたりはOS、ブラウザやプリンタ等、動作環境によって微妙に異なるから、普遍的な最適解は得られない。これ以上深入りすることもないだろう。
25.1.18(土)
朝、前日までに作ったものを立ち上げた後、マウスのホイールで拡大・縮小操作をしたら、表示が更新されるまで時間が長くかかったり、表示が欠落したままの部分ができたりした。昼休み時間帯にも同じような現象が多く発生。どうやら通信が重いせいらしい。マップボックスの地図データがどういう形式かわからないが、やはりサイズは多いだろうな。
今まで使っていた自分専用のものでは、作成したオリジナル地図の表示確認用に、横600px×縦500px のコンパクトなサイズの画面を用意していた。
ウェブでの表示においても、操作に対してすぐに反応するような、確認用の小さな画面があったほうがいいだろう。最初に表示される地図を、A4縦イメージから小さいものに変更することにした。
どうせ作るなら葉書サイズにしよう。と思いついた。上↑の地図を葉書に印刷する必要などほとんどないだろうが、あくまで表示確認用さ。A4縦・A4横切り替えメニューに「はがき」を追加。これを初期表示とした。サイズは自宅PCでいろいろ試してみて、横720px×縦445pxとしたが、これもブラウザやプリンタ等、動作環境によって微妙に異なるだろう。
初めてのホームページ開設と、久々のプログラミング。還暦過ぎた老化著しい頭で、HTML や JavaScript と悪戦苦闘した体験談は閑話休題。
---- ---- ---- ----
ネット上では、地図を扱ったページが多数公開されている。地図上のルートをマーカが動いて移動するようなものもあれば、山登りのページで登山道の高低断面図が表示されたりする。私にはとても、そのような高度なものを作る技術もなければ、気力もない。
私の白黒地図は、マップボックスの GL JS という地図プラットフォームを利用して作成した。マップボックスは日本のゼンリンと提携しているようだ。日本市場だとゼンリンと提携するのが有利だろうな。
地図を扱うプラットフォームはマップボックスやグーグルの他、ヤフーなど他の民間会社も提供している。検索すると、esriジャパン，mapillary とかが表示される。また、国土地理院は日本の地図をウェブで提供している。
地図を扱うプラットフォームがいろいろな組織から多数提供されているのは、近い将来の実用化と普及が確実視されている、公道での自動運転を意識しているのかな。自動運転市場での優位を目指して、関連するノウハウを集めているのかも。
私もその恩恵にあずかって、趣味で使うオリジナル白黒地図を作成できた。ということかな。