Criar Aplicações Geográficas para a Internet usando um Mac

Há cerca de um ano atrás publiquei aqui um post sobre a possibilidade de executar software ArcGIS num Mac.

Hoje partilho convosco como é simples a construção duma aplicação geográfica e sua publicação para a internet usando um Mac.

Nesta abordagem vou usar um Mapa previamente criado e partilhado no ArcGIS.com e depois construirei um pequeno visualizador em Javascript que consome esse Mapa. A ideia não é fazer toda a aplicação de raiz mas sim usar os templates disponíveis no ArcGIS.com. Todo o processo foi feito, em muito pouco tempo, usando um Mac e as seguintes ferramentas:

  • Edição do ficheiro HTML usando o SDK para developers da Apple (recorri a este software mas poderia ter sido usado um qualquer editor de texto);
  • Classic FTP for Mac para transferência dos ficheiros para o servidor;
  • Safari para testar a aplicação.
      Após ter criado a aplicação e transferido para o servidor testei também num

iPad

      para verificar a usabilidade! A aplicação final encontra-se em:

http://sandrobatista.com/demos/JavascriptMAC/

O procedimento foi:

ArcGIS.com Aceder ao ArcGIS.com (instruções)
Share a Map on ArcGIS.com Pesquisar pelo Serviço de Parques de Cidade e abri-lo no ArcGIS.com colocando o Serviço de Ortofotomapas como informação de contexto.
Share a Map on ArcGIS.com À esquerda encontra-se o resultado do Mapa Final (no próprio visualizador do ArcGIS.com).

Para poder partilhar este mapa basta guardá-lo com o botão Save e de seguida usar o botão Share.

Share a Map on ArcGIS.com Após partilharmos o Mapa é gerado um endereço reduzido http://bit.ly/atHccT que poderá ser enviado por mail, twitter ou facebook para quem desejarmos.Para além desta partilha é possível obter código html para embebermos em qualquer site ou, ainda, criar uma aplicação com base em templates.
Template ArcGIS.com Se escolhermos criar uma aplicação surge uma janela com diferentes templates já criados.Cada template possui a opção de preview e download. Deste modo é possível verificarmos como ficará o nosso Mapa na aplicação escolhida antes de fazermos qualquer download.
Template ArcGIS.com Se escolhermos fazer download do template surge uma janela explicativa do processo a seguir e uma informação bastante importante que é o identificador único do nosso Mapa.Neste caso o identificador do Mapa é: 0d83ab48e5394d9bb0dae9d092d0ab93
Template Javascript Esri O download consiste num ficheiro comprimido, com a extensão Zip e os seus conteúdos variam conforme o template escolhido. Neste caso os conteúdos são os da imagem à esquerda.
Edição de aplicação Javascript Esri Podemos agora customizar estes ficheiros. Neste caso, vou apenas alterar o ficheiro index.html. Este ficheiro poderá ser editado em qualquer editor de texto mas, para ser mais simples e produtivo, usei o editor existente no SDK da Apple.
Edição de aplicação Javascript Esri Alterei o identificador do mapa para o fornecido anteriormente 0d83ab48e5394d9bb0dae9d092d0ab93 e alterei também o título e subtítulo.
Edição de aplicação Javascript Esri Alterei Legend para Legenda.
Edição de aplicação Javascript Esri Alterei created by para Criado por e guardei as alterações ao ficheiro.
Aplicação Javascript no Safari Abri o ficheiro com o Safari para testar se estava tudo como eu pretendia.
Classic FTP Usando o software Classic FTP transferi os ficheiros para o servidor web.
Aplicação Javascript no Safari Por fim abri o ficheiro transferido no Safari. Tudo estava como pretendido e inicialmente previsto.

 

Resumindo:

  • Aceder a um Mapa online
  • Fazer download de um Template
  • Customizar o template
  • Publicar no Servidor

Depois destes passos é só mesmo partilhar o URL com quem quiserem. Neste caso o endereço final é: http://sandrobatista.com/demos/JavascriptMAC/

Tendo este endereço é possível aceder à aplicação em qualquer lugar, em qualquer browser e em qualquer máquina! Esta aplicação, visto ser em Javascript, pode ser consultada em diferentes dispositivos desde computadores desktop, portáteis, notebooks, telemóveis windows phone, telemóveis android, Tablets, iPhones, etc.

Aproveitei para ver no iPad e vejam o resultado:

iPad: SafariiPad: Aplicação Javascript

Download e Customização de Aplicações Web – Comparação de Serviços de Mapas: CAOP!

Para quem já utilizou o ArcGIS.com sabe que poderá construir os seus mapas e as suas aplicações online neste portal. Poderá então partilhá-las ou embebê-las nos seus próprios sites através de um simples copy-paste de código.

Há pouco tempo foi lançada uma novidade neste portal. A ideia é, para além de podermos usar as aplicações online, criar as nossas próprias aplicações com base em templates que poderemos fazer download e customizar.

Antes de usar os templates é necessário um pequeno registo, gratuito, no ArcGIS.com e a colocação (se assim o desejarmos) dos nossos dados ou de apontadores para os nossos serviços de mapas. Mais informações aqui.

 

imageUm exemplo, no link abaixo, usa três serviços de mapas criados a partir dos dados da CAOP (Carta Administrativa Oficial de Portugal) disponibilizados pelo IGP – Instituto Geográfico Português. Esta aplicação permite ao utilizador navegar por três mapas distintos e sincronizar quer a escala quer a legenda entre eles.

 

 

imageApós entrar no link abaixo selecione as opções de sincronização pretendidas no final da página ou com o botão direito sobre qualquer um dos mapas. Poderá também obter informação como a Descrição, Conteúdos e Legenda, ativando as respectivas caixas de escolha.

Poderá ainda inquirir o Mapa usando a típica ferramenta de identify que, neste caso, irá inquirir automaticamente os três mapas no mesmo local.

image

 

Aceda à aplicação aqui: http://www.sandrobatista.com/demos/CAOP/index.html

O que foi preciso para criar esta aplicação?

  1. Criar a conta no site da Esri
  2. Registar a conta no ArcGIS.com
  3. Fazer download dos dados da CAOP
  4. Disponibilizar os serviços via ArcGIS.com
  5. Partilhar os serviços e fazer download do código javascript do Template
  6. Customizar algumas parte do Template, especificamente o ID do nosso Mapa
  7. Publicar online e usar!
    Ideias para sites como estes?
    Montem os vossos próprios sites e partilhem-nos aqui!
Passo 5 – Partilhar serviços e download de Código
Passo 6 – Costumização do Template
Passo 7 – Publicar online e Usar!

Chega o Outono e traz novidades!

 

outonoA Esri lançou novas versões das API de ArcGIS Server nomeadamente ArcGIS API for Javascript 2.1, ArcGIS API for Flex 2.1 e um novo ArcGIS Viewer for Flex 2.1.

Deixo-vos aqui algumas das novidades e alguns exemplos!

 

 

 

 

 

———- ArcGIS API for Javascript 2.1 ———-

imageO que há de novo:

Links úteis:

———- ArcGIS API for Flex 2.1 ———-

O que há de novo:image

Links úteis:

———- ArcGIS Viewer for Flex 2.1 ———-

Flex ViewerO que há de novo:

  • Controlo de Navegação
  • Controlo com Coordenadas do rato
  • Controlo de Pesquisa de Moradas
  • Controlo de Desenho remodelado
  • Controlo de Edição
  • Novas customizações são possíveis para vários controlos
  • Suporte para Localização em diferentes idiomas
  • etc.

Links úteis:

ArcGIS: Visualização e Edição de dados OpenStreeMap

O Sistema ArcGIS suporta há algum tempo a opção de adicionar os dados OpenStreetMap como mapas de base aos nossos projectos. Neste link encontra-se uma aplicação desenvolvida usando a API de Javascript para ArcGIS Server onde são mostrados diferentes mapas de base, entre eles, os dados OpenStreetMap – Demo.

De modo aos utilizadores poderem contribuir de uma forma mais enriquecedora para o Projecto, também a edição local destes dados é uma possibilidade. Para tirarmos partido de todas as funcionalidades e robustez do ArcGIS Desktop para esta edição de dados, bastará instalar uma extensão gratuita fornecida pela ESRI – ArcGIS Editor for OpenStreetMap.

O colega Marten Hogeweg da ESRI Inc. fez um excelente post sobre este tópico.

Para além das possibilidades de download e upload dos dados, edição avançada, etc., toda esta ferramenta foi construída usando como base os novos Templates de Edição do ArcGIS. Estes novos Templates de Edição são uma nova abordagem a todo um novo paradigma de edição existente em todo o Sistema ArcGIS 10.

Exemplo de aplicação online baseada em Templates de Edição: Demo

Vídeo sobre Edição no ArcGIS 10:

Edição e Colaboração Online usando Javascript?

A nova versão, 2.0, da API de Javascript para ArcGIS Server já é oficial!

Existem inúmeras novidades neste nova API e podem ser consultadas no Resource Center criado para o efeito. Para aceder directamente basta consultar este link.

Entretanto, realço aqui a componente da Edição Online.

Qual seria a vossa opinião sobre uma API que, usando serviços de edição permitisse, com pouco esforço, desenvolver um site que oferecesse uma Edição baseada em Templates (regras e metodologias) e permitindo a Colaboração entre diferentes membros da vossa organização?

Isto já é possível! Aqui encontra-se um exemplo da disponibilização de um Mapa onde é possível actualizar informação Espacial e Não-Espacial sobre temas relacionados com Hidrologia.

image

Houve 3 simples passos que foram seguidos para criar esta aplicação:

1º – Criar o Mapa, associar serviços e adicionar componentes (barra de edição):

var settings = {
  map: map,
  templatePicker: templatePicker,
  geometryService: new esri.tasks.GeometryService("http://servicesbeta.esri.com/ArcGIS/rest/services/Geometry/GeometryServer"),
  layerInfos:layers,
  toolbarVisible: true,
  showAttributesOnClick: true,
  createOptions: {
    polylineDrawTools:[ esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYLINE],
    polygonDrawTools: [ esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON]
  },
  toolbarOptions: {
    reshapeVisible: true
  }
};
    

2º – Como queremos uma Edição baseada em Templates, há que instanciar o Template de Edição:

var templatePicker = new esri.dijit.editing.TemplatePicker({
    featureLayers: templateLayers,
    grouping: true,
    rows: 'auto',
    columns: 3
  },'divTemplateDijit');
templatePicker.startup();

3º – Fazer as respectivas associações:

var params = {settings: settings};
var myEditor = new esri.dijit.editing.Editor(params,'divFeatureServiceDijit');
myEditor.startup();

O código completo encontra-se mais abaixo neste post.

Para aceder a este e outros samples online basta consultar este link.

Continuar a ler

O poder do Javascript!

image

Para quem gosta de Javascript e aposta em tecnologia como HTML5, Canvas, SVG, etc., este site é um must-to-have nos favoritos.

Este site é um repositório de experiências criadas por diferentes utilizadores, desde designers a programadores, com o intuito de “making the web faster, more fun, and more open”.

 http://www.chromeexperiments.com/

Calendário para Web… um desafio…?

Durante este último mês apresentou-se perante mim a oportunidade de desenvolver um calendário para Web que tivesse um funcionamento mais parecido com células do nosso conhecido “Microsoft Excel”. À partida, tal parece problemático, a não ser que ponhamos a séria hipótese de usar o nosso maior aliado para este fim: Javascript.

O Javascript permite-nos basear a funcionalidade do calendário mais em Client-Side do que em Server-Side, facilitando-nos variadas tarefas como mudar de cores ou fazer display de mensagens no ecrã – isto sem termos de submeter os dados regularmente.

Resta dizer que, apesar de ser um desafio, é bastante exequível, desde que partamos do pressuposto que vamos usar mais Javascript do que é habitual em maior parte das Web applications.

Segue-se um exemplo bastante simples da utilização de Javascript para adicionar funcionalidade a um calendário:

Code Snippet
  1. <script type=“text/javascript” language=“javascript”>
  2.    var daysToShow;
  3.    
  4.     function jsChangeColor(textBoxObj, parentCellID, daysRemaining, totalDays, originalValue) {
  5.         var radioButton = document.getElementById(“<%=this.radioBtnControl.ClientID %>”);
  6.         
  7.         if (radioBtnControl.checked)
  8.         {
  9.             
  10.             if (daysToShow == undefined)
  11.             {
  12.                 daysToShow = daysRemaining;
  13.             }
  14.             textBoxObj = document.getElementById(textBoxObj);
  15.             var textBoxValue = parseInt(textBoxObj.value);
  16.             var DBValue = originalValue;
  17.             if (textBoxValue == 10)
  18.             {
  19.                 textBoxObj.value = 7;
  20.                 ColorCells(textBoxObj.value, parentCellID);
  21.                 document.getElementById(“<%=this.labelToShowValue.ClientID %>”).innerHTML = “( “ + daysToShow + “/” + totalDays + ” )”;
  22.                 FillHdnField(daysToShow);
  23.                 objInputBuffer = document.getElementById(“<%=this.textBoxToReceiveChangedValues.ClientID %>”);
  24.                 var mynewvalue = textBoxObj.id + “=” + textBoxObj.value + “/” + DBValue + “;”;
  25.                 objInputBuffer.value = objInputBuffer.value.replace(textBoxObj.id + “=” + textBoxValue + “/” + DBValue + “;”, “”);
  26.                 objInputBuffer.value = mynewvalue + objInputBuffer.value;
  27.             }
  28.        }
  29.        
  30.        function ColorCells(cellObjectValue, parentCellID)
  31.        {
  32.              document.getElementById(parentCellID).style.background = “”;
  33.     
  34.              switch (parseInt(cellObjectValue))
  35.              {
  36.                 
  37.                  case 1:
  38.                      GetColorString(“#3F8FFF”, parentCellID, true);
  39.                      break;
  40.                  case 2:
  41.                      GetColorString(“#FFF65E”, parentCellID, true);
  42.              }
  43.        }
  44.        
  45.        function GetColorString(colorString, parentCellID, isBackColor)
  46.         {
  47.             if(isBackColor)
  48.             {
  49.                 document.getElementById(parentCellID).style.backgroundColor = colorString;
  50.             }
  51.             else
  52.             {
  53.                 document.getElementById(parentCellID).style.background = colorString;
  54.             }
  55.         }
  56.         
  57.         function FillHdnField(finalValue)
  58.         {
  59.             document.getElementById(“<%= this.hiddenField.ClientID %>”).value = finalValue;
  60.         }
  61. </script>

A função jsChangeColor recebe vários parâmetros e caso o radioButton esteja checked, processa e passa a colorir uma célula do calendário.

Resumindo, resta mais uma vez sublinhar o quão importante é compreendermos que o Javascript, embora “assuste” alguns programadores, é um aliado imprescindível para este tipo de controlos.

Isto não significa que a utilização do controlo de calendário de ASP .NET não tenha a sua quota de dificuldade. É um controlo que tem algumas limitações quanto à extensão da sua funcionalidade de base, como podemos ver na situação engraçada que se segue:

Continuar a ler

ArcGIS API for JavaScript™ – um pequeno exemplo…

Deixo aqui um pequeno exemplo de um site criado recorrendo à ArcGIS API for JavaScript e contendo serviços de ArcGIS Server disponibilizados no ArcGIS Online.

Esta API permite criar aplicações rápidas e leves para a Internet com alguns conhecimentos básicos de programação. De modo a facilitar a sua concepção são disponibilizados diversos exemplos bem como o seu código fonte no site da ESRI.

Clique neste link ou na imagem abaixo para aceder à página de exemplo.

Sandro

ortofotomapas_igp_api_javascript