Story Map

le but

le but, ici, est de proposer une approche interopérable pour passer

1/ de l'état "input" à l'instant t=0
  • album de photo géo-taggées dans Flickr (typique 25à100 photos avec aussi des sous-albums) avec un ordre des noms du type 1-title.jpeg ou sans prendre le temps de les renommer (et donc avec l'ordre incrémental de prise de vue de votre appareil.
  • du contenu textuel et des liens (vers d'autres photos/video/audio; personnel ou des liens permanent style DOI) associé à chaque diapo/slide
    Il faut qu'il soit structuré comme par exemple un fichier tableur (ou une matrice). Nous en re-discuterons.
  •  à voir plus tard (pending): possibilité d'ajout d'autres diapo/slide(s) avec d'autres contributeurs  où d'ajouter dans le temps d'autres diapo/slide
2/ à une "narrative story map" (text, multimedia and map-based interaction) sur divers formats avec les offres actuels des web services et des web platforms et surtout d'en permettre divers niveaux de sauvegarde.

Ce n'est pas seulement de créer mais de rechercher le meilleur workflow pour le faire et de bien construire le "slides_container".
It's not only just create your own storymap but a research about the workflow and the design of "slides_container".

Les outils web services plateformes actuels SaaS PaaS sont de trois types

  • un "langage" mi-cartoDB mi-leaflet encapsulé dans un fichier composé en partie d'une zone de code markdown avec GitHub et son hébergement GitHubPages:

    • Quelques "ajouts"
      avec une utilisation plus fine de leaflet.js http://leafletjs.com/
      avec une basemap openstreetmap (osm) ou une basemap personnalisable avec serveur de tuile comme le web service mapbox pour la personnalisation et comme web plateforme comme serveur de tuile.
      Mapbox is a large provider of custom online maps for websites https://en.wikipedia.org/wiki/Mapbox
      L'histoire avec mapquest nécessite d'être prudent.
      On 11 July 2016, MapQuest discontinued the open tile API and users such as GNOME Maps were switched to a temporarily free tier of the Mapbox tileserver, while considering alternatives.
      https://en.wikipedia.org/wiki/MapQuest
      Dans odyssey.js, Leaflet est en version=0.7.2
      mise à jour à faire:
      http://leafletjs.com/2016/09/27/leaflet-1.0-final.html
    • on peut utiliser le code d'Odyssey.js pour transformer ce code markdown en HTML 
      • soit en js 
      • soit en utilisant le sandbox et sauvegarder l'HTML de toutes les slides (soit directement ou dans le navigateur, click droit puis inspecter et choisir le div "slides_container" et copier; tout l'HTML de toutes les slides y est).

        Il reste à sauvegarder la partie carte avec les zoom, les positions et les popup (et les img des marqueurs).
        Ils sont  en HTML et  structurés pour Leaflet.
    • export CSV.

  • un WebService avec comme entrée un fichier tableur (et le code source pour faire son site SaaS)

    • timemapper de okfn labs http://timemapper.okfnlabs.org/,
      from a Google Spreadsheets.
      We're part of Open Knowledge International and operate as a collaborative community which anyone can join. Labs is organized through a public GitHub repository.
      Openness: open data, open content, and open tools.
      http://okfnlabs.org/projects/#priority=true
      Malgré ses limites que je détaillerai, cet outils est intéressant.
      Il date de 2014 avec mise à jour recline.js et leaflet.js en juillet 2016.
      Ils y utilisent leurs très bons outils Timeline.js, Recline.js.
      Un des intérêts est l'utilisation dynamique de google drive mais qui impose des restrictions dus au template.
      Ils hébergent vos stories:
      http://timemapper.okfnlabs.org/username/titleYourStory

      Si on veut faire son propre site/webService (et changer du code):
      timemapper is a Node web-app built using express.
      NodeJS app but very frontend JS oriented.
      Ils utilisent le PaaS d'hébergement:
      https://www.heroku.com/pricing
      (free 512Mo; cloud platform for web apps)
      https://github.com/okfn/timemapper

  • library .js with examples and templates
    Pour apprendre comment créer votre propre story-board à partir d'un modèle.

  • Vous pouvez aller sur ce site GitHub https://github.com/jackdougherty/leaflet-storymap
    ou à la section Modèles  du livre "Visualisation des données pour tous",: http://DataVizForAll.org
    https://www.datavizforall.org/leaflet/
    https://www.datavizforall.org/leaflet/storymap/

    • Qu'avec leaflet.js  et un petit code js et gitHub et gitPages

      Leaflet storymap with scroll-driven navigation for narrative and point markers from easy-to-learn template, with GeoJSON data fileUpload 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".
      C'est un js très simple avec un cadre de données CSV ou geoJSON fixé.
      Le texte à l'intérieur d'une slide n'est pas scrollable, seul l'ensemble l'est.
      On peut cliquer sur les marqueurs pour aller d'une slide à une autre (fonction flyTo de leaflet v1).
      C'est sans doute le code le plus simple pour une storyMap (avec une faible narration).
      template/modèles :https://github.com/jackdougherty/leaflet-storymap
      http://jackdougherty.github.io/leaflet-storymap/index.html
      tutoriel:
      https://github.com/jackdougherty/leaflet-storymap
      https://www.datavizforall.org/leaflet/storymap/
      Change the template and push on GitHub and GitHubPages:
      1/ Go to the GitHub repository template (https://github.com/jackdougherty/leaflet-storymap) and fork a copy of this repo to your own GitHub account.
      2/Go to your copy on GitHub and click the "download" button to create a zipped (compressed) copy on your local computer.
      The map.csv file contains the map data in an easy-to-edit format. Open map.csv with any spreadsheet tool and replace the existing data with your own. Save the spreadsheet in CSV format.
      3/Open http://geojson.io in a browser. Drag in the map.csv file to inspect your point data. To export, save in GeoJSON format, and the browser will download a file named: map.geojson
      4/Go to your forked repository of leaflet-storymap in your GitHub.com account. Click on 'branches' and keep the master branch, but delete any others (such as gh-pages and/or dev). In the master branch of your repo, click on Upload Files button, upload the two new files you created on your local computer, and replace the existing files with those names: map.csv, map.geojson
      5/In your master branch, click on the index.html file, click on the pencil icon to turn on the editor, and edit lines 7 and 22 to change the titles that will be displayed. When done, scroll down and click the clean Commit Changes button to save your edits to the master branch.
      6/Host your storymap code on the live web with GitHub Pages. At the top level of your repo on GitHub.com, select the master branch drop-down menu, and type in this new branch name: gh-pages. When you first create this branch, it contents may take several minutes to appear the first time on the public web, but updates will take only seconds to appear. Your public URL follows this format: http://USERNAME.github.io/REPO_NAME.
      Learn more about how to edit your GitHub branches and make 'pull requests' to save changes from one branch to the other in the https://www.datavizforall.org/edit/github
      Voir un de mes post:
      http://stephane-mottin.blogspot.fr/2016/12/analysis-of-js-create-your-own-storymap.html

    • mapbox-gl-js

    • Esri ArcGIS storymap(s)

    • http://storymaps.arcgis.com/en/ with open-source code 
    • mapJournal
      https://github.com/Esri/map-journal-storytelling-template-js
      A Map Journal application can be created from ArcGIS Online, from the Esri Story Maps website or from a Portal for ArcGIS deployment. The Journal's data are stored in a Web Application Item (this includes the narrative content, reference to the webmap(s), pictures, videos and the settings). This repository provides the application source code for developers that want to customize Map Journal.
      First create your Map Journal 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 journal.
      • Download the application
      • Deploy the application on your webserver. 
      • Edit index.html, find the configuration section on line 38 and paste in your application ID
      • Navigate to index.html (e.g., http://127.0.0.1/MapJournal/index.html)
      Enjoy! You can continue to use the builder in ArcGIS Online to modify your story. See customize the look and feel section or developer guide if you want to modify the app:
      https://github.com/Esri/map-journal-storytelling-template-js#customize-the-look-and-feel
      The developer guide is intended for developers that wants to modify the behavior or add new functionalities to the Map Journal application. It requires knowledge of HTML, Javascript and CSS languages. If you only need to customize look and feel, you should be able to do so using the customize section above.
      Application life cycle:
      Map Journal fires events that allow customization with lose integration. This mean that you don't need to understand the application internals to implement simple extension.
      To try those events, look for the Custom Javascript block at the far end of index.html.
      https://github.com/Esri/map-journal-storytelling-template-js#developer-guide
    • bref on trouve surtout des éditeurs avec des boites insert "images" "texte" (philosophie "authoring tool".
      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.
      On a de nombreux choix de Story Map Builders (Cascade, Crowdsource, Map Tour...).
      http://storymaps.arcgis.com/fr/app-list/
    • 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.
    • Story Map Cascade, ici les photos GPS-taggées téléchargées (par slide) sont reconnues et mises au bon endroit sur la carte. Les images que vous chargez  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.
      C'est la solution la plus générale, la plus immersive mais hélas slide par slide (generateur itératif).
      voir par le bel exemple (Expedition Kilimanjaro):
      http://esriza-ps.maps.arcgis.com/apps/Cascade/index.html?appid=8c83863e24ed43d88549e374716e18d5
      Elle est toujours en beta en ce décembre 2016.
      https://github.com/Esri/storymap-cascade
    • Story Map Crowdsource. Hélas ce web service nécessite un compte ESRI payant.

      SI Esri ArcGIS storymap se trouve ici c'est que l'on a cette unique offre avec un import sous forme de fichier (les autres web services sont slide par slide):
    • Map Tour Builder http://www.arcgis.com/apps/MapTour/index.html?fromScratchici les photos GPS-taggées téléchargées sont reconnues et mises au bon endroit sur la carte ( si vous avez activé dans Flickr 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,

      voir la librairie JS:
      https://github.com/Esri/map-tour-storytelling-template-js

      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>
      If you are not familiar with ArcGIS Online or StoryMaps concepts, that document describe general workflows and best practices:
      http://storymaps.esri.com/downloads/Building%20Story%20Maps.pdf

    • KnightLab storymap et timeline

    • 1/https://storymap.knightlab.com/ est trop limité car il n'y a pas d'import.
      On importe juste le media (téléchargement ou URL).
      cette Web Apps gère les données exif (Lat,Long) des photos téléchargées...
      Voir un de mes posts:
      http://stephane-mottin.blogspot.com/2016/10/faire-une-story-map-avec.html
      On peut choisir un large choix de basemap, la traiter comme cartographie ou image, les polices de caractère,  la langue, les marqueur de chaque slide, l'image background.
      L'export se fait via une URL hébergé par knightlab.com du type: https://uploads.knightlab.com/storymapjs/3472bc73c4ef281745439d7b614214f5/title/index.html
    • Si elle apparait ici malgré cet éditeur fermé sans import type CSV c'est que l'on l'on peut aussi utiliser cette librairie en l'étudiant:
      https://github.com/NUKnightLab/StoryMapJS
      There are a number of environment variables which are critical to running the server which involve Amazon Web Services and Google Application credentials which we do not store in GitHub. If you are at Knight Lab, see a staff developer for these values. If you are outside of Knight Lab, you may not.

      2/http://timeline.knightlab.com/
      You can create a simple timeline in a few short minutes using our Google spreadsheet template but you must add map with an URL for each slide.

  • Autres (MapMe)


---

a pdf about workflow

Storytelling with Maps: Work flows and Best Practices
http://storymaps.esri.com/downloads/Building%20Story%20Maps.pdf
Conclusion
Story maps are a new medium. Working in a new medium has its challenges— tools and techniques are rapidly evolving—but it can have significant rewards. Story maps represent a new capability of GIS, expanding its traditional use for planning, analysis, and decision support and making its products accessible to much broader audiences. Geography-based storytelling can provide new insights, including a greater appreciation of causes and context, and an deeper under- standing of interrelationships and effects.

-------pending
mobile (android, iOS):
Scroll-driven storymap with narrative and point markers
Clean scroll-driven navigation
Users can pan and zoom map independently from scroll navigation to explore further



No comments:

Post a Comment

Subscribe to: Posts (Atom)