J'ai publié de nombreux posts pour les différentes stratégies de faire une story map pour une ballade avec un appareil photo avec GPS intégré (cliquer sur le tag map).
Ici nous avons une synthèse de cette quête.
Ces web services sont du type "avec account" interne style ArcGIS, ou compte google, twitter...
Voir mon autre blob sur les online web services (en anglais):
A propos des trajets dans les bois, sentiers, voir ce post qui date de 2011 et donc qui a vieilli mais qui reste intéressant pour les stratégies concernant les ballades à pieds car il est assez exhaustif:
Le but est aussi de répondre à la question : comment gérer de manière pérenne et interopérable puis publier (de manière différente et sur plusieurs plateformes) une ballade "touristique" avec X photos prises avec un système intégrant un GPS (ou ayant des données EXIF avec géo-tags, géo-données dans les métadatas de ces photos/video/sons)?
Les 3 possibilités
un fichier markdown avec odyssey.js et son sandbox
Il faut faire un fichier avec le langage markdown .md (mais c'est facile avec le sandbox intégré; on peut toujours insérer du HTML). Plus tard si vous voulez utiliser ce fichier pour une autre application, vous pourrez le transformer en html facilement. Vous pourrez aussi le transformer en fichier excel avec quelques chercher/remplacer des balises et "tab" (ne pas utiliser "tab" dans ce fichier).
Il faut au préalable faire un upload de ses photos et récupérer les données GPS (Lat,Long) et les URL de chaque photos. Je vous conseille de faire un traitement par lot en ajoutant à la fin de nom de chaque fichier Lat,Long avec le format [45.3,4.4] par exemple avec graphic converter ou d'autres images organisateurs. Vous gagnerez du temps. Vous pouvez aussi choisir de manière séquentielle de faire une liste de déplacement de carte et de zoom puis de "ADD" dans le sandbox.
Vous pouvez aussi faire un extract des data GPS et les sauvegarder dans un fichier tableur ou text:
http://stephane-mottin.blogspot.fr/2016/11/takes-directory-full-of-images-export.html
Vous pouvez aussi faire un extract des data GPS et les sauvegarder dans un fichier tableur ou text:
http://stephane-mottin.blogspot.fr/2016/11/takes-directory-full-of-images-export.html
A partir du même fichier markdown on peut faire 2 types de présentation, plus une autre avec le temps.
Les limitations:
Le pointeur (toujours le même) ne supporte le clic pour afficher un pop-up par exemple.
En fait on ne peut que choisir "nokia day" pour la map (cartoDB light est trop simple) mais on peut activer cette option:
If you are creating a visualization that uses a CartoDB map, you will see the following options in addition to the default:mapbox (template de HTML en faire du copier/coller de ses données)
If you wish to use a CartoDB data visualization in your story, you will use the “vizjson” option to link to the visualization. The vizjson URL that you need to include here can be found by going to your visualization in CartoDB, clicking “Share” in the upper right corner, and copying the CartoDB.js link. Then paste this link in the vizjson parameter of your Odyssey.js story’s config block. It should look like the example below.- cartodb_filter: "column='VALUE'"- vizjson: "http://{user}.cartodb.com/api/v2/viz/{your-viz-key-here}/viz.json"
- cartodb_filter
- The value for the column you want to filter
- vizjson
https://www.mapbox.com/studio/signup/?plan=starter
(besoin d'un token...) Il faut copier/coller ses données dans le template en HTML de ces nombreux exemples... https://www.mapbox.com/mapbox-gl-js/examples/
Ref: http://googlemapsmania.blogspot.fr/2016/08/mapbox-story-maps.html
Leaflet.js. Jack's leaflet-storymap
Jack Dougherty's leaflet-storymap is a great template to use for creating scroll-driven story maps with Leaflet.js.
Jack's leaflet-storymap is an easy to use template for creating a scroll-driven story map in which all the narrative content is loaded from a GeoJSON data file. You can view a demo of the template in action here:
http://jackdougherty.github.io/leaflet-storymap/index.html
https://github.com/jackdougherty/leaflet-storymap
Easy-to-learn template to create your own storymap. Upload text, point coordinates, zoom levels, and image links to a CSV generic spreadsheet, and drag into http://geojson.io to create a GeoJSON data file.
Limitations: due to GeoJSON data limitations, there is no easy way to insert hyperlinks inside the 'description' text. They must be created outside, in fields such as "source-link"...
voir son livre en anglais: https://www.datavizforall.org/ (Tell your story and show it with data.)
Voir aussi:
http://muxlab.github.io/map-effects-100/Leaflet/11_scroll-driven-map-navigation.html
https://github.com/muxlab/map-effects-100
The HTML code in the demo map is very well documented. if you have used Leaflet.js before then you should be easily able to use the template and even adapt it for your own use. The 'read me' file on leaflet-storymap's GitHub page also contains a number of useful links to other story map templates.
Les éditeurs avec des boites insert "images" "texte" (philosophie "authoring tool" multiclick):
Ce sont des "open source"mais pas de sandbox pour ces javascripts "storymap.js".
On a actuellement 3 sociétés:
- https://storymap.knightlab.com/ avec différents choix de visualisation
- https://story.mapme.com avec différents choix de visualisation
- http://storymaps.arcgis.com/fr/
Les chargements de vos story map sont très longs sauf pour ceux de la web application "short list" mais qui est trop limitée à mon goût.
On a de nombreux choix de Story Map Builders (Cascade, Crowdsource, Map Tour...): - Story Map Shortlist. Liste organisée de lieux d'intérêt. Présentez un grand nombre de lieux organisés par onglets thématiques, par exemple, restaurants, hôtels et attractions. Lorsque vos utilisateurs explorent la carte, les onglets s'actualisent afin d'afficher uniquement les lieux dans leur étendue de carte actuelle. les photos GPS-taggées ne sont pas reconnues et ils faut mettre à la main l'emplacement soit avec une adresse, nom ou soit avec des coordonnées.
Essayez et comparez les pages web générées avec votre test (3 images) avec mapme et knightlab. - Story Map Cascade, ici les photos GPS-taggées téléchargées sont reconnues et mises au bon endroit sur la carte. Les images que vous chargez à partir du disque sont hébergées dans votre web application Cascade automatiquement. Si vous vous loggez avec votre compte google, les images seront dans le site XXX.googleusercontent.com/YYY.
Il faut lire le tutoriel car c'est pas évident de gérer les nombreuses possibilités de positionnement des contenus et les cartes. - Story Map Crowdsource. L'application Story Map Crowdsource vous permet de publier et de gérer un récit collaboratif auquel tout le monde peut apporter des photos avec légendes. Utilisez-le pour faire participer un public précis ou général sur le sujet de votre choix. Pour contribuer à votre récit, les utilisateurs peuvent se connecter avec leur compte Facebook, Google ou ArcGIS, ou utiliser une option d'invité. Une fonction de vérification vous permet d'examiner et d'approuver les contributions.
IL FAUT UN ABONNEMENT PAYANT A arcGIS (version d’évaluation gratuite de 60 jours )... - Autres (plus simple ou plus spécialisée): http://storymaps.arcgis.com/fr/app-list/
- MapTour
Présentez un ensemble de photos ou de vidéos avec légendes, associées à une carte interactive. Elle se prête parfaitement aux promenades ou aux séquences de lieux que les utilisateurs sont invités à suivre dans l'ordre.
Enter your email address or your ex-Picasa/Photos/Google+ id. Your pictures must be shared publicly. The import will be limited to the first 99 pictures.
Map Tour Builder http://www.arcgis.com/apps/MapTour/index.html?fromScratch
ici les photos GPS-taggées téléchargées sont reconnues et mises au bon endroit sur la carte ( si vous avez activé dans Préférences géographiques "tout le monde" : https://www.flickr.com/account/geo/privacy/?donegeopriv=1&from=privacy)
On peut aussi importer avec un fichier CSV. Voir le template:
https://raw.github.com/Esri/map-tour-storytelling-template-js/master/samples/csv_file__lat_long/Locations.csv
C'est séparé par des virgules:
name,description,icon_color,long,lat,pic_url,thumb_url,is_video
exemple:
Jimson Weed,"This is a typical upland marsh plant.",R,-117.2323986,32.7898303,http://downloads.esri.com/blogs/places/missionbaymarsh/jimson_weed.jpg,http://downloads.esri.com/blogs/places/missionbaymarsh/jimson_weed_thumbnail.jpg,
Rem: Formatting your caption text using HTML tags The header and picture title/caption can include HTML tags to define formatting and links. For example, this code adds a yellow link: <a href="http://storymaps.esri.com/" style="color:yellow" target="_blank">StoryMaps Website</a> - Story Map Journal
Créez une narration détaillée organisée en sections présentées dans un volet latéral déroulant. A mesure que les utilisateurs font défiler les sections dans votre Map Journal, ils voient le contenu associé à chaque section, tel qu'une carte, une scène 3D, une image, une vidéo, etc.
http://www.arcgis.com/apps/MapJournal/index.html?fromScratch - Story Map Series
1/Mise en page sous forme d'onglets--> Présentez une série de cartes (donc assez différente, utile aussi pour présenter divers data/thème sur une carte) via un ensemble d'onglets. Un volet descriptif facultatif affiche du texte et d'autres contenus associés à chaque carte--> Mise en page en accordéon latéral
2/Présentez une série de cartes, ainsi que le texte d'accompagnement et d'autres contenus pour chaque carte, dans un volet pouvant être développé. Le fait de cliquer sur un titre sélectionne la carte et développe le volet pour afficher le texte.
3/Mise en page sous forme de puces--> Présentez une série de cartes via des puces numérotées, une carte par puce. Il est conseillé de l'utiliser lorsque vous devez présenter un nombre important de cartes et d'emplacements. Un volet descriptif facultatif affiche du texte et d'autres contenus associés à chaque carte. - Story Map Swipe. Permettez à vos utilisateurs de comparer deux cartes Web distinctes ou deux couches d'une seule carte en déplaçant un outil de balayage en avant et en arrière.
- Story Map Spyglass. Cette application est similaire à Swipe, mais la différence réside dans le fait qu'elle permet à vos utilisateurs de voir une carte à travers une autre grâce à l'outil de longue-vue.
Dans Story Map Cascade, on a un vaste choix de carte. On réalise un clic sur "edit":
qui ouvre cette fenêtre:
Le menu du haut est très riche.
Aller dans "Details": beaucoup de possibilité pour modifier chacun de vos marqueurs par exemple;
et dans "fenêtre contextuelle" affichage d'une autre ou la même image, courbe, histogramme.
Je ne vais pas détailler les menus de "Contenu". Juste vous pouvez voir en bas une "feuille tableur" qui contient tous les marqueurs de cette "layer", hélas, en fait c'est une table "HTML". On peut copier le code mais il ne contient pas les données GPS Lat,Long!
Remarquez l'utilisation possible du fond de carte d'openstreetmap.
Pour l'utilisation avec google (post de sept 2016, Picasa and Google Photos: What story map authors need to know):
https://blogs.esri.com/esri/arcgis/2016/09/13/story-maps-and-picasa/
Yes, you can use Google Photos, but it currently requires a little extra effort. As of this blog post, there’s no way to make photos public in Google Photos, but you can do this in
Rem: Google+ Creative Kit is an online photo editor integrated to Google+ on October 27, 2011, which is essentially Picnik, integrated earlier to Picasa Web Albums (wikipedia).
In May 2015, Google+ launched “Collections” feature which was inspired by Pinterest. It allows users to "build content collections based on topics and interests".
On peut télécharger de nombreuses photos d'un seul coup qui apparaissent en diaporama dans son mur. On peut aussi les transférer dans une Google+ collection.
En faisant un "post" dans Google+, le téléchargement de photos avec des géo-tag Lat,Long permet de visualiser la position via "information". En cliquant sur la carte on obtient les coordonnées. Les autres données exif (modèle appareil photo et données optiques) apparaissent aussi (aussi pour les photos sans géo-data).
L'importation de photos dans Google+ inclut l'importation des informations stockées dans les images (métadonnées EXIF), notamment leur géolocalisation. Cliquez sur Détails de la photo en mode Lightbox pour afficher les informations relatives aux photos que vous avez importées.
https://support.google.com/photos?visit_id=1-636145364232375376-3774937042&rd=1#topic=6128818
Si il y avait plus d'option, on pourrait utiliser ce service pour faire une story map...
Dans "settings" Photos and Videos Shared on Google+, activez
"Show geo location by default on newly shared Google+ albums".
Voir les "open sources":
https://github.com/Esri
https://github.com/Esri/storymap-crowdsource
First create your Crowdsource story in ArcGIS Online using the step-by-step tutorial. Once your story is ready, you have to find its ID in ArcGIS Online. The ID is a 32 character string that you will find in your web browser's address bar when you are viewing your series (just after appid=).
Download the application
Deploy the application on your webserver.
Edit index.html, find the configuration section on line 24 and paste in your application ID
Navigate to index.html (e.g., https://www.example.org/StoryMapCrowdsource/index.html)
https://github.com/Esri/storymap-cascade
https://github.com/Esri/shortlist-storytelling-template-js
https://github.com/Esri/map-series-storytelling-template-js
View it live:
tab layout
accordion layout http://www.arcgis.com/apps/MapSeries/index.html?appid=ef703d9454bb4e4e8a9c1b086b5b66b5 (sur le gaz de schiste)
bullet layout
https://github.com/Esri/swipe-map-storytelling-template-js
The Story Map Swipe and Spyglass app enables users to interact with two web maps or two layers of a single web map.
https://github.com/Esri/map-tour-storytelling-template-js
https://github.com/Esri/text-and-legend-map-storytelling-template-js (old, now https://github.com/Esri/map-series-storytelling-template-js)
https://github.com/Esri/countdown-storytelling-template-js (old)
http://storymaps.esri.com/templates/countdown/ (The World's 25 Busiest Airports)
https://github.com/Esri/esri-leaflet
https://github.com/Esri/map-and-app-gallery-template
https://github.com/Esri/geotour-js
(interêt de faire une route avec des points d'arrêt
All it requires is a feature service with integer Sequence and string Name fields where records are to be visited in ascending Sequence order.)
https://github.com/Esri/arcgis-osm-editor
https://github.com/Esri/edit-template
Edit is a configurable application template that enables you to provide basic editing capabilites for editable layers in a web map. exemple intéressant (signaler une dégradation: http://www.arcgis.com/apps/Edit/index.html?webmap=25977874c66c4c0a8dcc181506c6fb45
C'est la même fenêtre des menus contextuels pour le marqueur cliqué que pour Cascade.
http://www.arcgis.com/home/item.html?id=2a9fbd75eea14c87a32d3799e00663f2
http://www.arcgis.com/home/search.html?t=content&q=tags:ArcGIS%20web%20application%20template
https://github.com/Esri/geoform-template-js
GeoForm is a configurable template for form based data editing of a Feature Service. This application allows users to enter data through a form instead of a map’s pop-up while leveraging the power of the Web Map and editable Feature Services.
https://github.com/Esri/geojson-layer-js
An easy way to load GeoJSON data into your ArcGIS map
- Load GeoJSON from a file
- Load GeoJSON from a server
- Load GeoJSON data from a FeatureCollection
An easy way to load GeoJSON resources into your ArcGIS map. This is a simple custom layer that uses Terraformer (http://terraformer.io/) to convert GeoJSON to ArcGIS JSON. It "should" support all GraphicLayer operations. e.g. popups, rendering...
https://github.com/Esri/geojson-utils
converting between Esri's Geoservices JSON and GeoJSON
https://github.com/Esri/arcgis-to-geojson-utils
https://github.com/Esri/kml-for-geoevent (pour serveur).
Les éditeurs avec un fichier tableur "base de données"
Ici la base de données est un Google spreadsheet:
le texte accepte du HTML.
C'est la philosophie du:
les feuilles de calcul Google gèrent la gestion de contenu, de sorte que les modifications apportées à vos histoires sont faciles à réaliser sans toucher une ligne de code.
(Google spreadsheets handle content management, so changes to your stories are easy to make without touching a line of code).
On a la même approche avec par exemple (a very simple content management system):
pour la création de site web.
Il faut au préalable faire un upload de ses photos et récupérer les données GPS (Lat,Long) et les URL de chaque photos. Je vous conseille de faire un traitement par lot en ajoutant à la fin de nom de chaque fichier Lat,Long avec le format [40.7348, -73.9970] par exemple avec graphic converter ou d'autres images organisateurs. Vous gagnerez du temps.
Vous pouvez aussi faire un extract des data GPS et les sauvegarder dans un fichier tableur ou text:
http://stephane-mottin.blogspot.fr/2016/11/takes-directory-full-of-images-export.html
Les outils javascript "open source" de la knightlab
Des outils de knightlab comme:
on peut comparer deux images par exemple des jpeg de carte pour voir l'évolution par exemple d'une déforestation.
JuxtaposeJS is a simple, open source tool for creating before/after image sliders. Just provide two image URLs and Juxtapose will do the rest of the work for you.
pour insérer du son dans sa "story".
outils pour analyser les réseaux sociaux.
un bookmarklet javascript pour copier image sur le web et mettre du texte.
Les feuilles de calcul Google gèrent la gestion de contenu, de sorte que les modifications apportées à vos histoires sont faciles à réaliser sans toucher une ligne de code.
(Google spreadsheets handle content management, so changes to your stories are easy to make without touching a line of code).
On a la même approche avec par exemple (a very simple content management system):
pour la création de site web.
(.dmg pour mac).
template
The basic setup is for authoring presentations only. The full setup gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
