地図表示プラグイン
概要
指定した座標を中心とした地図を表示します。
活用例
企業の住所などの座標から地図を表示できます。
注意事項
- このサイトに掲載しているサンプルプログラムは、参考用としてご提供しています。動作保証はしておりませんので、ご注意ください。
なお、これらのプログラムを使用したことによるトラブルや損害については、責任を負いかねますので、あらかじめご了承ください。
サポート窓口へお問い合わせいただいても、対応はできかねますのでご了承ください。 - JavaScriptプラグインは、プロフェッショナルコースで使用できます。
制限事項
- レコード詳細画面のみ動作します。
- 座標はテキストタイプから、地図はスペースタイプのみ選択可能です。
- 座標は「経度,緯度」の形式で入力する必要があります。
プラグインの機能
-
設定画面 テキストフィールドから座標を選択し、スペースフィールドから地図を選択します。
-
プラグイン
位置情報に登録した座標を中心とした地図を表示します。
開発手順
STEP1：設定画面
プラグインを追加したアプリのフィールド一覧を取得し、設定の選択肢として表示します。
フィールド一覧 の取得には、REST API を使用します。
プラグイン設定用にフィールド一覧を取得します。(config.js)
// プラグイン設定情報する (アプリIDの取得用)
const config = atPocket.plugin.app.getConfig();
// フィールド一覧取得API実行する
atPocket.api('apps/'+ config.appId +'/fields', 'GET', {}, function(result) {
// 成功時に実行する処理を記載
// セレクトボックスの選択肢にフィールド一覧をセットします
・・・
}, function(result) {
// エラー時に実行する処理を記載
・・・
});
プラグイン設定表示用のHTMLを記載します。(config.html)
<div class="config_form">
<div class="config_row">
<div class="config_caption">
座標
</div>
<div class="config_input">
<select id="location_field" name="location_field">
</select>
</div>
</div>
<div class="config_row">
<div class="config_caption">
地図
</div>
<div class="config_input">
<select id="map_field" name="map_field">
</select>
</div>
</div>
</div>
STEP2：プラグイン本体
座標フィールドに入力された値の形式が正しいかチェックし、正常な値であれば地図を表示します。
レコード詳細画面表示時、座標を中心とした地図を表示します。(plugin.js)
// プラグイン設定画面で設定した値を取得します。
const config = atPocket.plugin.app.getConfig();
// レコード詳細画面表示時に実行する
atPocket.events.on(['app.record.detail.show'], function(event) {
// 座標フィールド要素を取得
const mapField = atPocket.app.record.getSpaceElement(config.map_field);
// 座標データ取得
const location = getLatLng(event.record[config.location_field].value);
if (location !== null) {
//地図を表示するdiv要素のidを設定
var map = L.map(mapField);
//地図の中心とズームレベルを指定
map.setView(location, 15);
//表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する
L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" }
).addTo(map);
L.marker(location).addTo(map);
//スケールコントロールを最大幅200px、右下、m単位で地図に追加
L.control.scale({ maxWidth: 200, position: 'bottomright', imperial: false }).addTo(map);
}
});
現在の入力値から座標形式に変換して返却します。(plugin.js)
// 座標取得
function getLatLng(value) {
// 値が空の場合
if (value == "" || value == null) {
return null;
}
// 入力値を[緯度,経度]に変換
const latLng = value.split(",").map(s => s.trim());
// 配列チェック
if (!Array.isArray(latLng) || latLng.length !== 2) {
return null;
}
// 数値変換
const lat = parseFloat(latLng[0]);
const lng = parseFloat(latLng[1]);
// 数値チェック
if (isNaN(lat) || isNaN(lng)) {
return null;
}
// 緯度・経度の範囲チェック
if(!(lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180)) {
return null;
}
return latLng;
}