クリック画像の実寸表示

段ボール箱を机にした猫 ファイルメーカー（filemaker）のちらしの裏のメモ書き

TOP 　＞　 FileMakerの値で地図の色を変更する
作成日：2025年03月10日

FileMakerの値で地図の色を変更する

イメージイラスト
にゃん太

どうも、にゃん太です

地図などからアクションを起こしたい場合ってありませんか？

四角形で表現できる範囲ならいいですが、複雑な形が必要な場合は少し困ってしまいます

今回のメモでは、複雑な形の地図からアクションする方法を書いていきます


地図からアクションをするには？

例えば、日本地図から特定の都道府県をクリックした際に何かのアクションをしたい場合、どの様に処理しますか？

日本地図
ここまで複雑な形でなくても、FileMakerでは基本的に四角形のオブジェクトしか作成できませんので対応に困る場合があります
可能であれば形をデフォルメして四角形で表現するのが一番簡単な方法でしょう
下図の様にできれば通常のオブジェクトで対応可能です

日本地図デフォルメ
しかし、形のデフォルメが許容される場合ばかりではありません
その場合は別の方法を考える必要があります

SVGを使用する

複雑な形を使用すると考えた時に思い当たるのはSVGです
パスを利用して複雑な形を描画できる上、タグ管理できるのでアクションへの対応も可能です
かなり適当な内容ですが、SVGは下記の様に作成されます

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="252.24" height="169" viewBox="0 0 252.24 169">
	<g>
		<circle fill="none" stroke="#000000" cx="169.74" cy="87.5" r="50"/>
		<line fill="none" stroke="#FF0000" x1="87.74" y1="168.5" x2="250.74" y2="168.5"/>
	</g>
	<polygon fill="#BFFFE6" stroke="#000000" points="105.74,147.5 43.74,147.5 0.74,40.5 62.74,40.5 "/>
	<polyline fill="#DDEEFF" stroke="#0066AA" points="133.74,0.5 251.74,0.5 251.74,87.5 "/>
	<path fill="none" stroke="#000000" d="M75.74,22.5c4-11,34-13,38-13s11-7,3,20s-28,10-28,10"/>
</svg>

オブジェクトの種類によって、「circle」「line」「polygon」「polyline」「path」などの様に違いがありますが、それぞれがタグで構成されますので、IDを埋め込むなり、onClick属性を埋め込むなりすれば、Javascriptで操作が可能です
先ほどの日本地図もこの様な感じにSVG形式で構成してやる事で、特定の都道府県ごとの処理が可能となります

色を変える

では実際にやってみましょう
まずは日本地図をSVG化したものをWEBビューアを使用してそのまま表示してみます

日本地図をSVGで表示
色の変更はCSSで実行できます
SVGの構造次第で書き方は変わりますが、例えば下図の様な記述で変更が可能です

全体の色変更するCSS
地図全体を色変更した日本地図
特定の都道府県だけ色を変える事もできます

特定の都道府県だけを色変更するCSS
特定の都道府県だけを色変更した日本地図
これで色の変更方法は分かりました
次は、Javascriptを使用してクリックしたと都道府県の色を変更してみましょう

クリックした都道府県の色変更するJavascript
前のクリック箇所の色を戻し、新たにクリックした都道府県の色が変更できます

クリックした都道府県の色変更される
最後に、FileMakerと連携してみます
FileMakerで各都道府県のデータを入力し、その結果をWEBビューアに反映します
10未満なら赤色、10～19なら橙色、20以上なら青色となる事とします
必要な処理は次の通りです
順番に書いていきましょう

スクリプトトリガの設定
まずはレイアウトを作り、フィールドにスクリプトトリガを割り当てます

スクリプトトリガの設定 スクリプトトリガの設定
Javascriptを呼び出すスクリプト
次に、スクリプトトリガで実行されるJavascriptを呼び出すスクリプトです

値で色を変更

# ##################################################
# 各都道府県の値を変更したらJavascriptを呼び出し
# ##################################################

変数を設定 [$request; 値: ""]
変数を設定 [$i; 値: 1]
Loop [フラッシュ:常に]
	変数を設定 [$request; 値: JSONSetElement ( $request; "p" & Right ( "00" & $i; 2 ); 日本地図::value[$i]; 2 )]
	変数を設定 [$i; 値: $i + 1]
	Exit Loop If [$i > 47]
End Loop
WebビューアでJavascriptを実行 [オブジェクト名: "viewer"; 関数名: "Coloring"; 引数: $request]

引数を元に色変更するJavascript
最後に、実行されるJavascriptを記述します

Javascriptのコード
これを実行するとこうなります

実行結果
無事、地図の色を変更することができました
以上でFileMakerの値で地図の色変更が実行できました
今回の色変更に使用したファイルを公開していますので、ご興味がありましたらこちらからダウンロードしてご確認ください
メモ書き終了の案内イラスト

以上で今日のメモ書きは終了です

内容はいかがでしたか？

もしご意見やご要望、誤りの指摘などありましたら、下記フォームよりお気軽にご連絡ください

ご連絡フォーム