‎独自の Java スクリプトを追加する‎

定義 

JavaScript (JS) を追加することは、さまざまな高度な使用方法に役立ちます。たとえば、次のことができます。‎

‎既定で表示しない UI 要素を非表示にする‎

‎UI でカスタムボタンを追加する‎

‎プロジェクトが開かれたときにポップアップを追加します (地物情報、クレジットを表示します)。‎

‎ユーザーがページの要素を右クリックしてダウンロードできるようする。

‎前提条件‎

‎この機能は、Lizmap インスタンスの管理者によって有効化される必要があります。‎
‎ディレクトリを media ディレクトリ。Lizmap で ‎メディア‎ フォルダーを使用する方法を読んでください。‎

‎ツールの設定 

‎リポジトリ (例: /home/data/repo1/myproject.qgs ) には、次のディレクトリが必要です。‎
```
media
|-- js
  |-- myproject
  |-- default
```
/home/data/rep1/media/js/myproject/ ディレクトリでコピーするすべてのJavaScriptコードは、この特定プロジェクトの場合にのみlizmapによって実行されます。‎
‎``default`` 内のすべての JavaScript コードは全プロジェクトに対して実行されます。‎
‎JavaScript コードの実行を許可するには、lizmap管理インターフェイスで、特権 :guilabel:` このリポジトリのテーマを許可する ` を追加する必要があります。‎

‎ビデオチュートリアル‎

This video is an quick start how to add a JavaScript to change the default panel in Lizmap.

‎スクリプトのライブラリ‎

‎リポジトリ https://github.com/3liz/lizmap-javascript-scripts に例をいくつか示します。‎

‎また、ディレクトリ lizmap-web-client/lizmap/install/qgis/media/js/ (or in GitHub https://github.com/3liz/lizmap-web-client/tree/master/extra-modules/lizmapdemo/qgis-projects/demoqgis/media/js/montpellier)では、適切なJavaScriptコードの例を見つけることができます。‎

‎拡張子 .example を削除し、それらを有効にするために media/js/default/ フォルダにコピーします。‎

‎利用可能な Java スクリプトイベント‎

‎Javascript コードでは、lizmap Web クライアントによって発生する多数のイベントを使用できます。返されるプロパティを持つ、すべてのイベントの一覧を次に示します。‎

lizmap Web クライアントで利用可能なイベント‎
‎イベント名‎	説明	プロパティを返す‎
‎ツリー作成‎	‎レイヤーツリーが凡例パネルに作成されたときに発生します。‎
マップ‎の作成	OpenLayersマップが作成されたときに発生します‎
‎レイヤーを追加‎	Openlayersレイヤーが追加されたときに発生します‎
ＵＩ作成	‎ユーザーインターフェイスが作成されたときに発生します。‎
画面に表示する	画面に表示をしたとき(左パネル)‎	id
画面表示を閉じる	画面表示を閉じたとき(左パネル)‎	id
最小サイズで表示する	最小サイズ (右パネル) で表示しとき‎	id
最小サイズの表示を閉じる	最小サイズの表示が閉じたとき‎	id
画面下に表示をする	画面下に表示したとき	id
画面下の表示を閉じる	‎画面下に表示を閉じたとき‎	id
lizmapベースレイヤーが変更されました‎	‎ベースレイヤが変更されたときに発生します‎	レイヤ
lizmapスイッチアイテム‎の選択	‎レイヤーの凡例パネルでレイヤーがハイライト表示されたとき‎	name \| type \| selected
‎レイヤースタイル変更‎	‎レイヤースタイルが変更されたとき	地物タイプ‎
lizmaplocatefeatureキャンセル	‎ユーザーがレイヤー別の位置指定ツールをキャンセルしたとき	地物タイプ‎
lizmaplocatefeature変更	‎レイヤーツールでアイテムを選択したときに発生します‎	featureType \| featureId
lizmap地物情報表示‎	地物情報コンテンツが表示されたとき
lizmap地物情報オールチルドレン表示‎	‎すべての下位ポップアップが表示されたとき	上位地物情報Element \| 下位地物情報Elements
lizmap地物情報表示_‎inattributetable	地物情報コンテンツが属性テーブルに表示されたとき (右サブパネル)‎
lizmap編集フォーム表示	編集フォームが表示されたとき	layerId \| featureId\| 編集設定
lizmap編集地物作成	‎レイヤー、地物が編集ツールで作成されたとき	layerId
lizmap編集地物‎変更‎	‎レイヤー、地物が編集ツールで変更されたとき	layerId
lizmap編集地物削除	‎レイヤー、地物が編集ツールで削除されたとき	layerId \| featureId
‎全属性‎レイヤ表示‎	‎属性レイヤーツールに表示されるすべてのレイヤーが表示されている場合	レイヤ
全‎属性‎レイヤ‎コンテンツ‎表示	‎レイヤのテーブルが画面下に表示されたときに発生します‎	地物タイプ‎
レイヤ地物上部表示	‎属性テーブル (灰色の四角形) で地物がハイライト表示されたときに発生します。このイベントを手動で発生させると、そのレイヤーに下位テーブルが存在する場合は、強制的に更新されます。‎	sourceTable \| featureType \| fid
レイヤ地物選択	‎このイベントを発生させると、地物のID を渡すことによって、レイヤーの地物の選択がトリガーされます。選択が完了すると、イベントレイヤーSelectionChangedが返り代わりに起動されます。‎	featureType \| fid \| updateDrawing
レイヤ地物フィルター選択	‎このイベントを発生させると、選択した地物のレイヤーのフィルタリングがトリガーされます。このイベントを発生させるには、いくつかの設定を選択する必要があります。フィルターが適用されると、lizmapはイベントレイヤーを起動しますフィルター処理された機能変更を返します。‎	地物タイプ‎
レイヤフィルタ地物変更	‎レイヤーのマップにフィルターが適用されたときに発生します。このイベントは、マップと属性テーブルのコンテンツの再描画も起動します。‎	featureType \| featureIds \| updateDrawing
レイヤフィルタ属性変更	‎WMS 要求パラメーターがレイヤーに対して変更されたときに発生します。たとえば、STYLE または FILTER がレイヤーに対して変更されている場合などです。‎	featureType \| filter \| updateDrawing
レイヤ地物移動フィルター	‎マップに適用されているフィルタを削除するには、このイベントを発生させます。完了すると、イベントレイヤーFilteredFeaturesChanged が再び発生し、マップコンテンツと属性テーブルのコンテンツが更新されます。‎	地物タイプ‎
レイヤ選択変更	‎レイヤーの選択が変更されたときに発生します。これにより、属性テーブルのコンテンツとマップコンテンツの再描画も起動されます。‎	featureType \| featureIds \| updateDrawing
レイヤ地物選択検索	‎このイベントを発生させると、属性テーブルの表示行に対応するすべてのフィーチャが選択され、検索テキスト入力に文字を入力してユーザーが視覚的にフィルター処理できます。‎	featureType \| updateDrawing
レイヤ地物全選択解除	‎レイヤーの選択からすべての地物を解除するには、このイベントを発生させます。一度完了すると、lizmap‎‎はイベント　レイヤー選択変更‎で応答します	featureType \| updateDrawing
lizmap　‎external検索アイテム選択	‎ヘッダー検索入力の結果に一覧表示された項目をユーザーが選択したときに発生します‎	地物
アクション結果受信	‎Lizmap 地物情報アクションが実行され、結果が受信された場合に発生します。‎	layerId \| featureId \| action \| features

‎使用可能な変数もいくつか存在します。‎

Lizmap Web Client available variables
Variable name	説明
lizUrls.media	URL to get a media
lizUrls.params.repository	Name of the current repository
lizUrls.params.project	Name of the current project

‎例‎

‎凡例のグループを折りたたむ‎

lizMap.events.on({
    uicreated: function(e) {
        $('#group-groupname td a.expander').click();
    }
});

‎右クリックを無効にする‎

‎たとえば、次のコードを使用して disableRightClick.js を追加します。‎

lizMap.events.on({
   uicreated: function(e) {
      $('body').attr('oncontextmenu', 'return false;');
   }
});

‎このコードをリポジトリのすべてのプロジェクトに対して実行する場合は、ファイルをディレクトリ /home/data/rep1/media/js/default/ ではなく、 /home/data/rep1/media/js/myproject/ にコピーする必要があります。‎

‎現在のログインユーザー ID を送信します。‎

‎現在のログイン User-ID (および/または他のユーザーデータ) を、編集ツールを使用して PostgreSQL テーブル列に送信できる例:‎

var formPrefix = 'jforms_view_edition';

// Name of the QGIS vector layer fields which must contain the user info
// In the list below, replace the right side by your own fields in Lizmap
var userFields = {
   login: 'your_lizmap_user_login_field',
   firstname: 'your_lizmap_user_firstname_field',
   lastname: 'your_lizmap_user_lastname_field',
   organization: 'your_lizmap_user_organization_field'
};


lizMap.events.on({

   'lizmapeditionformdisplayed': function(e){

      // If user is logged in
      if( $('#info-user-login').length ){
            // Loop through the needed fields
            for( var f in userFields ){
               // If the user has some data for this property
               if( $('#info-user-' + f).text() ){
                  // If the field exists in the form
                  var fi = $('#' + formPrefix + '_' + userFields[f]);
                  if( fi.length ){
                        // Set val from lizmap user data
                        fi.val( $('#info-user-' + f).text() )
                        // Set disabled
                        fi.hide();
                  }
               }
            }
      }

   }

});

‎静的ファイルの URL‎

‎メディア‎ フォルダにある静的ファイルの URL を取得する場合は、次の手順を実行します。‎

var media = '/media/image/logo.jpg';
// It can also be a media located in the common media folder such as
// var media = '../media/logo.png';
var url = lizUrls.media + '?repository=' + lizUrls.params.repository + '&project=' + lizUrls.params.project + '&path=' + media;
// console.log(url);
var image  = '<img src="' + url + '" title="Logo" style="display:inline;height:80px;margin:20px 10px;" />';

It's possible to use a function from the OpenLayers library to help building the URL :

var mediaUrl = OpenLayers.Util.urlAppend(
     lizUrls.media,
     OpenLayers.Util.getParameterString({
         "repository": lizUrls.params.repository,
         "project": lizUrls.params.project,
         "path": "picture.png"
     })
);