Twitterを見ていて、国土地理院の地図に住所の入ったcsvをドラッグ＆ドロップするだけで地図にマーク表示することができる、ということを知りました。早速試してみたら、とっても簡単に地図にそれぞれの住所のマークを入れることができたのでその方法について書きます。
国土地理院の地図に関するホリエモンのTwitter
刑務所なう。、刑務所なう。２、刑務所わずを読んで率直な人柄に興味を持ち、それ以来個人的に堀江貴文さん（ホリエモン）のTwitterをフォローしています。
今日のこちらのTweetに興味を持ちました。
便利な世の中やねー
住所CSVをドラッグ＆ドロップするだけで地図に表示 「地理院地図」新機能 (ITmedia NEWS) – https://t.co/wbMXPDSCXr— 堀江貴文(Takafumi Horie) (@takapon_jp) 2019年3月29日
国土地理院の地図
国土地理院とはうっすら聞いたことはあってもホームページを見たり、地図を利用しようとしたことはありませんでした。
まずは「国土地理院 地図」で検索して、
へ来ました。なるほど、地図があります。この地図はpngファイルとして保存したり、
URLやTwitter,FacebookなどのSNSでも利用できるようです。
pngの利用は「国土地理院コンテンツ利用規約」に従えば、商用でも利用することが可能なようです。詳しくは規約サイトを読んで下さい。
表示するcsvをオープンデータからダウンロードする
ブログに書くに当たり、公開してもいい住所が複数掲載されているcsvは…と考えて、オープンデータから拾ってくることにしました。
八王子の赤ちゃん・ふらっと設置施設（CSV形式 10キロバイト） というCSVをダウンロードしました。
八王子市、クリエイティブ・コモンズ・ライセンス 表示 2.1
国土地理院の地図にCSVをドラッグ＆ドロップする
準備ができたので、国土地理院の地図にCSVをドラッグ＆ドロップします
PCにあるCSVファイルをドラッグして、ブラウザで表示中の地図の上まで持って行きドロップします。
すると、このように読み込みする内容の確認画面がでます。
アイコンをクリックすると、沢山のアイコンからイメージに合うものを選ぶことができます。
上記の内容で読込開始をクリック
しばらく待つと
このように地図上に、CSVの住所からのマークが表示されました。
ドラッグや上下スクロールで位置と大きさを変えます。
アイコンをクリックすると
住所以外の項目も表示されることがわかります。
機能＞ツール＞作図・ファイル をクリックすると
この画面になります。CSVのアイコンのラベルを表示をクリックすると
名称が表示されるようになりました。
とはいえ、この場合はデータが多すぎるため名称が重なって表示されてしまいます。もう少し少ないデータの時か、あるいは拡大して名称が重ならない程度での使うのがいいのかなと思いました。
国土地理院の地図とCSVから表示されたマークの地図を利用する方法
このように地図の上に任意の場所のマークが表示されるのはわかりました。これを自分のホームページなどで利用するにはどうすればいいかについて考えてみました。
画像を保存して利用する
表示されている地図を「画像として」保存することができます。
機能＞ツール＞画像として保存
をクリックすると
このように表示されます。とりあえずこのまま OK をクリック
このポップアップで画像を保存をクリック
任意の場所にpngファイルを保存します。
出典：国土地理院ウェブサイト にCSVを重ねて表示
八王子市、クリエイティブ・コモンズ・ライセンス 表示 2.1
保存したファイルはこのように画像として利用することができます。
kmlファイルとして利用する方法
kmlファイルという形でもこの地図を保存することができます。
機能＞ツール＞作図・ファイル をクリックしたあとに、保存マークをクリックすると、kmlファイルがダウンロードできます。
kmlファイルをWordPressで表示できるプラグインをいくつか試したのですが、今時点でまだこのファイルを地図として表示することができていません。
WordPress以外の方法で、kmlファイルの利用方法についてはわかりましたので書きます。
Googleにログインしておき、Googleマップを開きます。
左上のハンバーガーメニューをクリック
マイプレイスをクリック
マイマップをクリック
画面下部の地図を作成をクリック
インポートをクリック
この画面が表示されますので、保存してあったkmlファイルをドラッグ&ドロップします。
しばらく待つと先ほどの地図が表示されました！画像と違って、
データの情報（名称など）も見ることができます。
権限を公開にすれば共有して、ホームページに貼り付けることもできるようになります。
コメント