Desmitificando la personalización de StoryMaps

Raúl Jiménez Ortega

@hhkaos | raul.jimenez@esri.es

Agenda

1.- Arquitectura & stack tecnológico

2.- Fuentes de inspiración

3.- Demo - Personalizar Story Map Journal

4.- Demo - Personalizar Story Map Tour

5.- Promociona tu trabajo

6.- Recursos

Stack

- ArcGIS API for JavaScript + Dojo + AMD
   Roadmap -> Refactor: Webpack, React & Redux

- Normalmente sin frameworks

- Utilidades:

     - jQuery manipular DOM

     - Bootstrap para la UI

     - Lodash/Handlebars para HTML templating

Arquitectura

Story Map Jounal

Personalización mediante eventos y objetos globales

Ejemplos para inspirarse

Modificar estilos

Añadir funcionalidad nueva

Ambas cosas

Map Journal

DEMO

Siguientes pasos

1) Descargamos el código fuente StoryMap-Journal, descomprimimos y ejecutamos "npm install && grunt server"

 

2) Copiar el story map Red de transporte público usando el ArcGIS Online Assistant, luego abrir: localhost:8080/src/?appid=<id>

 

3) Personalizar los estilos y comportamientos (chuleta)

 

4) Terminamos con ejecutando "grunt" y... voilà!, ya tenemos nuestro storymap listo en la carpeta "deploy" (~1/4 HTTP req.)

Story Map Journal + Analytics

StoryMap Tour

DEMO

Siguientes pasos

1) Descargamos el código fuente StoryMap-Tour, descomprimimos y ejecutamos "npm install && grunt server"

 

2) Copiar el story map City of Santa Clara usando el ArcGIS Online Assistant, luego abrir: localhost:8080/src/?appid=<id>

 

3) Personalizar los estilos y comportamientos (chuleta)

 

4) Terminamos con ejecutando "grunt" y... voilà!, ya tenemos nuestro storymap listo en la carpeta "deploy" (~1/2 HTTP req.)

¿Y me surgen dudas o problemas?

Revisa la documentación

esri-es.github.io/awesome-arcgis (storymaps)

 

Y si no das con la solución....¡pregunta!: ejemplo

¡Comparte y conviértete en un referente!

developers.arcgis.com

storymaps.arcgis.com/en/gallery

Y otros medios:  @EsriStoryMaps (12.3K followers), @Esri_Spain (8.1K), GeoNet (Story Maps, ArcGIS Online Templates), other influencers, etc.

Véndela (o regálala): arcgis.domake.io (Beta)

instalando: youtube-video-tour | interesados: bit.ly/domake-esri

Recursos:

¿Preguntas?

@hhkaos | desarrolladores@esri.es

Desmitificando la personalización de StoryMaps

By Raul Jimenez Ortega

Desmitificando la personalización de StoryMaps

Charla preparada para desarrolladores durante la Conferencia Esri España 2017 - http://ce17.esri.es

  • 2,131