Mapas Web

Las plantillas de aplicación se han diseñado para trabajar con el mapa web visualizado en Map Viewer Classic. Normalmente, las plantillas crean un mapa basado en el mapa Web especificado en el parámetro webmap de la dirección URL. Cada API web dispone de un método de ayuda que crea un mapa utilizando información del Id. del mapa web.

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

Grupo

Las plantillas de grupo muestran contenido del grupo especificado en una aplicación.

API REST de ArcGIS proporciona acceso al contenido de su portal. Se puede usar para recuperar contenido de un grupo a partir del ID de grupo introducido.

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];
     });
});

Una vez encontrado el grupo, se pueden realizar consultas para recuperar elementos del grupo.

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

Consideraciones adicionales

Por lo general, las aplicaciones web están diseñadas para trabajar con muchos tipos de contenido, por lo que es posible que sea necesario configurar la plantilla para gestionar mapas con mapas base de Bing Maps, contenido que no sea público, etc. A continuación se indican las consideraciones específicas.

Agregar la plantilla como elemento de aplicación

Agregue la plantilla a su portal como elemento de aplicación web y especifique la URL de la aplicación. En Propósito, elija Configurable. En API, elija JavaScript.

Después de agregar la plantilla, el elemento de plantilla aparece en su contenido y puede editar sus detalles. No olvide incluir un título descriptivo y un resumen, ya que esta información se muestra cuando los usuarios visualizan este elemento en la galería de aplicaciones configurables.

Registrar la plantilla de la aplicación

Después de agregar la plantilla de aplicación como un elemento, debe registrar la aplicación. Puede registrar las aplicaciones basadas en OAuth 2.0 que desarrolle. Registrar la aplicación con el portal le proporciona un Id. de aplicación. El Id. de aplicación es la base para distribuir aplicaciones y obtener informes de uso.

Cuando registre su plantilla de aplicación web, defina el tipo como Navegador con URI de redirección apuntando a la URL de la aplicación de plantilla.

Trabaje con el Administrador de identidades para que reconozca el Id. de la aplicación registrada. Para obtener más información, consulte las muestras OAuth Basic y OAuth Popup incluidos con ArcGIS API for JavaScript.

Crear un archivo de configuración

El archivo de configuración de la aplicación es un archivo JSON que define las opciones de configuración de la plantilla de aplicación. Vea un ejemplo completo de un archivo de configuración.

Siga los siguientes pasos para crear un archivo de configuración:

1. Cree una o más secciones especificando una categoría y un conjunto de campos para cada sección.

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

2. Especifique las opciones de configuración utilizando los tipos de campo que se muestran en la tabla siguiente. Al crear el archivo de configuración, asegúrese de que la propiedad fieldName sea única dentro del ajuste de la configuración.

   Tipo de campo	Descripción
   Párrafo	Muestra texto explicativo en el cuadro de diálogo de configuración. { "type": "paragraph", "value": "* These menu items will appear in the application when the web map has layers that require them." }
   Cadena de caracteres	Acepta entrada de texto. Incluye la propiedad stringFieldOption, que especifica el tipo de cuadro de texto que se muestra en la pantalla. Los valores son textbox, textarea y richtext. La opción textbox es la predeterminada y consiste en un cuadro de texto con una sola línea. La opción textarea muestra un campo de texto más grande para introducir datos. La opción richtext muestra un editor de texto enriquecido que permite a los usuarios aplicar algunos formatos como, por ejemplo, establecer la fuente o aplicar negrita o cursiva al texto. { "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" } Salida de muestra description:"Bike Accidents"
   Booleano	Cree un cuadro de texto para especificar valores true o false. Use condition para ver si el mapa contiene la funcionalidad esperada. Si el mapa no cumple la condición, el panel de configuración no muestra la casilla de verificación ni la etiqueta. { "type": "boolean", "fieldName": "tool_bookmarks", "condition": "bookmark", "label": "Bookmarks", "tooltip": "" } Salida de muestra tool_bookmarks:false
   Número	Cree un campo que acepta valores numéricos. Si el campo debe aceptar únicamente un rango de valores específico, puede utilizar el ajuste de constraints para delimitar el rango de valores específicos que se puede introducir o para dar formato a los valores introducidos. { "type": "number", "fieldName": "range", "label": "Range:", "tooltip": "", "constraints" :{min:0,max:10,places:0} } Salida de muestra range:0.5
   Fecha y hora	Crea un selector de fecha con una selección de fechas. { "type":"date", "fieldName" : "startDate", "label" : "Start Date" } Crea un selector de hora con una selección de horas. { "type": "time", "fieldName": "startTime", "label": "Start Time" } Ejemplo de salida (en formato ISO-8601) de fecha y hora Start Date and Time: 1970-01-01T21:30:00.000Z
   Opciones	Cree una lista desplegable con una serie de opciones. { "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" }] } Salida de muestra theme:"blue"
   Selector de color	Muestra un selector de color para elegir un color de una paleta o especificar valores hexadecimales, RGB o HSV. { "type": "color", "label": "Choose a selection color", "fieldName": "selectionColor" } Salida de muestra selectionColor:"#829254"
   Diálogo de mapa web	Muestra un cuadro de diálogo para examinar o buscar un nuevo mapa para mostrarlo en la aplicación. Opcionalmente, especifique una condición para probar el mapa. Si esta condición no se cumple, el panel de configuración presenta un mensaje de validación que confirma que el mapa no cumple los requisitos. Las cadenas de condiciones son las siguientes: time: el mapa tiene la función de tiempo habilitada edit: la aplicación tiene al menos una capa editable featurelayer: el mapa tiene al menos una capa de entidades filter: el mapa tiene definido un filtro interactivo 4x: el mapa contiene contenido que no se admite aún en la versión 4x de ArcGIS API for JavaScript { “type”: “webmap”, “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”] } Salida de muestra webmap:"739ef0cf75de432995c77dd44ec8f652"
   Cuadro de diálogo de Escena web	Muestra un cuadro de diálogo para examinar o buscar una nueva escena web para mostrarla en la aplicación. { "type": "webscene" } Salida de muestra webscene:"ab41c86a588748128e6f5d80990a2395"
   Cuadro de diálogo de Grupo	Muestra un cuadro de diálogo para examinar o buscar un nuevo grupo para mostrarlo en la aplicación. { "type": "group" } Salida de muestra group:"449d00a4478d4849bbb65612355d6cd1"
   Selector de varias capas y campos	Presenta una vista de árbol de las capas y campos del mapa que coinciden con los tipos admitidos y con los tipos de geometría. Permite a los usuarios finales de la aplicación seleccionar varias capas y varios campos en cada capa. Nota: Si editOnly tiene el valor true, la lista de campos solo incluirá campos editables. { "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" ] } } Salida de muestra searchLayers: [{ "id":"Whittier_Hazards_821", "fields":[], "type":"FeatureLayer" }]
   Selector de capas y campos	Muestra una lista desplegable de capas en el mapa filtrado por los tipos y geometrías enumerados. Opcionalmente, sirve para especificar uno o más selectores de campo para que los usuarios puedan seleccionar una capa y campos. Nota: Si editOnly tiene el valor true, la lista de campos solo incluirá campos editables. { "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" ] } } Salida de muestra tableLayer: { id: "2014CyclingAccidents_All_874", fields: [{ id: "urlField", fields: ["Casualty_Severity"] }] }
   Radio	Permite crear un botón de opción con el que solo se puede seleccionar una opción cada vez. La opción seleccionada se establecerá en verdadera. { "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 }] } Salida de muestra customLayout:"fullmap"
   Mapas base	Muestra una lista desplegable de todos los mapas base de Esri con nombre. { “type”: “basemaps”, “fieldname” :”my_basemap”, “label”: “Alternate Basemap” } Salida de muestra my_basemap:"satellite"
   Condicional	Muestra u oculta contenido basándose en una condición con valor true o false. Por ejemplo, si una casilla de verificación Mostrar lista de capas está desactivada, la lista de capas y todas las opciones relacionadas (por ejemplo Incluir subcapas en la lista de capas) están ocultas. { "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" } ] } }
   Buscar	Configura un panel de búsqueda para buscar entidades dentro de un campo de una capa de entidades o de direcciones utilizando un localizador. Si configura una búsqueda de entidades, los usuarios pueden elegir los campos de capa de entidades y búsqueda. { “type”: “Search”, “fieldName”: “searchConfig”, “label”: “Configure Search Options” } Salida de muestra 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 }
   ScaleList	Muestra una lista de niveles de escala predefinidos entre los cuales se puede elegir. Por ejemplo, Países, Estados, Estado, Provincias, Provincia, Área metropolitana, Ciudad, Población, Vecindad. { “type”: “scaleList”, “fieldName”: “customUrlLayerZoomScale”, “label”: “Choose zoom level” } Salida de muestra “customUrlLayerZoomScale”: 12000
   ExtentMap	Crea un selector con opciones de centro de mapa y nivel de zoom. { "type":"extentMap", "label": "Select center and zoom", "fieldName": "mapExtent" } Salida de muestra mapExtent: { level: 2, coords: { latitude: 51.304, longitude: -98.7231 } }

Asociar la información de configuración con el elemento de la plantilla

Después de crear el archivo de configuración, debe asociar la información de configuración de JSON con la plantilla de aplicación para que sea configurable.

1. En la página del elemento de la plantilla de aplicación, haga clic en la pestaña Configuración y haga clic en el vínculo Aplicación de representación cartográfica en la red en la parte superior.
2. En la casilla Parámetros de configuración, pegue el código JSON de su archivo de configuración.

   Nota:

   La casilla Parámetros de configuración necesita un formato JSON válido. Es una buena práctica ejecutar el JSON mediante un validador como JSONLint a fin de garantizar que el JSON tenga un formato correcto y esté libre de errores.

3. Guardar sus ajustes.

Archivo de configuración de ejemplo

A continuación se muestra un ejemplo de un archivo de configuración completo.

{
    "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
    }
}