콘텐츠를 생성할 권한이 있으면 고유한 사용자 정의 앱 템플릿을 생성할 수 있습니다. 사용자 정의 앱 템플릿을 생성하여 구성하면 포털에 내 템플릿을 추가하여 ArcGIS에서 내 앱이 검색되도록 할 수 있습니다. 그러면 사용자가 모양 및 동작을 사용자 정의하기 위해 앱을 구성할 수 있도록 할 수 있습니다. 또한 기관에서 템플릿을 해당 갤러리 중 하나에 포함할 계획인 경우 앱 템플릿 그룹과 공유할 수 있습니다.
웹앱 템플릿 생성 및 구성
사용자 정의 웹앱 템플릿을 생성하려면 기존 구성 설정 앱 템플릿 중 하나를 다운로드하여 수정하거나, 포털의 콘텐츠와 함께 작동하도록 기존 웹앱을 업데이트하거나, ArcGIS 웹 API 중 하나를 사용하여 새 웹앱을 생성하면 됩니다.
어떤 방법으로 앱을 생성하든 URL 매개변수 및 맵을 사용하게 됩니다. 그룹 기반 앱 템플릿을 생성할 경우 그룹과 함께 작업할 수 있습니다. 이때 Bing Maps 베이스맵 작업, 비공개 맵 접근, 프록시, CORS(Cross-Origin Resource Sharing)가 필요한 리소스 작업에 대한 추가 요구 사항을 고려할 수 있습니다.
ArcGIS Enterprise 포털에는 ArcGIS API 3.15 for JavaScript가 포함되어 있습니다. 자체 API를 호스팅하고 포털이 새로 생성된 앱 템플릿의 로컬 버전을 가리키도록 지정할 필요가 없습니다. 웹앱 템플릿에서 설치된 API를 자동으로 참조합니다. 로컬로 설치된 API는 일반적으로 https://webadaptorhost.domain.com/webadaptorname/jsapi/jsapi에서 사용할 수 있습니다.
주의:
ArcGIS Enterprise와 함께 제공된 웹앱 템플릿 파일을 변경하지 마세요. 이러한 파일은 포털에서 관리되므로 변경할 경우 포털에서 덮어쓸 수 있습니다. 템플릿을 사용자 정의하려면 다음과 같이 하세요.
- 사용자 정의할 기존 템플릿 파일의 복사본을 만듭니다.
- 복사본을 디스크의 다른 위치에 저장합니다.
- 템플릿 복사본을 사용자 정의합니다.
- 포털에 새 템플릿으로 추가합니다.
웹맵
앱 템플릿은 Map Viewer에 현재 표시된 맵을 사용하도록 설계되었습니다. 일반적으로 템플릿은 웹맵 URL 매개변수에 지정된 웹맵을 기반으로 맵을 생성합니다. 각각의 웹 API에는 웹맵 ID의 정보를 사용하여 맵을 생성하는 도우미 메소드가 있습니다.
예를 들어 ArcGIS API for JavaScript esri.arcgis.utils.createMap 메소드를 사용하여 입력 ID를 기반으로 맵을 생성할 수 있습니다. 또한 esri.arcgis.utils.createMap에 대한 동기 요청이 완료된 경우에 실행되는 콜백 함수를 포함할 수 있습니다.esri.arcgis.utils.createMap(webmap,"map",{
mapOptions:{
slider:false
},
bingMapsKey:bingMapsKey
}).then(function(response){
map = response.map;
});
비고:
웹맵에 Bing Maps 베이스맵이 포함된 경우 createMap 메소드를 사용할 때 Bing Maps 키를 지정해야 합니다. 그 밖에도 슬라이더, 탐색, 속성 등의 보기 여부와 같은 여러 가지 기타 맵 옵션을 지정할 수 있습니다.
callback 함수는 맵 개체, 레이어 등에 접근할 수 있는 응답 개체에 대한 접근 권한을 제공합니다.
그룹
그룹 템플릿은 지정된 그룹의 콘텐츠를 앱으로 보여줍니다.
ArcGIS REST API를 사용하면 포털의 콘텐츠에 접근할 수 있습니다. 이를 사용하여 입력된 그룹 ID를 기반으로 그룹 콘텐츠를 검색할 수 있습니다.
다음 예시에서는 입력 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];
});
});그룹을 찾은 후에는 그룹에서 항목을 검색하기 위해 쿼리할 수 있습니다. 이 예시에서는 그룹을 쿼리하여 유형이 Web Map 또는 Web Mapping Application인 항목 5개를 찾습니다.var queryParams = {
q: 'type:"Web Map" -type:"Web Mapping Application"',
num: 5
};
group.queryItems(queryParams).then(function(response){
var groupItems = response.results;
});
추가 고려 사항
일반적으로 웹앱은 많은 유형의 콘텐츠를 사용하도록 설계되므로 Bing Maps 베이스맵, 비공개 콘텐츠 등이 포함된 맵을 처리하도록 템플릿을 설정해야 할 수 있습니다. 특정 고려 사항은 다음과 같습니다.
Bing Maps 키
표시하려는 맵에서 Bing Maps 베이스맵을 사용하는 경우 앱에 Bing Maps 키를 포함해야 합니다. Bing Maps 키는 createMap 메소드의 매개변수로 제공됩니다.
프록시 및 CORS 지원
앱에서 교차 도메인 요청을 보내는 경우 CORS를 활성화하거나 앱에 프록시를 추가해야 합니다.
포털에 템플릿 추가
웹앱 템플릿을 생성하면 포털에 내 템플릿을 추가하여 ArcGIS에서 내 앱이 검색되도록 할 수 있습니다.
앱 항목으로 템플릿 추가
포털에 웹앱 항목으로 템플릿을 추가하고 앱에 대한 URL을 지정합니다. 목적에 대해 구성 가능을 선택하세요. API에서 자바스크립트를 선택합니다.
템플릿을 추가하면 내 콘텐츠에 템플릿 항목이 표시되고 해당 세부정보를 편집할 수 있습니다. 제목 및 요약 정보는 사용자가 구성 설정 앱 갤러리에서 이 항목을 가리킬 때 나타나므로, 자세히 입력해야 합니다. 필요한 경우 앱 파일이 포함된 ZIP 파일을 생성해 항목에 첨부하여 다운로드 기능을 제공할 수 있습니다.
앱 템플릿 등록
앱 템플릿을 항목으로 추가한 후에는 앱을 등록해야 합니다. 개발한 OAuth 2.0 기반 앱을 등록할 수 있습니다. 포털에 앱을 등록하면 앱 ID가 제공됩니다. 앱 ID는 앱을 배포하고 사용 보고서를 가져오기 위한 기준으로 사용됩니다.
웹앱 템플릿을 등록하는 경우 템플릿 앱 URL을 가리키는 재전송 URI를 사용하여 유형을 브라우저로 설정합니다.
등록된 앱 ID를 인식하도록 Identity Manager로 작업합니다. 자세한 내용은 ArcGIS API for JavaScript에 포함되어 있는 OAuth Basic 및 OAuth Popup OAuth 샘플을 참고하세요.
구성 설정 앱으로 지정
사용자 정의 웹앱의 모양 및 동작을 사용자 정의할 수 있도록 하려면 구성 설정으로 지정하면 됩니다. 예를 들어 사용자가 앱 색상을 변경하거나 앱의 기타 설정을 사용자 정의하도록 허용할 수 있습니다.
구성 설정 앱으로 지정하려면 구성 파일을 만든 다음, 생성한 앱 템플릿 항목과 구성 파일 정보를 연결합니다.
구성 파일 생성
앱 구성 파일은 앱 템플릿의 구성 옵션을 정의하는 JSON 파일입니다. 구성 파일에 대한 예시를 참고하세요.
비고:
JSONLint와 같은 유효성 검사기를 통해 JSON을 실행하여 사용 중인 JSON 코드가 오류 없이 제대로 구성되었는지 확인하는 것이 좋습니다.
구성 파일을 생성하려면 다음을 수행합니다.
- 각 섹션에 대한 범주 및 필드 집합을 지정하여 하나 이상의 섹션을 생성합니다.
{ "configurationSettings": [ { "category": "", "fields": [] } ] } - 아래 표에 나와 있는 필드 유형을 사용하여 구성 옵션을 지정합니다. 구성 파일 생성 시 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 옵션은 기본값이며 한 줄 텍스트 상자입니다. 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"색상 선택기
팔레트에서 색상을 선택하거나 16진수 값, RGB 또는 색상, 채도, 명도(HSV) 값을 지정할 수 있는 색상 선택기를 표시합니다.
{ "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" }샘플 결과
selectionColor:"#829254"웹맵 대화 상자
앱에 나타낼 새 맵을 검색할 수 있는 대화 상자를 보여줍니다. 필요에 따라 맵을 테스트할 조건을 지정합니다. 지정한 조건을 충족하지 않으면 구성 패널에 유효성 검증 메시지가 나타나 맵이 요구 사항을 충족시키지 않음을 알려줍니다. 유효한 조건 문자열은 다음과 같습니다.
- time - 시계열 맵입니다.
- edit - 앱에 편집 가능한 레이어가 하나 이상 있습니다.
- featurelayer - 맵에 피처 레이어가 하나 이상 있습니다.
- filter - 맵에 대화형 필터가 정의되어 있습니다.
- 4x - 맵에 ArcGIS API for JavaScript 4x 버전에서 아직 지원되지 않는 콘텐츠가 포함되어 있습니다.
{ “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] }샘플 결과
webmap:"739ef0cf75de432995c77dd44ec8f652"웹 씬 대화 상자
앱에 나타낼 새 웹 씬을 검색할 수 있는 대화 상자를 보여줍니다.
{ "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" }]레이어 및 필드 선택기
나열된 유형 및 지오메트리에 의해 필터링된 레이어에 대한 드롭다운 목록을 맵에 나타냅니다. 필요에 따라, 사용자가 단일 레이어와 해당 필드를 선택할 수 있는 필드 선택기를 하나 이상 지정합니다.
비고:
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"] }] }라디오
한 번에 한 옵션만 선택할 수 있는 라디오 버튼을 생성합니다. 선택한 옵션은 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범위 맵
맵 중심 및 확대 수준 옵션을 사용하여 선택기를 생성합니다.
{ "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" }샘플 결과
mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }
구성 정보를 템플릿 항목과 연결
구성 파일을 생성한 후에는 JSON 구성 정보를 앱 템플릿과 연결하여 구성 설정 템플릿으로 지정해야 합니다.
- 앱 템플릿의 항목 페이지에서 설정 탭을 클릭하고 상단의 웹 매핑 응용프로그램 링크를 클릭합니다.
- 구성 매개변수 상자에서 구성 파일의 JSON 코드를 붙여넣습니다.
비고:
구성 매개변수 상자에는 유효한 JSON이 필요합니다. JSONLint와 같은 유효성 검사기를 통해 JSON을 실행하여 사용 중인 JSON이 오류가 없고 제대로 구성되었는지 확인하는 것이 좋습니다.
- 설정을 저장합니다.
구성 파일 예시
다음은 전체 구성 파일의 예시입니다.
{
"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 }
}
내 기관 갤러리의 템플릿 포함
내 기관의 Map Viewer 앱 갤러리 또는 그룹 앱 갤러리에 있는 템플릿을 사용하려면 해당 갤러리에 사용된 그룹 및 모든 사람과 항목을 공유합니다. 그런 다음 기관의 관리자는 사용자의 템플릿이 포함된 그룹을 사용하도록 맵을 구성하거나 그룹을 구성할 수 있습니다.