Criar modelos de aplicativo configuráveis

Se você tiver privilégios para criar conteúdo, você poderá criar um modelo de aplicativo personalizado hospedado em seu servidor da web. Após o modelo de aplicativo personalizado ser criado e configurado, torne seu aplicativo pesquisável no ArcGIS adicionando o modelo no ArcGIS Online. Você poderá, em seguida, tornar o aplicativo configurável para permitir a personalização de sua aparência e comportamento. Se a sua organização planeja apresentar seu modelo em uma de suas galerias, você poderá compartilhar o modelo com um grupo do modelo de aplicativo.

Criar e configurar um modelo de aplicativo da web

Para criar um modelo de aplicativo da web personalizado, você pode baixar e modificar um dos modelos do ArcGIS Configurable Apps existentes, atualizar um aplicativo da web existente para funcionar com conteúdo do ArcGIS Online, ou construir um novo aplicativo da web utilizando o código em um aplicativo iniciador que você possa baixar do GitHub.

Independente de como você cria seu aplicativo, você trabalhará com Parâmetros da URL e mapas. Você pode trabalhar com grupos se estiver criando um modelo de aplicativo baseado em grupo e pode considerar requisitos adicionais para trabalhar com mapas base do Bing Maps, acessar mapas não públicos e trabalhar com recursos que exigem um proxy ou Cross-Origin Resource Sharing (CORS).

Após você ter criado um modelo de aplicativo, hospede-o em seu servidor da web.

Parâmetros da URL

Ao utilizar um modelo, você especifica qual mapa ou grupo exibir, incluindo o ID de webmap ou group como um parâmetro de URL no modelo. Os IDs do mapa da web são especificados utilizando o parâmetro webmap e o conteúdo do grupo é especificado utilizando o parâmetro group. Para seu modelo personalizado trabalhar com o mapa ou grupo atual, você precisa incluir o código no aplicativo para extrair o ID do mapa da web ou grupo atual a partir da URL.

Por exemplo, você pode exibir o mapa de Mapa Base da Europa no modelo Visualizador Básico.

Para isto, comece pela URL do Visualizador Básico:

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

Copie a parte webmap= da URL de Base Mapa da Europa:

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

E adicione na parte final da URL do Visualizador Básico:

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

O ArcGIS API for JavaScript tem um método de ajuda esri.urlToObject que simplifica este processo. Este método converte os parâmetros da URL em objeto.

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

Após obter os parâmetros da URL como um objeto, você poderá acessar as várias entradas. Por exemplo, você pode atribuir o valor de parâmetro da URL do mapa da web para uma variável denominada webmap_id.

var webmap_id = urlObject.query.webmap;
Anotação:

Se o aplicativo for configurável, você também precisará manipular o parâmetro da URL denominado appid que define os parâmetros de configuração.

Mapas da web

Anotação:

Esta funcionalidade é suportada apenas no Map Viewer Classic.

Os modelos de aplicativo são projetados para funcionar com o mapa atualmente exibido no Map Viewer Classic. Os modelos normalmente ajudam a criar um mapa baseado no mapa da web especificado no parâmetro da URL do mapa da web. Cada API da web tem um método de ajuda que cria um mapa utilizando informações do ID de mapa da web. Para mais informações sobre utilizar APIs para trabalhar com mapas da web, consulte ArcGIS API for JavaScript.

Por exemplo, você pode utilizar o método esri.arcgis.utils.createMap do ArcGIS API for JavaScript para criar um mapa baseado no ID de entrada. Você também pode incluir uma função de retorno que executa quando o pedido síncrono para esri.arcgis.utils.createMap é finalizado.

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

Se alguns dos mapas da web incluir mapas base do Bing Maps, você precisará especificar a chave do Bing Maps ao utilizar o método createMap. Há várias outras opções de mapa que você pode especificar, como por exemplo, exibir o controle deslizante, navegação, atribuição, e mais.

Uma função callback fornece acesso a um objeto de resposta que fornece acesso ao objeto de mapa, camadas e muito mais. Para mais informações sobre as classes de Map, consulte ArcGIS API for JavaScript.

Grupo

Os modelos de grupo exibem o conteúdo do grupo especificado como um aplicativo.

O ArcGIS REST API fornece acesso ao conteúdo do ArcGIS Online. Você pode utilizá-lo para recuperar o conteúdo do grupo baseado no ID do grupo de entrada. Para mais informações sobre trabalhar com ArcGIS REST API, consulte Visão Geral do ArcGIS REST API .

Neste exemplo, você executará uma consulta para localizar um grupo com o 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];
     });
});

Após localizar o grupo, você pode consultá-lo para recuperar os itens a partir deste grupo.

Neste exemplo, você consulta o grupo para localizar cinco itens do tipo Web Map ou 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;
});

Considerações adicionais

Os aplicativos da web são normalmente projetados para funcionar com vários tipos de conteúdo, então talvez seja necessário instalar o modelo para manipular os mapas com mapas base do Bing Maps, conteúdo não-público, e assim por diante. As considerações específicas estão listadas abaixo.

Chave do Bing Maps

Se algum dos mapas que você deseja exibir utilizar um mapa base do Bing Maps, você precisará incluir a chave do Bing Maps no aplicativo. A chave do Bing Maps é fornecida como um parâmetro para o método createMap .

Suporte de Proxy e CORS

Já que seu aplicativo fará pedidos de domínio cruzado no ArcGIS Online você precisará ativar CORS ou adicionar um proxy ao seu aplicativo.

Adicionar seu modelo aoArcGIS Online

Após criar um modelo de aplicativo da web e hospedá-lo em seu servidor da web, torne seu aplicativo pesquisável no ArcGIS adicionando seu modelo no ArcGIS Online.

Adicionar o modelo como um item de aplicativo

Adicione o modelo no ArcGIS Online como um item de aplicativo da web e especifique a URL para o aplicativo. Para Propósito, escolha Configurável. Para API, escolha JavaScript.

Após adicionar o modelo, o item do modelo aparece em seu conteúdo e você poderá editar seus detalhes. Não deixe de incluir um título descritivo e resumo porque estas informações são exibidas quando os usuários visualizam este item na galeria de aplicativo configurável. Opcionalmente, você pode criar um arquivo .zip que contenha seus arquivos de aplicativo e anexá-lo ao item para fornecer recurso de download.

Registrar o modelo de aplicativo

Após adicionar o modelo de aplicativo como um item, você deverá registrar o aplicativo.Registrar seu aplicativo fornece a você um ID de aplicativo único. Utilize o ID do aplicativo no seu aplicativo para coletar as estatísticas de uso e permitir aos usuários entrar na plataforma com OAuth 2.0, uma estrutura de trabalho de autorização padronizada. O ID do aplicativo também permite que seu aplicativo trabalhe com conteúdo de usuário associado com a organização e trabalhe com outros recursos do ArcGIS Online tais como, geocodificação, rotas e GeoEnrichment.

Quando você registrar seu modelo de aplicativo da web, defina o tipo para Navegador com Redirecionar URI apontando para a URL do aplicativo modelo.

Se você estiver utilizando o modelo ApplicationBase, defina a propriedade configurável oauthappid no arquivo config/defaults.js.

//sample

 "oauthappid": “h4xZWhfz0an0TvqC"

Se você não estiver utilizando o modelo ApplicationBase, você deve trabalhar com o Gerenciador de Identidade de forma que ele reconheça o ID do aplicativo registrado. Para mais informações, consulte as amostras Fundamentos do OAuth e Pop-up do OAuth.

Tornar seu aplicativo configurável

Para permitir a personalização da aparência e do comportamento de seu aplicativo da web, você pode torná-lo configurável. Por exemplo, você pode permitir que os usuários alterem as cores do aplicativo ou personalize outras configurações do aplicativo.

Tornar seu aplicativo configurável envolve criar um arquivo de configuração e associar as informações do arquivo de configuração com o item de modelo do aplicativo que seu criou.

Criar um arquivo configurável

O arquivo de configuração do aplicativo é um arquivo JSON que define as opções de configuração do modelo de aplicativo. Por exemplo, o arquivo de configuração do aplicativo Visualizador Básico é configurationPanel.js e pode ser localizado na pasta de recursos da Esri no repositório do Visualizador Básico. Veja um exemplo completo de um arquivo de configuração.

Anotação:

É uma boa prática executar o código JSON por um validador como JSONLint para garantir que você tenha um JSON bem formado, livre de erros.

Faça o seguinte para criar um arquivo de configuração:

  1. Crie uma ou mais seções especificando uma categoria e configure de campos de cada seção.
    {
        "configurationSettings": [
            {
                "category": "",
                "fields": []
            }
        ]
    }
  2. Especifique as opções de configuração utilizando os tipos de campo listados na tabela abaixo. Ao criar o arquivo de configuração, assegure que a propriedade fieldName seja única dentro do parâmetro de configuração.

    Tipo de campoDescrição

    Parágrafo

    Exibe um texto explicativo na caixa de diálogo da configuração.

    {
           "type": "paragraph",
           "value": "* These menu items will appear in the application when the web map has layers that require them."
    }

    Texto

    Aceita a entrada de texto. Inclui a propriedade stringFieldOption que especifica o tipo da caixa de texto exibida na tela. Os valores são textbox, textarea, e richtext. A opção textbox é o padrão e é uma caixa de texto de única linha. A opção textarea exibe uma caixa de texto maior para inserir os dados. A opção richtext exibe um editor de texto eficiente que permite aos usuários aplicar algumas formatações, como configurar a fonte para texto em negrito ou itálico.

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

    Saída de amostra

    description:"Bike Accidents"

    Booleano

    Cria uma caixa de seleção para especificar os valores true ou false. Utilize condition para verificar se o mapa contém a funcionalidade especificada. Se o mapa não atender a condição, a caixa de seleção e rótulo não serão exibidos no painel de configuração.

    {
           "type": "boolean",
           "fieldName": "tool_bookmarks",
           "condition": "bookmark",
           "label": "Bookmarks",
           "tooltip": ""
     }

    Saída de amostra

    tool_bookmarks:false

    Número

    Cria um campo que aceita valores numéricos. Se o campo tiver que aceitar somente um intervalo de valores específico, você poderá utilizar a configuração constraints para restringir a entrada para um intervalo de valores em particular ou formatar os valores de entrada. Para informações sobre criar restrições com Dojo Number TextBox, consulte a documentação de Dojo.

    { 
         "type": "number",
         "fieldName": "range",
         "label": "Range:",
         "tooltip": "",
         "constraints" :{min:0,max:10,places:0}
    }

    Saída de amostra

    range:0.5

    Data e Hora

    Cria um seletor de datas com uma opção de datas.

    {
         "type":"date",
         "fieldName" : "startDate",
         "label" : "Start Date"
    }

    Cria um seletor de hora com uma opção de horas.

    {
         "type": "time",
         "fieldName": "startTime",
         "label": "Start Time"
    }

    Saída de amostra (no formato ISO-8601) para data e hora

    Start Date and Time: 1970-01-01T21:30:00.000Z

    Opções

    Cria uma lista suspensa com uma série de opções.

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

    Saída de amostra

    theme:"blue"

    Seletor de Cores

    Exibe um seletor de cores para escolher uma cor de uma paleta ou para especificar os valores de hex, rgb ou hsv. Também fornece um controle deslizante de transparência e uma opção sem cor.

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

    Saída de amostra

    selectionColor:"#829254"

    Diálogo Mapa da Web

    Exibe uma caixa de diálogo para procurar ou pesquisar um novo mapa para exibir em um aplicativo. Opcionalmente especifique uma condição para testar o mapa. Se a condição especificada não for atendida, uma mensagem de validação aparecerá no painel de configuração confirmando que o mapa não atende aos requisitos. As strings de condições válidas são:

    • time—O mapa está habilitado ao tempo
    • edit—O aplicativo tem pelo menos uma camada editável
    • featurelayer—O mapa tem pelo menos uma camada de feição
    • filter—O mapa tem um filtro interativo definido
    • 4x—O mapa tem conteúdo que não é ainda suportado na versão 4x do ArcGIS API for JavaScript
    {
       “type”: “webmap”,
       “conditions”: [“time”, “edit”, “featurelayer”, “filter”, “4x”]
     }

    Saída de amostra

    webmap:"739ef0cf75de432995c77dd44ec8f652"

    Diálogo Cena da Web

    Exibe uma caixa de diálogo para procurar ou pesquisar uma nova cena da web para exibir no aplicativo.

    {
       "type": "webscene"
     }

    Saída de amostra

    webscene:"ab41c86a588748128e6f5d80990a2395"

    Diálogo Grupo

    Exibe uma caixa de diálogo para procurar ou pesquisar um novo grupo para exibir em um aplicativo.

    {
       "type": "group"
    
     }

    Saída de amostra

    group:"449d00a4478d4849bbb65612355d6cd1"

    Múltiplas Camadas e Seletor de Campo

    Apresenta uma visão de árvore das camadas e campos no mapa que corresponde aos tipos de geometria e tipos suportados. Permite aos usuários finais do aplicativo selecionarem múltiplas camadas e múltiplos campos para cada camada.

    Anotação:

    Se editOnly estiver configurado para true, a lista de campos incluirá somente campos editáveis.

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

    Saída de amostra

    searchLayers: [{
        "id":"Whittier_Hazards_821",
        "fields":[],
        "type":"FeatureLayer"
    }]

    Seletor de Campo e Camada

    Exibe uma lista suspensa de camadas no mapa filtradas pelos tipos e geometrias listadas. Opcionalmente especifique um ou mais seletores de campo para permitir aos usuários selecionar uma camada e campos.

    Anotação:

    Se editOnly estiver configurado para true, a lista de campos incluirá somente campos editáveis.

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

    Saída de amostra

    tableLayer: {
        id: "2014CyclingAccidents_All_874",
        fields: [{
            id: "urlField",
            fields: ["Casualty_Severity"]   
        }]
    }

    Rádio

    Cria uma botão de opção onde somente uma opção pode ser selecionada de cada vez. A opção selecionada será configurada para verdadeira.

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

    Saída de amostra

    customLayout:"fullmap"

    Mapas Base

    Exibe uma lista suspensa de todos os mapas base nomeados da Esri.

    {
      “type”: “basemaps”,
       “fieldname” :”my_basemap”,
       “label”: “Alternate Basemap”
    }

    Saída de amostra

    my_basemap:"satellite"

    Condicional

    Exibe ou oculta conteúdo com base em uma condição verdadeira ou falsa. Por exemplo, se uma caixa de seleção Exibir lista de camadas estiver desmarcada, a lista de camadas e todas as opções relacionadas (por exemplo Incluir subcamadas na lista de camada) estarão 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"
                       }
                   ]
                }
    }

    Pesquisar

    Configure um painel de pesquisa para localizar feições dentro de um campo de uma camada de feição ou endereços utilizando um localizador. Se você configurar uma pesquisa de feição, os usuários podem escolher a camada de feição e campos de pesquisa.

       {
    “type”: “Search”,
      “fieldName”: “searchConfig”,
    “label”: “Configure Search Options”
    }

    Saída de amostra

    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

    Exibe uma lista de níveis de escala pré-definidos que uma usuário pode escolher. Por exemplo, Países, Estados, Estado, Municípios, Metro, Cidade, Vizinhança.

    {
        “type”: “scaleList”,
        “fieldName”: “customUrlLayerZoomScale”,
        “label”: “Choose zoom level”
    }

    Saída de amostra

    “customUrlLayerZoomScale”: 12000

    ExtentMap

    Cria um seletor com opções de centralizar mapa e nível de zoom.

    {
       "type":"extentMap",
       "label": "Select center and zoom",
       "fieldName": "mapExtent"
    }

    Saída de amostra

    mapExtent: {
      level: 2,
      coords: {
         latitude: 51.304,
         longitude: -98.7231
         }
    }

Associe as informações de configuração com o item do modelo

Após criar o arquivo de configuração, você deverá associar as informações de configuração de JSON com o modelo de aplicativo para torná-lo configurável.

  1. Na página de item do modelo de aplicativo, clique na guia Configurações e clique no link Aplicativo de Mapeamento da Web na parte superior.
  2. Na caixa Parâmetros de Configuração , cole o código JSON de seu arquivo de configuração.
    Anotação:

    A caixa Parâmetros de Configuração exige um JSON válido. É uma boa prática executar o JSON por um validador como JSONLint para garantir que você tenha um JSON bem formado, livre de erros.

  3. Salve suas configurações.

Exemplo de arquivo de configuração

O seguinte é um exemplo de um arquivo de configuração 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
    }
}

Apresente seu modelo na galeria da sua organização

Se você desejar utilizar seu modelo em sua galeria de aplicativo ou galeria de aplicativo de grupo do Configurable Apps da sua organização, compartilhe o item com todos e com o grupo utilizado para esta galeria. Então o administrador de sua organização pode configurar o mapa ou configurar grupos para utilizar o grupo que inclui seu modelo.