Antes de utilizar o Navix deve-se certificar de atender suas dependências:
Segue abaixo um template HTML básico de uso do Navix
<!DOCTYPE html>
<html>
<head>
<title>Navix</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1,user-scalable=no">
<!--
Dependências CSS
-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<!--
Elemento aonde será colocado mapa
-->
<div id="map"></div>
<!--
Dependências javascript
-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="jquery.navix.js"></script>
<!--
Inicia o Navix no elemento com id igual map
-->
<script type="text/javascript">
$('#map').navix({
sistema: 43,
ambiente: NAVIX_CONFIG.ENV.HOM
});
</script>
</body>
</html>
| Nome | Tipo | Valor padrão | Descrição |
|---|---|---|---|
| *sistema | integer | 0 | ID do sistema do GEO utilizado para retornar as layers. Esse ID é dado para cada desenvolvedor de acordo com as informações que irá exibir em seu sistema. |
| *ambiente | integer | 0 | Valores de constantes referentes aos ambientes:
|
| infoWindow | boolean | true | Determina se será exibida uma janela popup ou não quando a ferramenta Identify estiver habilitada |
| where | object | vazio |
Condição padrão de busca. O objeto where deve ser no seguinte formato:
{
layer: {
id: @id,
service: @service
},
clause: @clause
}
Onde layer é um objeto contendo os campos id e service. @id é um número inteiro correspondente à layer a ser pesquisada e @service somente os valores 'Mapa' e 'MapaBase', que são os serviços onde será feita a pesquisa. Já @clause é uma string com uma cláusula where válida. Exemplo de cláusula válida: 'objectid = 100'Mais informações em Pesquisa |
| tools | array [string] | NAVIX_CONFIG.TOOLS |
Ferramentas do navix disponíveis no mapa. Mais informações em Ferramentas |
| basemap | string | NAVIX_CONFIG.BASEMAP.MAP |
Mapa base contendo layers comuns à todos os sistemas. Valores de constantes referentes aos basemaps:
|
| pesquisaInit | array [object] | vazio |
Categorias de pesquisa marcadas inicialmente Por padrão, nenhuma categoria é marcada para pesquisa, cabendo ao usuário determinar onde pesquisar. Porém, o desenvolvedor pode determinar se algumas categorias estrão habilitadas por padrão, bastando informar no seguinte formato:
{
id: @id,
service: @service
}
Onde @id é um número inteiro correspondente à layer a ser pesquisada e @service somente os valores 'Mapa' e 'MapaBase', que são os serviços onde será feita a pesquisa.
|
*Parâmetro obrigatório
A interface do Navix é divida nos seguintes itens:
Barra lateral do mapa. Inicialmente fica escondida e é acionada (abrir/fechar) através de um botão
Elemento aonde fica a parte visível do mapa.
Barra de botões localizada dentro do container, na parte superior direita
| Nome | Parâmetros | Descrição |
|---|---|---|
| navix.load | event, navix | Disparado quando a layer Dinamico é carregada |
| navix.mapload | event, navix | Disparado quando o esri.Map é carregado |
| navix.error | event, error | Disparado quando algum erro acontece |
| navix.featureadded | event, navix, graphic | Disparado quando uma feição é adicionada ao mapa |
| navix.graphicselect | event, navix, graphic | Disparado quando uma feição é selecionada no mapa |
| Nome | Parâmetros | Retorno | Descrição |
|---|---|---|---|
| navix.container() | jQuery | Retorna o elemento representando o container | |
| navix.sidebar() | jQuery | Retorna o elemento representando a sidebar | |
| navix.sidebar().addItem(icon, title, content) | void | Adiciona um novo item ao accordion da sidebar. | |
| navix.toolbar() | jQuery | Retorna o elemento representando o toolbar | |
| navix.progress() | jQuery | Retorna o elemento representando a barra de progresso | |
| navix.resize() | void | Ajusta o layout do mapa | |
| navix.baseUrl() | string | Retorna a URL base onde o Navix está hospedado | |
| navix.updateWhere(navix, where) |
|
void | Atualiza o filtro do mapa através de uma cláusula where válida. Mais informações em Pesquisa |
| navix.filterResults(navix, array, key, value) |
|
array[object] | Filtra um array obtido através de um Identify no mapa, para se obter determinada layer ou field. Mais informações em Identify |
O Navix é dividido em ferramentas que podem ser habilitadas ou desabilitadas em cada mapa.
A ferramenta é incluída automaticamente na página a partir do seu nome. Exemplo:
$('.selector').navix({ ... , tools: ['search', 'geolocation'] ... })
No caso acima serão incluídos apenas os scripts das ferramentas search e geolocation
A constante NAVIX_CONFIG.TOOLS contém as ferramentas padrão para o funcionamento mínimo do mapa. As ferramentas são: basemap, geolocation, help, identify, toc, print, results, ruler, scalebar, search. Para ferramentas adicionais, basta recuperar o valor da constante em um array e adicionar a este array as demais ferramentas, e por fim, adicionar o novo array a configuração do Navix. Ex.:
var tools = NAVIX_CONFIG.TOOLS;
tools.push('tool1','tool2');
$('.selector').navix({
...,
tools: tools
});
Adiciona ao mapa a capacidade de efetuar buscas nas camadas que podem ser consultadas.
Além do campo de busca localizado na parte superior esquerda do mapa, a ferramenta de Pesquisa também adiciona as camadas que podem ser buscadas na sidebar do mapa.
| Nome | Parâmetros | Descrição |
|---|---|---|
| navix.searchready | event, navix | Evento executado quando a ferramenta foi iniciada. É útil para atualização de cláusula where do mapa. |
| navix.searchstart | event, navix | Evento executado ao iniciar uma busca. |
| navix.searchresult | event, navix, featureSet | Evento executado a cada resultado encontrado. |
| navix.searchend | event, navix | Evento executado após término da busca. |
| navix.searcherror | event, exception | Evento executado após erro na busca. |
Para a atualização da cláusula where do mapa, é necessário que a ferramenta de busca esteja carregada. Para isso, basta adicionar um listener para o evento navix.searchready, e depois chamar a função navix.updateWhere(). Ex.:
var update;
$('.selector').navix({
...
})
.on('navix.searchready', function(evt, navix){
update = function(id, service, clause){
navix.updateWhere(navix, {
layer: {
id: id,
service: service
},
clause: clause
});
}
});
update(id, service, clause);
Exibe na sidebar do mapa informações sobre pontos e camadas. Além de comandos para exibir ou ocultar um item, e alterar a opacidade das camadas
Adiciona na sidebar do mapa ferramentas para efetuar medições no terreno, calculando distâncias e/ou áreas.
Exibe um botão para exportar o mapa em formato A3 e A4 em retrato e paisagem, para posteriormente ser impresso.
Exibe na parte inferior do mapa o indicador de escala.
Adiciona ao mapa a capacidade de identificar elementos no mapa a partir de um ponto.
Para iniciar a identificação de um ponto basta pressionar (click ou touch) uma feição.
| Nome | Parâmetros | Descrição |
|---|---|---|
| navix.identifystart | event, navix | |
| navix.identify | event, navix, resultado, taskResult | Evento executado após identificações de um ou mais pontos. |
| navix.identifyend | event, navix, listaResultados | Evento executado após identificações de todos os pontos, retornando um array com os resultados formatados da seguinte maneira:
[{
layerId:...,
layerName:...,
layerAlias:...,
campos: [...],
geometria: {...}
}]
|
Para filtrar valores da lista retornada no Identify, basta utilizar a função navix.filterResults(). Essa funcção possui um overload para se obter um item do array pelo seu índice, ou com o parâmetro opcional value obter um item do array com índice igual ao valor passado. Exemplo.:
$('selector').navix({
...
})
.on('navix.identifyend', function(evt, navix, resultados){
//Obtendo a layer de id 1. Como o retorno é um array, o primeiro item da lista está no index 0
var layer = navix.filterResults(navix, resultados, "layerId", 1)[0];
//Obtendo o campo objectid da layer recuperada acima
var objectid = navix.filterResults(navix, layer.campos, "objectid");
});
Adiciona um botão na toolbar que utiliza a API Geolocation do HTML5 para o usuário visualizar sua localização no mapa.
Para criar uma nova ferramenta é necessário criar um arquivo seguindo o padrão jquery.navix.[toolName].js no mesmo nível do arquivo jquery.navix.js, aonde [toolName] é o nome da nova ferramenta.
E depois para utilizá-la basta informar o nome da ferramenta nos parâmetros do navix. Exemplo: tools: [ '[toolName]', ... ]
As ferramentas seguem o padrão de desenvolvimento do RequireJS. Segue abaixo a estrutura básica para criar uma nova ferramenta:
define([],
function(){
return function(navix) {
...
}
}
);
Dentro do array da função define vão as dependências do código, principalmente se a nova ferramenta utilizar funcionalidades da API JavaScript da ESRI. Nos parâmetros da primeira function vão os alias das dependências carregadas. E dentro da segunda função, a lógica da ferramenta.