Skip To Content

Crear plantillas de aplicaciones configurables

Si dispone de privilegios para crear contenido, puede crear su propia plantilla de aplicación personalizada alojada en su servidor web. Cuando haya creado y configurado la plantilla de aplicación personalizada, haga que su aplicación se pueda descubrir en ArcGIS agregando su plantilla a ArcGIS Online. Después, tendrá la opción de hacer la aplicación configurable para que los usuarios puedan personalizar su apariencia y comportamiento. Si su organización tiene previsto presentar su plantilla en una de sus galerías, puede compartir la plantilla con un grupo de plantillas de aplicación.

Crear y configurar una plantilla de aplicación web

Para crear su plantilla de aplicación web, puede descargar y modificar una de las plantillas de aplicaciones configurables de las que dispone, actualizar una aplicación web existente para que funcione con contenido de ArcGIS Online o crear una aplicación web nueva con el código de una aplicación de partida que descargue de GitHub.

Independientemente de cómo cree su aplicación, deberá trabajar con parámetros de dirección URL y mapas. Si va a crear una plantilla de aplicación basada en grupos, puede trabajar con grupos y tener en cuenta otros requisitos adicionales para trabajar con mapas base de Bing Maps, acceder a mapas que no sean públicos y trabajar con recursos que requieran un proxy o el uso compartido de recursos de distinto origen (CORS).

Después de crear su plantilla de aplicación, alójela en su servidor web.

Parámetros de la dirección URL

Al utilizar una plantilla, se especifica el grupo o mapa que se debe visualizar incluyendo el Id. de webmap o group como parámetro de URL en la plantilla. Los ID de los mapas web se especifican utilizando el parámetro webmap y el contenido del grupo se especifica utilizando el parámetro group. Para que la plantilla personalizada funcione con el mapa o el grupo actual, tiene que incluir código en la aplicación para extraer el Id. del mapa web o el grupo actual de la dirección URL.

Por ejemplo, se puede mostrar el mapa base de Europa en la plantilla del visor básico.

Para hacer esto, empiece por la dirección URL del visor básico:

https://www.arcgis.com/apps/View/index.html

Copie la parte webmap= de la dirección URL del mapa base de Europa:

https://www.arcgis.com/home/webmap/viewer.html?webmap=5421a40574914458892efe74f0149025

Y agréguela al final de la dirección URL del visor básico:

https://www.arcgis.com/apps/View/index.html?webmap=5421a40574914458892efe74f0149025

La API de JavaScript de ArcGIS tiene un método de ayuda esri.urlToObject que simplifica este proceso. Este método convierte los parámetros de la dirección URL en un objeto.

var webmap;
var urlObject = esri.urlToObject(document.location.href);

Una vez que los parámetros de la dirección URL se convierten en un objeto, puede acceder a las distintas entradas. Por ejemplo, podría asignar el valor del parámetro webmap de la dirección URL a una variable llamada webmap_id.

var webmap_id = urlObject.query.webmap;
Nota:

Si la aplicación es configurable, también debe gestionar un parámetro de URL denominado appid, que define los ajustes de configuración.

Mapas web

Las plantillas de aplicación se han diseñado para trabajar con el mapa web visualizado en Map Viewer. 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. Para obtener más información sobre cómo utilizar las API para trabajar con mapas web, consulte ArcGIS API for JavaScript.

Por ejemplo, para crear un mapa basado en el Id. introducido, se puede usar el método esri.arcgis.utils.createMap de ArcGIS API for JavaScript. También puede incluir una función de devolución de llamada que se ejecute cuando la solicitud sincrónica a esri.arcgis.utils.createMap se haya completado.

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

Si alguno de los mapas web incluye un mapa base de Bing Maps, es necesario especificar una clave de Bing Maps al utilizar el método createMap. Hay varias opciones de mapas más que puede especificar, por ejemplo si se debe visualizar el deslizador, la navegación y la atribución, entre otras.

La función de callback proporciona acceso a un objeto de respuesta que, a su vez, permite acceder al objeto del mapa y a sus capas, entre otros elementos. Para obtener más información sobre la clase de Map, consulte ArcGIS API for JavaScript

Grupo

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

ArcGIS REST API proporciona acceso al contenido de ArcGIS Online. Se puede usar para recuperar contenido de un grupo a partir del ID de grupo introducido. Para obtener más información sobre cómo trabajar con ArcGIS REST API, consulte Descripción general de ArcGIS REST API.

En este ejemplo, se realiza una consulta para buscar un grupo con el Id. de entrada.

var portal = new esri.arcgis.Portal('https://www.arcgis.com');
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.

En este ejemplo, se realiza una consulta al grupo para encontrar cinco elementos de tipo Web Map o Web Mapping Application.

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.

Clave de Bing Maps

Si cualquiera de los mapas que se desea mostrar utiliza un mapa base de Bing Maps, se deberá incluir una clave de Bing Maps en la aplicación. La clave de Bing Maps se proporciona como un parámetro del método createMap.

Soporte para proxy y CORS

Puesto que la aplicación realizará solicitudes entre dominios distintos a ArcGIS Online, se deberá habilitar CORS o agregar un proxy a la aplicación.

Agregar su plantilla a ArcGIS Online

Después de crear su plantilla de aplicación web y alojarla en su servidor web, haga que se pueda descubrir en ArcGIS agregando su plantilla a ArcGIS Online.

Agregar la plantilla como elemento de aplicación

Agregue su plantilla a ArcGIS Online como elemento de aplicación web y especifique la dirección 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. Opcionalmente, se puede crear un archivo .zip que contenga los archivos de aplicación y adjuntarlo al elemento para permitir la descarga.

Registrar la plantilla de la aplicación

Después de agregar su plantilla de aplicación como un elemento, debe registrar la aplicación. Cuando registre la aplicación obtendrá un Id. de aplicación único. Use el Id. de aplicación para recopilar estadísticas de uso y permitir que los usuarios inicien sesión en la plataforma con OAuth 2.0, un marco de autorización estandarizado. Asimismo, el Id. de aplicación permite que su aplicación trabaje con contenido del usuario asociado a su organización, así como trabajar con otras capacidades de ArcGIS Online como, por ejemplo, geocodificación, generación de rutas y geoenriquecimiento.

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.

Si utiliza la plantilla ApplicationBase, establezca la propiedad configurable oauthappid en el archivo config/defaults.js.

//sample
 "oauthappid": “h4xZWhfz0an0TvqC"

Si no utiliza la plantilla ApplicationBase, debe trabajar con el Administrador de identidades para que reconozca el Id. de la aplicación registrada. Para obtener más información, consulte los ejemplos OAuth Basic y OAuth Popup.

Hacer que su aplicación sea configurable

Para permitir a los usuarios personalizar la apariencia y el comportamiento de su aplicación web personalizada, puede hacerla configurable. Por ejemplo, puede permitir que los usuarios cambien los colores de la aplicación o personalicen otros ajustes.

Hacer que su aplicación sea configurable supone crear un archivo de configuración y asociar la información del archivo de configuración con el elemento de la plantilla de aplicación que ha creado.

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. Por ejemplo, el archivo de configuración de la aplicación Visor básico es configurationPanel.js y se encuentra en la carpeta de recursos del repositorio de Visor básico de Esri. Vea un ejemplo completo de un archivo de configuración.

Nota:

Es una buena práctica ejecutar el código JSON mediante un validador como JSONLint a fin de garantizar que el JSON tenga un formato correcto y esté libre de errores.

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 campoDescripció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

    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 predeterminad 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

    Number

    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. Para obtener más información sobre cómo crear restricciones con Dojo Number TextBox, consulte la Documentación de Dojo.

    {      "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. También proporciona un control deslizante de transparencia y una opción sin color.

    {
       "type": "color",    "label": "Choose a selection color",
       "fieldName": "selectionColor",   "transparency" : true,   "noColor" : true
     }

    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 evaluar 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 verdadero o falso. 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 se configura una búsqueda de entidades, los usuarios pueden elegir la capa de entidades y buscar campos.

    {
    “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 su plantilla de aplicación para que sea configurable.

  1. En la página del elemento de su 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    }
}

Presentar su plantilla en la galería de su organización

Si desea utilizar su plantilla en la galería de aplicaciones de Map Viewer de su organización o en la galería de aplicaciones de grupos, comparta el elemento con todos y con el grupo que se esté utilizando para dicha galería. A continuación, el administrador de la organización puede configurar el mapa o configurar grupos para usar el grupo que incluya la plantilla.