Prcticas -Tendencias actuales en

WebGIS y Cloud GIS

UniValle
Especializacin en Geomatica

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.
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.
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
10. Implemente el siguiente ejemplo, pero regionalcelo para la Ciudad de
Bogot.
https://developers.google.com/maps/documentation/javascript/examples/map-
coordinates?hl=es
a. Nombre el HTML Coordenadas.html
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/fusiontablesl
ayer?hl=es
14. Guarde todos los HTML creados, le sern de utilidad para el Taller No.1.
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

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.
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.)

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
10. Ahora implemente el ejemplo Get started with SceneView - Create a 3D map. Llmelo
Simple3DMap.html.
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.)
 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/

Usando y Creando el WebMap

14. 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.
15. Una vez en Excel, por favor inicie sesin con el usuario de su cuenta Developers de
ArcGIS Online.
16. Una vez inicia sesin podr usar las herramientas de este complemento de Excel, Cree
una nueva hoja y llmela Mapa.
17. Luego busque Insertar Mapa en el complemento de Esri Maps for Office., ajuste
el tamao para una mejor cobertura sobre la hoja de Excel.
18. 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.
19. Para localizar los avalos, seleccione Latitud y Longitud como elemento
georeferenciador.
20. Seleccione las columnas donde se encuentra cada coordenada.
21. 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.
22. Ahora, cambie el mapa pase por el de OpenStreetMaps, usando la opcin Basemap.
23. Luego agregue la capa de densidad usando la herramienta Add heatMap, observe que
la capa se recalcula cada vez que cambia la escala.
24. 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.
25. 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.
26. 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.
27. Ahora va compartir el Mapa creado en su portal de ArcGIS Online.
28. 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.
29. Seleccione Siguiente, y luego Share Map.
30. El mapa se creara en su portal de ArcGIS, se creara un servicio de tipo (FeatureService), el
cual podr usar en mltiples mapas o aplicaciones, adems hacer las ediciones va Web.
31. Cuando el mapa sea compartido seleccione Ver Mapa compartido. Espere a que le sea
confirmado este proceso.
32. Ingrese su usuario y contrasea de requerirlo.
33. 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.
34. Hecho eso seleccione Abrir, y luego use la primera opcin, Abrir en el visor de
ArcGIS.com.
35. 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).
36. 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.
37. Guarde los cambios del WebMap. Guardar, agregando ttulo, tags, y resumen.
38. A continuacin, incluir un servicio REST de una entidad estatal a su mapa Web de
avalos.
39. Para ello vaya a la siguiente direccin:
http://imagenes.catastrobogota.gov.co/arcgis/rest/services/Ortho2014/MapServer
40. Como puede ver este servicio es publicado por Catastro Bogot, y cuenta con la Ortho
foto del 2014 de Bogot.
41. Copie la URL, vuelva a su mapa Web y seleccione Agregar, luego Agregar Capa desde la
Web.
42. 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.
43. Luego seleccione agregar Capa.
44. Guarde los cambios.
45. Ahora compartir su mapa web a travs de una Aplicacin Personalizada y una Plantilla.
46. Para ello, vaya al botn Compartir,
47. Seleccione Todos (Everyone) y My Account.
48. Y luego Embed in WebSite.
49. Agregue todas las opciones y cambie el tamao a 940x600, copie el cdigo generado.
50. Cree un nuevo documento HTML, llamado WebMapGOL.html, e incluya el cdigo copiado
dentro de la etiqueta apropiada.
51. Ejecute desde el navegador la nueva aplicacin WebMapAGOL.html.
52. En los pasos anteriores ha incluido su mapa en una pgina web externa, ahora usara
una de las plantillas listas para usar de AGOL.
53. Vuelva al botn compartir, pero ahora seleccione Make a Web Application (Hacer una
Aplicacin)
54. Puede explorar varias de las plantillas listas para usar de AGOL.
 55. Hecho eso, vaya a la pgina 3, y seleccione la primera plantilla (Simple Map Viewer).
56. Seleccione Create Web App (Publish).
57. Agregue ttulo, etiquetas, y resumen de su aplicacin. Y luego Seleccione Guardar y
Publicar.
58. 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.
59. Luego vaya a Abrir > Ver aplicacin.
60. Observe su nueva aplicacin con todas las funcionalidades, y fuera del visor de
ArcGIS Online.
61. 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)
62. No borre este WebMap lo usara luego dentro de una aplicacin mvil y web en el taller
No 2.
63. 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/

Desarrollo de las Prcticas.

1. Para el desarrollo de las practicas, modifique este documento adjuntando pantallazos de los
pasos claves que permitan entender lo realizado por usted, y responda a la preguntas en
este mismo documento.
2. Verifique comprimir las imgenes usadas en el documento de Word, usando la opcin
Formato>comprimir imgenes > 96 dpi, para correo electrnico.
3. Guarde el documento cambiando el nombre a PracticaN2_Nombre del estudiante,
convirtalo en un PDF no superior de 5MB, y envelo al Drive en Google.

Recursos:
1. https://developers.google.com/maps/documentation/javascript/examples/?hl=es
2. https://code.google.com/p/gmaps-api- issues/issues/list?
can=2&q=apitype:Javascript3&colspec=ID+Type+Status+Introduced
+Fixed+Summary+Internal+Stars&cells=tiles
3. https://code.google.com/p/google-maps-utility-library-v3/
4. https://support.google.com/fusiontables/answer/184641
5. http://doc.arcgis.com/en/maps-for-office/help/welcome.htm
6. https://developers.arcgis.com/en/javascript/jstutorials/
7. https://developers.arcgis.com/en/javascript/jsapi/
8. https://developers.arcgis.com/en/javascript/jshelp/videos/sample_using.htm
9. https://developers.arcgis.com/en/javascript/jssamples/#search/html5
10. http://resources.arcgis.com/en/help/arcgisonline/index.html#/What_is_ArcGIS_Onlin
e/010q00000074000000/
11. http://resources.arcgis.com/en/help/arcgisonline/index.html#/About_geographic_in
f ormation/010q0000001v000000/
12. http://resources.arcgis.com/en/help/arcgisonline/index.html#/Videos/010q000000030
00000/