Web マップ

アプリ マップ テンプレートは、Map Viewer に現在表示されているマップを操作するように設計されています。テンプレートは通常、Web マップの URL パラメーターで指定された Web マップに基づいて、マップを作成します。それぞれの Web API は、Web マップ ID からの情報を使用してマップを作成するヘルパー メソッドを備えています。

esri.arcgis.utils.createMap(webmap,"map",{
   mapOptions:{
     slider:false
   },
   bingMapsKey:bingMapsKey
}).then(function(response){
    map = response.map;
});

グループ

グループ テンプレートは、アプリとして指定されたグループからコンテンツを表示します。

ArcGIS REST API は、ポータルのコンテンツへのアクセスを提供します。これを使用すると、入力グループ ID に基づいてグループ コンテンツを取得できます。

var portal = new esri.arcgis.Portal('https://webadaptorhost.domain.com/webadaptorname/');
dojo.connect(portal, 'onLoad',function(){
    portal.queryGroup(groupid).then(function(response){
        var group = response.results[0];
     });
});

グループが見つかった場合、そのグループからアイテムを取得するめにクエリを使用できます。

var queryParams = {
    q: 'type:"Web Map" -type:"Web Mapping Application"',
    num: 5
 };
group.queryItems(queryParams).then(function(response){
    var groupItems = response.results;
});

その他の注意事項

通常、Web アプリはさまざまな種類のコンテンツを操作できるように設計されているため、Bing Maps ベースマップやパブリックでないコンテンツなどが含まれるマップを処理するために、テンプレートを設定しなければならない場合があります。具体的な注意事項を以下に示します。

アプリ アイテムとしてのテンプレートの追加

テンプレートを Web アプリ アイテムとしてポータルに追加し、アプリへの URL を指定します。 [目的] には [構成可能] を選択します。[API] には、[JavaScript] を選択します。

テンプレートの追加が完了すると、テンプレート アイテムがコンテンツに表示され、その詳細を編集できるようになります。必ず説明的なタイトルとサマリーを入力してください。この情報は、ユーザーが構成可能なアプリ ギャラリーでアイテムを見たときに表示されます。オプションで、アプリ ファイルを含む *.zip ファイルを作成し、それをアイテムに追加してダウンロード機能を提供することができます。

アプリ テンプレートの登録

アプリ テンプレートをアイテムとして追加した後、アプリを登録する必要があります。開発する OAuth 2.0 ベースのアプリを登録することができます。アプリをポータルに登録すると、アプリケーション ID が提供されます。このアプリ ID は、アプリの配布および使用状況レポートの取得にも使用されます。

Web アプリ テンプレートを登録すると、[タイプ] を [ブラウザー] にして、[リダイレクト URI] がテンプレート アプリの URL にポイントするように設定します。

Identity Manager を操作して、登録されたアプリ ID を認識させるようにします。詳細については、ArcGIS API for JavaScipt に付属する「OAuth Basic」および「OAuth Popup」のサンプルをご参照ください。

構成ファイルの作成

アプリ構成ファイルは、アプリ テンプレートの構成オプションを定義する JSON ファイルです。 構成ファイルの例をご参照ください。

構成ファイルを作成するには、次の手順を実行します。

1. カテゴリと、セクションごとのフィールドを指定して、1 つ以上のセクションを作成します。

   {
       "configurationSettings": [        {
               "category": "",            "fields": []        }
       ]
   }

2. 次の表にリストされているフィールド タイプを使用して、構成オプションを指定します。構成ファイルの作成時に、構成設定の中で fieldName プロパティが一意であることを確認します。

   フィールド タイプ	説明
   段落	構成ダイアログ ボックスに説明文を表示します。 { "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }
   文字列	テキストの入力を受け入れます。画面上に表示されるテキスト ボックスのタイプを指定する stringFieldOption プロパティを含めます。値は textbox、textarea、および richtext です。デフォルトは textbox オプションで、1 行のテキスト ボックスです。textarea オプションは、データを入力するための大きなテキスト ボックスです。richtext オプションは、太字や斜体のフォントをテキストに設定するなど、ユーザーが書式を適用できるリッチ テキスト エディターです。 { "type": "string", "fieldName": "description", "label": "Description", "tooltip": "", "stringFieldOption": richtext || textarea || textbox, "placeHolder": "Text that appears in the text box to provide a hint to users on text to enter" } 出力のサンプル description:"Bike Accidents"
   ブール型	true または false の値を指定するためのチェックボックスを作成します。指定された機能がマップに含まれているかどうかを確認するには、condition を使用します。マップがこの条件を満たしていない場合、チェックボックスとラベルは構成パネルに表示されません。 { "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" } 出力のサンプル tool_bookmarks:false
   数値	数値を受け入れるフィールドを作成します。フィールドが特定範囲の値だけを受け入れる場合は、constraints 設定を使用して、入力を特定範囲の値に制限したり、入力値の形式を設定したりできます。 { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} } 出力のサンプル range:0.5
   日時	選択した日付で日付選択を作成します。 { "type":"date", "fieldName" : "startDate", "label" : "Start Date" } 選択した時刻で時刻選択を作成します。 { "type": "time", "fieldName": "startTime", "label": "Start Time" } 日時の出力のサンプル (ISO-8601 形式) Start Date and Time: 1970-01-01T21:30:00.000Z
   オプション	複数の選択肢を持つドロップダウン リストを作成します。 { "type": "options", "fieldName": "theme", "tooltip": "Color theme to use", "label": "Color Scheme:", "options": [{ "label": "Blue", "value": "blue" }, { "label": "Green", "value": "green" }, { "label": "Orange", "value": "orange" }] } 出力のサンプル theme:"blue"
   カラー ピッカー	パレットから色を選択したり、hex、rgb、または hsv 値を指定することができるカラー パレットを表示します。 { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" } 出力のサンプル selectionColor:"#829254"
   Web マップ ダイアログ	アプリ内に表示する新しいマップを参照または検索するダイアログ ボックスを表示します。必要に応じて、マップをテストするための条件を指定できます。指定された条件が満たされない場合は、マップが必要条件を満たしていないことを確認する整合チェック メッセージが構成パネルに表示されます。有効な条件の文字列は次のとおりです。 time - マップが時間対応である edit - アプリに編集可能なレイヤーが 1 つ以上含まれる featurelayer - マップにフィーチャ レイヤーが 1 つ以上含まれる filter - マップに対話式フィルターが定義されている 4x - マップにバージョン 4x の ArcGIS API for JavaScript でサポートされていないコンテンツが含まれる { “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] } 出力のサンプル webmap:"739ef0cf75de432995c77dd44ec8f652"
   Web シーン ダイアログ	アプリ内に表示する新しい Web シーンを参照または検索するダイアログ ボックスを表示します。 { "type": "webscene" } 出力のサンプル webscene:"ab41c86a588748128e6f5d80990a2395"
   グループ ダイアログ	アプリ内に表示する新しいグループを参照または検索するダイアログ ボックスを表示します。 { "type": "group" } 出力のサンプル group:"449d00a4478d4849bbb65612355d6cd1"
   複数のレイヤーとフィールドのセレクター	マップ内に、サポートされるタイプとジオメトリ タイプに一致するレイヤーとフィールドのツリー ビューが表示されます。 アプリのエンド ユーザーは、複数のレイヤーと各レイヤーで複数のフィールドを選択できます。 メモ: editOnly を true に設定すると、フィールド リストに編集可能なフィールドだけが表示されます。 { "label":"Select search layers and fields", "fieldName":"searchLayers", "type":"multilayerandfieldselector", "editOnly":true, "tooltip":"Select layer and fields to search", "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolyline", "esriGeometryPolygon" ] }, "fieldOptions":{ "supportedTypes":[ "esriFieldTypeString" ] } } 出力のサンプル searchLayers: [{ "id":"Whittier_Hazards_821", "fields":[], "type":"FeatureLayer" }]
   レイヤーとフィールドのセレクター	マップ内に、リストされたタイプとジオメトリでフィルターされたレイヤーのドロップダウン リストが表示されます。 ユーザーが 1 つのレイヤーと複数のフィールドを選択できるように、1 つ以上のフィールド セレクターを指定することもできます。 メモ: editOnly を true に設定すると、フィールド リストに編集可能なフィールドだけが表示されます。 { "type":"layerAndFieldSelector", "fieldName":"tableLayer", "label":"Layer to display in table", "tooltip":"Layer to display in table", "fields":[ { "multipleSelection":true, "editOnly":true, "fieldName":"hiddenFields", "label":"Hide the selected fields", "tooltip":"Fields to hide in table", "supportedTypes":[ "esriFieldTypeSmallInteger", "esriFieldTypeInteger", "esriFieldTypeSingle", "esriFieldTypeDouble", "esriFieldTypeString" ] } ], "layerOptions":{ "supportedTypes":[ "FeatureLayer" ], "geometryTypes":[ "esriGeometryPoint", "esriGeometryLine", "esriGeometryPolygon" ] } } 出力のサンプル tableLayer: { id: "2014CyclingAccidents_All_874", fields: [{ id: "urlField", fields: ["Casualty_Severity"] }] }
   Radio	一度に 1 つのオプションを選択できるラジオ ボタンを作成します。選択されたオプションは True に設定されます。 { "type": "radio", "fieldName": "layout", "tooltip": "Custom Layout", "label": "Custom Layout:", "items": [{ "label": "Sidebar", "value": "sidebarmenu" }, { "label": "FullWidth", "value": "fullwidth" }, { "label": "default", "value": "Default", "checked": true }] } 出力のサンプル customLayout:"fullmap"
   ベースマップ	すべての名前付き Esri ベースマップのドロップダウン リストを表示します。 { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” } 出力のサンプル my_basemap:"satellite"
   条件	true または false 条件に基づいてコンテンツを表示または非表示にします。たとえば、[レイヤー リストの表示] チェックボックスがオフの場合、レイヤー リストとすべての関連オプション (たとえば、[レイヤー リスト内のサブレイヤーを含める]) は非表示になります。 { "type":"conditional", "condition": false, "fieldName":"showtitle", "label":"Display Map Title", "items":[ { "placeHolder":"Defaults to web map title", "label":"Title:", "fieldName":"title", "type":"string", "tooltip":"Defaults to web map title" },{ "type":"paragraph", "value":"Enter a value to override the default title font size " }, { "type":"string", "label":"Title font size", "tooltip":"Specify title font size", "fieldName":"titlefontsize", "placeHolder":"20px" } ] } }
   検索	ロケーターを使ってフィーチャ レイヤー内のフィーチャや住所を検索するウィンドウを設定します。フィーチャの検索を設定する場合は、ユーザーはフィーチャ レイヤーを選択してフィールドを検索することができます。 { “type”: “Search”, “fieldName”: “searchConfig”, “label”: “Configure Search Options” } 出力のサンプル searchConfig: { sources: [{ locator: { url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", _url: { path: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", query: null }, normalization: true }, url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer", name: "ArcGIS World Geocoding Service", enableSuggestions: true, singleLineFieldName: "SingleLine", enable: true, id: "dojoUnique3" }], activeSourceIndex: 0, enableSearchingAll: false }
   縮尺リスト	ユーザーが選択できる事前定義された縮尺レベルの一覧が表示されます。たとえば、国、州、郡、首都圏、市区町村、地区などです。 { “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” } 出力のサンプル “customUrlLayerZoomScale”: 12000
   ExtentMap	マップの中心とズーム レベルのオプションを持つセレクターを作成します。 { "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" } 出力のサンプル mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }

構成情報とテンプレート アイテムの関連付け

構成ファイルを作成したら、次に JSON 構成ファイルとアプリ テンプレートを関連付け、構成可能にします。

1. アプリ テンプレートのアイテム ページで、[設定] タブをクリックし、上部の [Web マッピング アプリケーション] リンクをクリックします。
2. [構成パラメーター] ボックスで、構成ファイルの JSON コードを貼り付けます。

   メモ:

   [構成パラメーター] ボックス内の JSON は有効である必要があります。JSON がエラーのない整形式であることを保証するために、JSONLint などで検証ツールを使用して JSON を実行することをお勧めします。

3. 設定を保存します。

構成ファイルの例

次に、完全な構成ファイルの例を示します。

{
    "configurationSettings": [        {
            "category": "General Settings",            "fields": [                {
                    "type": "options",                    "fieldName": "theme",                    "tooltip": "Color theme to use",                    "label": "Color Scheme:",                    "options": [                        {
                            "label": "Blue",                            "value": "blue"
                        },                        {
                            "label": "Green",                            "value": "green"
                        },                        {
                            "label": "Orange",                            "value": "orange"
                        }
                    ]                },                {
                    "type": "string",                    "fieldName": "layer",                    "label": "Analysis Layer",                    "tooltip": "Feature Layer with Facilities to search"
                },                {
                    "type": "string",                    "fieldName": "orgname",                    "label": "Organization Name:",                    "tooltip": "",                    "stringFieldOption": "richtext",                    "placeHolder": "Organization Name"
                },                {
                    "type": "number",                    "fieldName": "bufferdistance",                    "label": "Search Distance (miles)",                    "value": "1"
                }
            ]        }
    ],    "values": {
        "theme": "orange",        "bufferdistance": 1    }
}