Experiencias exitosas en Geomtica

Prcticas -Tendencias actuales en WebGIS y Cloud

GIS
Sergio Andres Escobar.

Prctica No 1: Unidad 1 y Unidad 2

Crear aplicaciones bsicas usando el API de JS para Google y para ArcGIS.

Requisitos

1. Conexin a internet.
2. Notepad++ para el desarrollo.
3. Acceso al Drive, directorio de Recursos.
4. Firefox, con el complemento de Firebug instalado. (Opcional, es posible usasr el modo
desarrollador de Google Chrome)

API JS para Google

1. Ingrese a https://developers.google.com/?hl=es
2. Inicie sesin con su cuenta de Google., de no tenerla por favor cree una nueva.
3. Seleccione Google Maps (Maps Javascript API).
4. Luego Seleccione Web y luego seleccione API de JavaScript de Google Maps.
5. En esta pgina encontrara todo lo relacionado con el API de JavaScript para Google
Maps, tmese un tiempo para explorar todos los recursos, no tema implementar
cualquier ejemplo que vea interesante.
6. Vaya a Muestras, en esta seccin encontrara los ejemplos de implementacin para
familiarizarse con el API.
Figura que resumen los puntos 1 al 6
 Figura que resumen el punto 6

7. Implemente el ejemplo de Mapa simple que se encuentra en el siguiente enlace.

https://developers.google.com/maps/documentation/javascript/examples/map-
simple?hl=es
a. Para ello cree un archivo de texto y copie el cdigo que se encuentra en el
enlace.
b. Modifique el cdigo para que no se muestre la ciudad de Wollongon, si no la
ciudad de Cali en Colombia, cambie la extensin del archivo de texto a html, y
nmbrelo, MapaSimple.html.
 Figura que resumen el punto 7

8. Implemente el ejemplo de Controles personalizados que se encuentra en el siguiente

enlace, de la misma forma que en el paso 8.
https://developers.google.com/maps/documentation/javascript/examples/control-
custom?hl=es
9. Modifique el cdigo para que:
a. El botn de Center Map, y si ToolTip se encuentren en espaol.
b. No ubique la ciudad de Chicago USA, Si no la ciudad de Medelln.
c. Llame el HTML, BotonInicio.html

Figura que resumen los puntos 8 al 9

10. Implemente el siguiente ejemplo, pero regionalcelo para la Ciudad de
Bogot.https://developers.google.com/maps/documentation/javascript/example
s/map- coordinates?hl=es
a. Nombre el HTML Coordenadas.html

Figura que resumen el punto 10

11. Implemente en su equipo el siguiente ejemplo
https://developers.google.com/maps/documentation/javascript/examples/layer
- fusiontables-simple?hl=es
Este ejemplo usa Fusion Tables
(https://support.google.com/fusiontables/answer/2571232) para representar
unos elementos puntuales acerca de avalos en la ciudad de Bogot.
12. Cree su propia Fusion Table en Google, usando la tabla de avalos que se encuentra
en el directorio de recursos del Drive del curso y luego sela para implementarla en
el mapa del paso anterior paso 6., y llmelo Fusiontable.html

13. Para su ayuda no olvide consultar estos recursos

a. https://developers.google.com/maps/documentation/javascript/reference?hl
=es
b. https://developers.google.com/maps/documentation/javascript/fusiontable
sl ayer?hl=es
14. Guarde todos los HTML creados, le sern de utilidad para el Taller No.1.

Figura que resumen los puntos 11 al 12

Figura que resumen los puntos 12 al 14
 15. Para conocer las principales ventajas de estos elementos que se encuentran en
Beta, por favor realizar los Basic Tutorials del Google, en el siguiente enlace.
https://support.google.com/fusiontables/answer/184641

Parte 1 del tutorial crear un mapa.

Parte 2 del tutorial Crear: un informe de tarjeta de visita

Parte 3 del tutorial Crear: Personalizar y filtrar

Parte 4 del tutorial Crear: Compartir y publicar

16. https://support.google.com/fusiontables/answer/184641
API JS para ArcGIS

1. Ingrese a https://developers.arcgis.com
2. Cree una cuenta de desarrolladores, le permitir tener si propio portal Geogrfico (Si
ya hizo la practica No 1 y el Taller No 1 este paso no ser necesario).
a. Seleccione Sign up for Free
b. Cree la cuenta de desarrollo en el portal, Asegrese de recordar los datos
que ingresa Username y Pass.
c. Luego, ingrese de nuevo https://developers.arcgis.com/
3. Inicie sesin, con los datos que ingreso.

Figura que resumen los puntos 1 al 3

4. Descargue el plugin para MS Office de ArcGIS, Esri Maps for Office (valido para MS
Office 2010 o superior) (Si no puede hacerlo en los equipos de la universidad, sugiero lo
realice en su equipo personal y recuerde que debe tener Office de MS Instalado)
http://www.esri.com/software/arcgis/arcgisonline/apps/download
 5. Regrese al navegador, a la pgina https://developers.arcgis.com/, ac puede crear datos
y servicios de edicin, mapas web y aplicaciones y le permite tener una organizacin
ficticia con un solo usuario con el cual puede crear grupos, galeras, y compartir su
contenido a otros usuarios, el usuario que uso en la pgina web, le sirve para la pgina
www.arcgis.com y el plugin de Office que ya instalo. Recuerde usted ha creado un portal
geogrfico que le permite acceder a todos los portales de la tecnologa Esri.
6. Ahora vaya a la pgina https://developers.arcgis.com/en/javascript/
Tmese un tiempo para explorar todos los recursos, no tema implementar cualquier
ejemplo que vea interesante.
7. Cree una carpeta llamada JSArcGIS en el directorio de su WebServer (ISS o Apache) (Si no
sabe como instalar el WebServer, hay una gua de instalacin para el WebServer IIS en el
directorio de recursos ).
a. Si es IIS, es: (C:\inetpub\wwwroot)
b. Si es Apache, es: (C:\Program Files\Apache Software Foundation\ htdocs\)

Cree todos los ejemplos a continuacin dentro de este folder y para revisar su
ejecucin, recuerde ingresar en el navegador
http://localhost/JSArcGIS/nombre_del_ejemplo.html (En el algunas ocasiones es
http://localhost:80 o http://localhost:82 , depende del puerto que se haya
seleccionado en la configuracin del Webserver.)

Figura que resumen los puntos 5 al 7

8. Luego vaya a Samples, y busque el ejemplo Get started with MapView - Create a 2D map,
en la seccin de la Izquierda en el grupo Mapping and Views.
9. Implemente dicho ejemplo de la misma forma que lo hizo con los ejemplos de Google,
usando documentos HTML., a este llmelo SimpleMapa.html, cambie el centro del mapa
a la ciudad de Cartagena, y el ttulo de la aplicacin.

o Para visualizar el cdigo, hacer pruebas y aprender el API, esta plataforma tiene
varias opciones, puede usar Sanbox una herramienta que le permite ver el cdigo
a la Izquierda y en la derecha puede ver su ejecucin, tambin tiene la opcin
JSBin una herramienta similar que le permite registrarse y configurar sus
ejemplos, tanto en Sanbox como en JsBin puede ver el cdigo por HTML; JS,
CSS, o combinado(Puede usar el Sandbox para realizar cambios Online a la
aplicacin). Tambin tiene la opcin de ver los ejemplos en vivo.
o Recuerde que con ArcGIS, usted necesita especificar primero la Longitud y luego
la Latitud.
center: [-122.45,37.75], // long, lat
 Figura que resumen los puntos 8 al 9

10. Ahora implemente el ejemplo Get started with SceneView - Create a 3D map. Llmelo
Simple3DMap.html.
 Figura que resumen el punto 10

11. Ahora Implemente el ejemplo que se denomina LoadWebMap, cree un HTML llamado
WebMap.html., cambie el webmap referenciado por un webmap creado en su portal
geogrfico, valide que las ventanas emergentes (PopUp) y dems acciones del Webamap
ahora se ejecutan en su ejemplo. (Recuerde el uso de los archivos CSS, para la
configuracin grfica, para ello recuerde usar el Firebug para consultar que CSS se est
usando para cada elemento de la pgina, esto le permitir hacer los cambios que
requiera.)
Figura que resumen el punto 11
12. Por ultimo implementara un tutorial Swap web Maps in the same view , vaya al siguiente
enlace
https://developers.arcgis.com/javascript/latest/sample-code/webmap-switch/index.html

13. Cree un documento HTML, llamado SwapWebMaps.html con su implementacin y

cambios solicitados., cambie los tres webs Maps creados con tres web Maps relacionados
con el proceso de paz de Colombia. En este portal puede encontrar varios servicios que le
pueden ser de ayuda. http://datosabiertos.esri.co/
Figura que resumen los puntos 12 al 13
Usando y Creando el WebMap
4. Ahora va crear un WebMap usando datos directamente desde Excel, con el complemento
de Office que instalo en el paso 4, para ello abra con MS Excel la tabla de avalos, que uso
para la Fusion Table.
5. Una vez en Excel, por favor inicie sesin con el usuario de su cuenta Developers de
ArcGIS Online.
Figura que resumen los puntos 4 al 5

6. Una vez inicia sesin podr usar las herramientas de este complemento de Excel, Cree
una nueva hoja y llmela Mapa.
7. Luego busque Insertar Mapa en el complemento de Esri Maps for Office., ajuste
el tamao para una mejor cobertura sobre la hoja de Excel.
Figura que resumen los puntos 6 al 7

8. Luego haga clic derecho dentro del mapa, y seleccione agregar datos de Excel,
seleccione la segunda opcin Rango de celdas, y seleccione toda la tabla donde se
encuentra los datos.
9. Para localizar los avalos, seleccione Latitud y Longitud como
elemento georeferenciador.
10. Seleccione las columnas donde se encuentra cada coordenada.
11. Valide que todos los avalos sean graficados, en la tabla de contenido de la
Derecha, cambie el nombre de la Capa Excel Layer por Avalos.
12. Ahora, cambie el mapa pase por el de OpenStreetMaps, usando la opcin Basemap.

Figura que resumen los puntos 9 al 12

13. Luego agregue la capa de densidad usando la herramienta Add heatMap, observe que
la capa se recalcula cada vez que cambia la escala.
 Figura que resumen el punto 13

14. Tambin podra calcular las reas calientes y fras de la capa de avalos, usando el
atributo de Valor m2, esta herramienta le permitir determinar la significancia
estadstica de una variable en una entidad.
Figura que resumen el punto 14
15. Seleccione de nuevo la capa de Avalos, elimine la capa de densidad, y proceda a
agrupar los avalos representados usando el atributo de estrato y 4 clases., con la
herramienta Grouping.
Figura que resumen el punto 15

16. Ahora si usted lo desea y cuando el nmero de puntos es muy amplio la herramienta
le permite realizar agrupaciones simblicas, usando la herramienta Clustering.
 Figura que resumen el punto 16

17. Ahora va compartir el Mapa creado en su portal de ArcGIS Online.

18. Para ello, seleccione Compartir Mapa, Cambie el Titulo, Etiquetas, y una
descripcin apropiada, y luego defina con que grupos de su portal desea compartir
este mapa.
19. Seleccione Siguiente, y luego Share Map.
 Figura que resumen los puntos 17 al 19

20. El mapa se crear en su portal de ArcGIS, se crear un servicio de tipo (FeatureService), el

cual podr usar en mltiples mapas o aplicaciones, adems hacer las ediciones va Web.
21. Cuando el mapa sea compartido seleccione Ver Mapa compartido. Espere a que le sea
confirmado este proceso.
22. Ingrese su usuario y contrasea de requerirlo.
23. Observe los detalles de su nuevo mapa web creado, preste primordial atencin al ID
creado en la URL de este mapa Web, a travs de este ID usted podr vincular este mapa
Web en cualquier visor o aplicacin Mvil.
24. Hecho eso seleccione Abrir, y luego use la primera opcin, Abrir en el visor de
ArcGIS.com.
 Figura que resumen los puntos del 20 al 24

25. Sobre la tabla de contenido, ubique la capa avalos y usando los tres puntos de las
opciones, seleccione el men de contexto de la capa, y vaya a Configurar Ventana
Emergente (Configure PopUp).
26. Explore todas las posibilidades, incluida la opcin de agregar grficos e imgenes, hecho
eso modifique la ventana emergente para que no salgan las coordenadas del punto., y
que en el ttulo de la ventana emergente se muestre la direccin del predio.
 Figura que resumen los puntos del 25 al 26

27. Guarde los cambios del WebMap. Guardar, agregando ttulo, tags, y resumen.
28. A continuacin, incluir un servicio REST de una entidad estatal a su mapa Web de
avalos.
29. Para ello vaya a la siguiente direccin:
http://imagenes.catastrobogota.gov.co/arcgis/rest/services/Ortho2014/MapServer
30. Como puede ver este servicio es publicado por Catastro Bogot, y cuenta con la Ortho
foto del 2014 de Bogot.
31. Copie la URL, vuelva a su mapa Web y seleccione Agregar, luego Agregar Capa desde la
Web.
32. Copie la URL, verifique que en el men del tipo de servicio esta seleccionado un Servicio
de ArcGIS Server, pues tambin puede agregar Servicios de la OGC o KMLs.
33. Luego seleccione agregar Capa.
34. Guarde los cambios.
 Figura que resumen los puntos del 27 al 34

35. Ahora compartir su mapa web a travs de una Aplicacin Personalizada y una Plantilla.
36. Para ello, vaya al botn Compartir,
37. Seleccione Todos (Everyone) y My Account.
38. Y luego Embed in WebSite.
39. Agregue todas las opciones y cambie el tamao a 940x600, copie el cdigo generado.

Figura que resumen los puntos del 35 al 39

40. Cree un nuevo documento HTML, llamado WebMapGOL.html, e incluya el cdigo copiado
dentro de la etiqueta apropiada.
41. Ejecute desde el navegador la nueva aplicacin WebMapAGOL.html.

Figura que resumen los puntos del 40 al 41

42. En los pasos anteriores ha incluido su mapa en una pgina web externa, ahora usara una
de las plantillas listas para usar de AGOL.
43. Vuelva al botn compartir, pero ahora seleccione Make a Web Application (Hacer una
Aplicacin)
44. Puede explorar varias de las plantillas listas para usar de AGOL.
45. Hecho eso, vaya a la pgina 3, y seleccione la primera plantilla (Simple Map Viewer).
46. Seleccione Create Web App (Publish).
47. Agregue ttulo, etiquetas, y resumen de su aplicacin. Y luego Seleccione Guardar y
Publicar.
48. En la ventana resultante observe que se hace nfasis al ID del WebMap y adems hay un
vnculo para ver la nueva aplicacin. Haga clic en el enlace.
49. Luego vaya a Abrir > Ver aplicacin.
50. Observe su nueva aplicacin con todas las funcionalidades, y fuera del visor de ArcGIS
Online.
51. Observe que si hace algn cambio en el WebMap y guarda los cambios estos se reflejan en
cualquier aplicacin que use dicho WebMap (Concepto clave del WebGIS)
52. No borre este WebMap lo usara luego dentro de una aplicacin mvil y web en el taller No
2.
53. Por ltimo, para que pueda ver las funcionalidades de portal que ha creado en
www.arcgis.com, realice el siguiente tutorial, donde se unir a una organizacin creada
para realizar el anlisis de la informacin geogrfica del centro de alerta de Hawaii.
http://learn.arcgis.com/en/projects/get-started-with-arcgis-online/
Figuras que resumen los puntos del 42 al 51