勉強したことのメモ

webプログラマが勉強したことのメモ。

leaflet.jsとosmでマップ表示及びマーカー設置

      2020/07/02

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必要になり、非常に使い勝手が悪くなったので代替案を探していた。有名どころのYahooはどうかと調べたところ2020/10/31でAPIの提供を打ち切るらしい。その他だとleaflet.jsとOpenStreetMapを使うのがよさそう。以下に方法をメモ。

 

サンプル

http://sample.taitan916.info/osm/

GoogleMapに慣れているからだとは思うが、デザイン的に微妙に感じた。何と言うか見づらい。

 

ソース

外部JSの呼び出しにAPIキーはいらないっぽい。

mapDataの連想配列部分はPHPのforeachとかでループさせて表示する形で使用する想定。

 

leaflet.jsとOSM

GoogleMapAPIだとそれ単体でマップを表示できたが、今回はleaflet.jsとOSMに分かれておりそれぞれの役目がなんなのかイマイチ分からなかったので調べたところ、leaflet.jsはWeb地図の為のjavascriptライブラリとのこと。

leaflet.jsを使ってGoogleMapを表示(タイルレイヤを表示)するといったこともできる模様。

次にOpenStreetMapだがこちらは誰でも自由に利用できる地理情報データを集積したデータベースのようなものらしい。OSMのデータを使ってleaflet.jsで表示するみたいな感じか。

 

その他

以下に関しても可能かどうか検証、可能ならサンプルを作っておきたい。

 

・経度緯度⇔住所の取得・変換(作成済み)

無料でジオコーディング(住所→経度緯度)を行う

・現在地の取得(作成済み)

leaflet.jsとOSMで現在地の取得

 

・マーカーの変更(作成済み)

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

 

・クリックした位置の座標を取得

・マップを移動した際の中心座標を取得

・複数マーカーをまとめる

・複数マーカーを全て表示できるようオートズーム

 

上記が全て可能であればとりあえずはGoogleMapAPIの代替案として使っていけそう。

 - JavaScript ,

  関連記事

HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

javascriptでスクロール

やりたかった事は、 ・javascript,jQuery使う ・スクロールさせた ...

日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

JavaScriptで住所から経度緯度を取得する

やりたかった事はformに住所を入れてsubmitする際に、javascript ...

迷惑メール対策でフォームにreCAPTCHAを導入する方法

スパムメール対策として問い合わせフォームにreCAPTCHAを導入したいという件 ...