🐸

プログラマなら絶対知っておきたいWebで使える地図関連技術①

2022/07/15に公開

地図パズル製作所の都島です。今日はプログラマなら知っておきたい地図関連の技術ということで、まとめました。私の本業は普通のウェブプログラマで、地図に特化して仕事をしているわけではないです。と言っても、これまで何度か地図関連の仕事をしたことがあります。読んでくださっている皆様も経験があるのではないかと思います。ということで、今日は「プログラマなら絶対知っておきたいWebで使える地図関連技術①」ということでまとめていきたいと思います。といっても、私も地図やGIS関連の勉強をし始めて、2年ほどしかたっていないので、まだまだ初心者です。間違っていることなどありましたら、どんどんコメントで教えてください。よろしくお願いします!

と、その前に地図パズル製作所の宣伝をします。地図パズル製作所では OpenStreetMap と地理院地図を用いた地図パズルを作って公開しています。遊んだことのない方はぜひ一度遊んでみてください!

https://chizu-puzzle.com

Google Map

一つ目は皆さんご存じ Google Map です。ウェブサイトに地図を入れたいときに一番簡単な方法は Google Map を使う方法です。Google Map でウェブサイトに表示したい範囲を表示させて、左上のメニューから「地図を共有または埋め込む」を選択して、「地図を埋め込む」で表示される iframe タグをご自身のサイトに入れれば、表示できます。簡単ですね!

また、マイマップもとても使えます。マイマップを使えば、地図にマーカーやポリゴンを付けてウェブサイトに表示させることだってできます。

Google Maps Platform

マイマップを使って実現できない難しいことは、たいてい Google Maps Platform の Javascript API を使って実現できます。例えば、データベースからとってきた値に基づいて、地図上にマーカーやポリゴンを表示したりできます。最短ルートの計算だって、住所から緯度経度を計算することだって、いろいろできます。使ったことのない方はぜひ一度調べてみてください!

OpenStreetMap

世界で最も使われている無料の地図です。ウェブサイトで表示させたいときは、後に紹介する Leaflet と組み合わせて表示させます。例えば、Google Map だと印刷して他の人に配ることがライセンス的に厳しいですが、そういうときには OpenStreetMap を使うといいです。また、OpenStreetMap は自分で修正することもできちゃいます。自分の家の周りに新しい道ができたときには、自分で作っちゃうことができるんです。

地理院地図

日本が誇る無料の地図です。名前の通り国土地理院が出しています。OpneStreetMap には家一軒一軒まで表示されていない田舎でも、地理院地図だったらきちんと一軒一軒表示されています!(違うところがあったらすみません。。)地理院地図もOpenStreetMapと同じで、Leaflet を使ってウェブサイト上に表示させることができます。航空写真などのいろいろな地図が無料で使えるの、すごいですね!!

Leaflet

OpenStreetMap、地理院地図などの地図をウェブサイト上で表示させたいときに使うライブラリーです。単純に地図を表示させるだけでなくて、地図上にマーカーを表示させたり、ポリゴンを表示させたり、、いろいろなことができます。でも、最短ルートの計算や、住所から緯度経度を調べたりすることはできないですが、Web の地図関連技術というと絶対忘れちゃいけない技術です。

最後に

今日はプログラマなら絶対知っておきたいWebで使える地図関連技術ということで紹介しました。いくらか反響があるようでしたら、第二弾も書きますので、よろしくお願いします!

ツイッターもよろしくお願いします!

https://twitter.com/chizu_puzzle

アメブロもやってます!

https://ameblo.jp/chizu-puzzle

Discussion