Jsmap

出典: SugarForum.jp

jsmap は CogniTom Academic Design によって提供されている軽量のJavaScriptライブラリ。都道府県/州名を選択するためにグラフィカルな日本地図をポップアップ表示する。ライセンスは、APL2(Apache License Version 2.0)。

キーボード入力との併用が出来るほか、マウスだけでなく矢印キーでも選択できる。日本の他、アメリカや台湾用に地図を切り替えることも可能。

導入

下記サイトより、最新版をダウンロード。

http://jsmap.cognitom.com/

1. ダウンロードしたzipファイルを展開
2. フォルダ名を「jsmap」にリネーム
3. SugarRoot/include/ フォルダに入れる。

Sugar ソースコードの一部改変

住所入力フィールドで、jsmapを使えるようにするためには、

SugarRoot/include/SugarFields/Fields/Address/ja.EditView.tpl

の、下記の行に「autocomplete="off" class="jsmap"」を書き足す。

<input type="text" name="{{$state}}" id="{{$state}}"
     size="{{$displayParams.size|default:30}}"
     {{if !empty($vardef.len)}}maxlength='{{$vardef.len}}'{{/if}}
     value='{$fields.{{$state}}.value}' tabindex="{{$tabindex}}">

↓改変後のコード

<input type="text" name="{{$state}}" id="{{$state}}"
     size="{{$displayParams.size|default:30}}"
     {{if !empty($vardef.len)}}maxlength='{{$vardef.len}}'{{/if}} 
     value='{$fields.{{$state}}.value}' tabindex="{{$tabindex}}"
    autocomplete="off" class="jsmap">

メタファイルでの指定

上記の改変だけでは、肝心のJavaScriptのライブラリが読込まれないので、jsmapを使いたいモジュールのメタファイルで、指定しておく必要がある。templateMetaセクションで、以下のようにすればOK。

$viewdefs['Contacts']['EditView'] = array(
  'templateMeta' => array (
    //
    //省略
    //
    'javascript' =>
      '<script type="text/javascript" src="include/jsmap/map.js?locale=ja&theme=blue"></script>',
  ),
  'panels' => array (
    //
    //省略
    //
  ),
);