LeafLetを使って地図を出してみた(*^^*)

この記事は約3分で読めます。

WordPressのプラグインにもありますが、

Google Map APIが課金対象となるので、

このAPIの代わりになる地図表示がデキルもの

として、「LeafLet」を使って

ホームページの地図情報として、

近くのパーキングをピン表示してみました。

作っていく手段として、

あらかじめ、データ化して出すので

データ化だけのページでもいいですが、

制作していく順番として

固定値で試して、確認後、データ化して出す

といった段階を踏んで作っています。

それほど詳しい知識がなくても

ソースコードをコピペ作業程度で作れるように

いろいろなサイトで紹介されていましたので、

HTMLと少しのJavaScriptの知識だけで作れそうです。

データ化するのならば・・・

どういった形式でデータをもたせるべきか?

膨大なデータ量であれば、

データベース化となるのですが、、、

少量のデータであれば?

(データ内容によりますが・・・)

JavaScriptで使いやすいであろう

JSONといったファイル形式

(実は初めて使ってみた)

こちらで、データ化を試してみました。

読込みから、データ化が、まぁ簡単ですね

JSON.parse()

これが使えるので・・・

と、作るのはわりと簡単。

でも、、、問題は、デバッグ作業(笑)

JavaScriptですので、書式エラー、構文エラーがあると

思い通りに出てくれません。

そんなの当たり前じゃないか?

みたいになるのですが・・・

間違いを探すのが、大変な作業となります。

コピペ作業ですので、、、

カッコ1個でも、間違うと、、、、

しかも、データファイルを扱うとなると・・・

ブラウザの制限もあり、この影響でローカルでは動かない!?

といったことも・・・

助かったのは、Microsoft Edge で 動いてくれたこと

普段、使わない、この Microsoft Edge

JavaScriptのデバッグ機能もあり、大助かりでした。

(*^^*)

デバッグ機能あるなら、早く使えばよかったっと後悔もありますが、

この LeafLet GoogleさんのAPIを使って

課金が・・・・っと不安になるのであれば、

使ってみてもよいかもしれませんね・・・

2種類のページを作ったのは、

見た目だけで判断するのは間違いです。

っと伝えてみたかった。

見た目は同じでも、

中の仕組みは違っている。

見るユーザは、何で作ろうと、

そんなことは、どうでもいいお話です。

でも、プログラマーさんやSEさんは

プログラミング言語でも悩むんですよ(笑)

この言語だからダメとか、

この言語だからいい?

ってのは、内輪のお話であり、

お客様、ユーザにとってはどうでもいいお話です。

だから、

このプログラミング言語だから

作れません?

っというのは、どうなんでしょうネ

っと、一部のプログラマーさんが

お話されているのを聞いて・・・

少々驚きもありました。

(*^^*)

いろいろ調べると

解ることってあるから、インターネットって便利だね

上手に活用していきましょう。

タイトルとURLをコピーしました