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.
Anotação:
ArcGIS Configurable Apps será descontinuado em 2025. Para saber mais sobre a descontinuidade do ArcGIS Configurable Apps e como migrar seus aplicativos configuráveis para ArcGIS Instant Apps, consulte o artigo do ArcGIS Blog Roteiro para Aposentadoria do ArcGIS Configurable Apps .
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ê deve 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.htmlCopie a parte webmap= da URL de Base Mapa da Europa:
https://www.arcgis.com/home/webmap/viewer.html?webmap=5421a40574914458892efe74f0149025E adicione na parte final da URL do Visualizador Básico:
https://www.arcgis.com/apps/View/index.html?webmap=5421a40574914458892efe74f0149025ArcGIS API for JavaScript tem um método auxiliaresri.urlToObject isso simplifica esse 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 deverá 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 ArcGIS API for JavaScript do esri.arcgis.utils.createMap 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 algum dos seus mapas da web incluir um mapa base Bing Maps, você deve especificar uma chave 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ê deve incluir uma chave Bing Maps no seu aplicativo. A chave do Bing Maps é fornecida como um parâmetro para o método createMap .
Suporte de Proxy e CORS
Devido ao fato do seu aplicativo fazer solicitações entre domínios para ArcGIS Online, você deve habilitar o 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:
É recomendado que você execute seu código JSON por meio de um validador como JSONLint para garantir que você tenha um JSON bem formado e sem erros.
Faça o seguinte para criar um arquivo de configuração:
- Crie uma ou mais seções especificando uma categoria e configure de campos de cada seção.
{ "configurationSettings": [ { "category": "", "fields": [] } ] } - 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 campo Descriçã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:falseNú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.5Data 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.000ZOpçõ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 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”: 12000ExtentMap
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.
- 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.
- 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. É recomendado que você execute seu JSON através de um validador como JSONLint para garantir que você tenha um JSON bem formado e sem erros.
- 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
Para 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.