目次
- はじめに
- 完成イメージ
- 実装方法
- 動作チェック
- 最後に
はじめに
VisualizerではマップWidgetを使用し、地図を表示することができますが、
ピンをタップした際に表示される情報が、
デフォルトでは名前と詳細だけの限定的な情報しか表示されません。
デフォルト表示↓
マップ WidgetのTemplateを使うことで、
様々な情報を表示させることができるので、今回はその方法をご紹介します！
完成イメージ
今回の完成イメージは以下の通りです。
名前以外に、画像と詳細、評価を表示するようなイメージとなります。
実装方法
早速実装方法の紹介をします！
フォーム作成
まずMap Widgetをフォームに追加しましょう。
今回は画面いっぱいに地図が広がるよう、このように配置しました。
Map Template作成
次にMap Widgetを選択した状態でTemplatesタブをクリック後、
Mobile->Mapsを右クリックし、New Templateをクリックします。
ここでは、
マップのピンをタップした時のテンプレートを作成することができます。
今回は、
タイトル、画像、詳細、評価の欄を表示したいので、
以下のような構成でテンプレートを作成しました。
背景の色は地図と被らないように、白色に設定しています。
テンプレート適用
作成したテンプレートをフォーム側で設定します。
Projectタブを開き、マップWidgetを配置しているフォームを開きます。
マップWidgetを選択した状態で、
PROPERTIES->Mapタブを開きCallout TemplateのEditをクリックします。
ポップアップが開くので、
先ほど作成したテンプレートの名前を選択し、OKをクリックします。
テンプレートの作成・適用まで完了したので、
場所を表示するためのロケーションデータと、
ピンを地図に表示するためのロジックを作成していきます。
ロジック作成
マップが配置されているフォームのControllerを開き、
以下のように入力します。
define({
//Type your controller code here
loadData : function(){
var locationDatas = [
{
id: "pin1",
lat: "35.70678417763973",
lon: "139.79013532331442",
name: "バーガー喫茶 チルトコ",
desc: "ハンバーガー店",
showCallout: true,
calloutData: {
"name": "バーガー喫茶 チルトコ",
"image" : "chilltoko.png",
"desc" : "おしゃれなハンバーガーショップ！",
"review" : "★★★★☆"
}
},
{
id: "pin2",
lat: "35.68942579227367",
lon: "139.77288609129005",
name: "Wagyu Burger",
desc: "ハンバーガー店",
showCallout: true,
calloutData: {
"name": "Wagyu Burger",
"image" : "wagyu.png",
"desc" : "和牛を使った美味しいハンバーガー！",
"review" : "★★★☆☆"
}
},
{
id: "pin3",
lat: "35.73343382504281",
lon: "139.71793555577986",
name: "No.18ハンバーガー",
desc: "ハンバーガー店",
showCallout: true,
calloutData: {
"name": "No.18ハンバーガー",
"image" : "no18.png",
"desc" : "高品質のグルメバーガー",
"review" : "★★★★★"
}
}
];
this.view.mapMain.widgetDataMapForCallout = {lblLocationName : "name", imgLocation : "image", lblLocationDesc : "desc", lblReview : "review"};
this.view.mapMain.addPins(locationDatas);
}
});
locationDatasに、
表示したい場所の情報を配列で記載しています。
widgetDataMapForCalloutでは、
テンプレートで作成したWidget名と
locationDatasのデータとの紐付けをおこなっています。
こうすることで、
locationDatasのcalloutDataの中に入っているデータが、
テンプレートで作成したWidgetに表示されるようになります。
addPinsは、
地図にピンを複数追加するためのメソッドとなります。
詳細は、以下の記事にもありますのでご参考ください。
これでロジックの作成も完了です！
動作チェック
早速プレビューで動作を確認してみましょう。
Controllerで書いたマップの情報が表示され、
画像も追加されたことでわかりやすい地図表示になりました！
最後に
テンプレートを使用することで、
伝えたい情報を複数表示することができるので、ぜひ活用してみてくださいね！
参考