Getting Started with the ArcGIS API for JavaScript

Julie Powell Jose Antonio Anta

European Developer SummitMadrid, Nov. 15, 2012

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap• Utilizar nuevas funcionalidad para construir Aplicaciones

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

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

Feature Layers

• Purpose?

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

• Generalización de Geometrías

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

Aplicación Interactiva

Optimizing Performance

Demo

Diseño de aplicaciones

Creando un Widget Propio

Demo

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones

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

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

Evolución de HTML5

By Sergey Mavrody 2011 | CC Attribution-ShareAlike 3.0

¿Puedo utilizar?

http://www.caniuse.com/

Componentes HTML5 en el API JavaScript (o proximamente)

Canvas (Control del Pixely gráficos android)

Transiciones CSS3CORS

Operaciones intensivas CPU

Alto rendimiento en navegadores

Transformaciones 3D CSS

Ejemplo: Almacenar marcadores localmente

• Tratar de almacenar el marcador en el almacenamiento local.

• Si no es soportado: Cookie

Ejemplo: Apilamiento offline

• Trabajadores web• Utilizar almacenamiento web

para apilar

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

BLOB API

HTML5. Acceso a ficherosUsar Drag and Drop

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones

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

Ayuda!!!!…

• Getting Started• Working with Dojo

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

JS Beautifier

JSHint / JSLint

Plug-ins

Y si no quiero utilizar Dojo?

• Compatability with other JavaScript frameworks, for example:

- jQuery- ExtJS- Multiple versions of Dojo- Leaflet

Agenda

• Introdución• Buenas Prácticas

- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones

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

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

Coming soon… Interactive Sandbox

Layers

Configure Development Environment

• Set up web server• IDEs• Debugging & Tools

How to run code from web server (IIS)

esri.request

Your code

Browser Web Server Remote Server

ArcGIS Server

proxy

Proxy

CORS

esri.request

Your code

Browser Remote Server

ArcGIS Server