WP-GPX-Mapsにマーカーを付ける方法
最近は、WordPressの記事に地図と標高図をセットで設置するWP-GPX-Mapsがかなり有名になってきていますが、個人的に運営しているサイトはマーカーをつけているのですが、どのようにしているのでしょうか?といった質問が多数よせられます。
あまり厳しく言うつもりはありませんが、WP-GPX-Mapsも所詮はLeafletで国土地理院地図にすぎません。WordPressのプラグインとなって登場していますが、中身を空けてみると仕組みそのものはLeafletと同じになっています。つまり、Leaflet地図でマーカーをつけることができるのであれば、WP-GPX-Mapsにもマーカーをつけることは可能だということです。本当はここで設置手順を説明したいところなのですが、著作権や制作者の都合上もあると思いますのであえて公開しません。また、個人的な見解で勝手にマーカーを設置していますが、本当にしていいのかすら実は私自身もわかっていません。ただし、マーカーを設置するためのヒントだけは記載しておこうと思います。まず、基本のファイルは以下であり、プラグインを直接カスタマイズすることになります。
PHPファイル: ~/wp-contents/plugins/wp-gpx-maps/wp-gpx-maps.php
JSファイル: ~/wp-contents/plugins/wp-gpx-maps/js/WP-GPX-Maps.js
この二つのファイルにマーカーの緯度経度を記載するJSONファイルとマーカーのアイコンファイルの準備が必要となります。PHPファイルは不要な処理が入っていたので削除したくらいで、ほとんど触っていません。問題はJSON本体となるWP-GPX-Maps.jsのカスタマイズになります。では、簡単のロジックだけ説明しておきますが、この記事を見て同じようにカスタムして、サイトそのものがおかしくなっても責任は負えませんのでご了承ください。ロジックは以下のようになっています。
① 緯度と経度、アイコン名、場所等を記載したCSVあるいはTSVファイルを準備してマーカーの設置場所を指定する
② ①のCMS等は各自で準備するなりしてください
③ WP-GPX-Maps.jsにマーカーのJSONを読み込ませる。読み込ませる時の注意点として、WordPressの記事のJSONを読み込ませるようにしないといけません。そのため、たとえばpost_IDなど記載したJSONファイル名にしておくのがいいでしょう
④ WP-GPX-Maps.jsに表示させたいアイコンの設定定義を記載しておく。アイコンの定義を設定していないといけません
⑤ 地図を表示するブログ記事のJSONファイルを読み込ませる。これはfetchを使えば簡単に読み込ませることができます。
⑥ 画像を表示したい場合はJSONファイルに画像の情報も入れておいて、読み込ませる
⑥ Makerの指定で、緯度と経度、表示させたいアイコン(④で定義しているアイコン)や画像などの貼り付ける指定をする。
簡単なロジックではこのような仕組みになっています。技術的にはJqueryとJavascript、PHPの技術があればわかる人であればできると思います。ただし、WordPressのプラグインを触るので、アップデートなどできなくなってしまうことをお忘れなく。ちなみに、緯度と経度を調べるにはleafmap.phpを作るといいでしょう。以下にデモを載せておきます。