Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil...

34
Getting Started with the ArcGIS API for JavaScript Julie Powell Jose Antonio Anta European Developer Summit Madrid, Nov. 15, 2012

Transcript of Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil...

Page 1: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Getting Started with the ArcGIS API for JavaScript

Julie Powell Jose Antonio Anta

European Developer SummitMadrid, Nov. 15, 2012

Page 2: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap• Utilizar nuevas funcionalidad para construir Aplicaciones

• HTML5• Tips & Tricks• What’s next?• Recursos

Page 3: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Maximizando Funcionalidad

• Capas cacheadas (Tiled) Vs Dinámicas

• Feature Services- Muy potente. Cuidado- Generalización de Geometrías

• Comprobar estadisticas con el navegador- Petición- Dibujo

• Cálculo de estadísticas

Page 4: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Feature Layers

• Purpose?

• Modo de Visualizar- Snapshot- On-Demand- Selection only

• Generalización de Geometrías

Page 5: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Consulta de Estadísticas

• Cálculo de estadísticas del lado Servidor

• Large # features: Solo envia resultados estadísticos al cliente

• Varios Tipos de Cálculos

Page 6: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Aplicación Interactiva

Optimizing Performance

Demo

Page 7: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Diseño de aplicaciones

Creando un Widget Propio

Demo

Page 8: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones

• HTML5• Tips & Tricks• What’s next?• Recursos

Page 9: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

HTML5: 5 Puntos Claves

1. No es algo grande2. No necesitas descartar nada3. Es fácil empezar4. Ya funciona5. Está aquí para quedarse

• MARK PILGRIM, Dive into HTML5

Page 10: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Evolución de HTML5

By Sergey Mavrody 2011 | CC Attribution-ShareAlike 3.0

Page 11: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

¿Puedo utilizar?

http://www.caniuse.com/

Page 13: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Ejemplo: Almacenar marcadores localmente

• Tratar de almacenar el marcador en el almacenamiento local.

• Si no es soportado: Cookie

Page 14: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Ejemplo: Apilamiento offline

• Trabajadores web• Utilizar almacenamiento web

para apilar

• Próximamente… TPK• Utilizando API de archivo,

BLOB API

Page 15: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

HTML5. Acceso a ficherosUsar Drag and Drop

Page 16: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones

• HTML5• Tips & Tricks• What’s next?• Recursos

Page 18: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Tips & Tricks : Usar herramientas de desarrollador(firebug, Chrome, etc)

Page 19: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

JS Beautifier

Page 20: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

JSHint / JSLint

Page 21: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Plug-ins

Page 22: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Y si no quiero utilizar Dojo?

• Compatability with other JavaScript frameworks, for example:

- jQuery- ExtJS- Multiple versions of Dojo- Leaflet

Page 23: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline
Page 24: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline
Page 25: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones

• HTML5• Tips & Tricks• What’s next?• Recursos

Page 26: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

ArcGIS API JavaScript Roadmap

• Simplificación del API• Nuevos Widgets (widget Localizar lugares) • Dojo 1.8• More build profiles • Conformidad AMD • Soporte tactil completo en IE 10

En desarrollo• Web Workers• Conexiones Socket• CityEngine WebScenes

Page 28: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline
Page 29: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline
Page 30: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Layers

Page 31: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

Configure Development Environment

• Set up web server• IDEs• Debugging & Tools

Page 32: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

How to run code from web server (IIS)

Page 33: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

esri.request

Your code

Browser Web Server Remote Server

ArcGIS Server

proxy

Proxy

Page 34: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline

CORS

esri.request

Your code

Browser Remote Server

ArcGIS Server