Wednesday, November 30, 2016

faire un fichier CSV ou de transcodage pour l'interopérabilité en vue de faire une "narrative story map"; Choix de la baseMap (tiles) dans odyssey.

Je ne détaillerai pas les différents posts de ce blog sur les histoires narratives cartographiées
utiliser les tags "map" ou "GPS"...

J'ai réalisé un programme pour faire le fichier/données/documents/récits de base et de conversion.

1/ étape flickr

Je télécharge mes images géo-taggées de ma ballade dans Flickr et je met mon choix dans un album
ou s'il y a trop de photos-slides de faire deux albums...

2/ étape écriture

puis un fichier  pour le récit
"name, description"
(name et description n'ont pas de ",")

3/étape transcodage 

  • le transcoder pour le format odyssey.js (ci-dessous)
  • le transcoder pour Story Map Tour (ci-dessous)

pour odyssey.js

les "live examples":
http://cartodb.github.io/odyssey.js/documentation/#the-odyssey-sandbox

le format d'une web slide=
#Adding images to your story
```
- center: [40.7365, -73.9982]
- zoom: 13
L.marker([40.7348, -73.9970]).actions.addRemove(S.map)
```
By default, images are also supported. 
![New York](http://www.boston-discovery-guide.com/image-files/new-york-1.jpg "beautiful!")

 Remarque: cette ligne de markdown produit ce code html:
<img src="URL.jpg" alt="New-York" title="beautiful!" />
Lorsque l'on passe la souris sur l'image le texte beautiful! apparait (c'est un hoover popup).
Donc pour chaque image il est préférable de prévoir 3 variable text.
De même pour un lien vers une URL.htm
[Markdown] (http://daringfireball.net/projects/markdown/] "title")
il n'y a pas de "!" pour une URL.htm.

NOTE: There is a known bug in Markdown.pl 1.0.1 which prevents single quotes from being used to delimit link titles.

De plus il est préférable avant la narration de préparer les cartes :
http://mapninja.github.io/CartoDB_Odyssey_Tutorial_for_Story_Maps/
  • Create an empty CartoDB table
  • Populate that table with fields for your data
  • Add the data to your new empty table
  • 'Geocode' your records so that they show up on the map
  • Customize the Pop-up and Hover doo-dads
  • Find your Map ID to put into Odyssey.js
  • Use the Odyssey.js 'Sandbox' to create a basic Story Map
  • Use an historic map from DavidRumsey.com as a basemap in your Story Map
  • Share your Odyssey.js Story Map with a URL, Embed Code, or host it yourself.
Hélas odyssey.js ne gère pas la carte de manière assez fine et repose sur deux 
points pour la carte
-baseurl
-vizjson
par exemple une "History of San Francisco" (que du "hover"):
pour, http://web.stanford.edu/~maples/maps/odyssey/odyssey.html

et pour un super tuto:
avec page "mapninja".github.io et son github: "github.com/mapninja"
https://github.com/mapninja/CartoDB_Odyssey_Tutorial_for_Story_Maps
et aussi son story map fait avec odyssey.js publié sur bl.ocks.org:
http://bl.ocks.org/anonymous/raw/409cb9de4c713e082dee/
il ya du hoover et aussi du popup.
tous ces événements sont dans le vizjson:
```
-baseurl: "http://georeferencer-0.tileserver.com//266b60e098fda1ddbe521ebff0e4d8676a549302/map/CGtnosESWB2NnsgVyjmQc5/201411301752-7AINSs/affine/{z}/{x}/{y}.png"
-title: "The Tattoo Map of San Francisco"
-author: "Stace Maples"
-vizjson: "https://stanfordgeo.cartodb.com/u/stacemaples/api/v2/viz/7840fa14-e940-11e4-bb41-0e49835281d6/viz.json"
```
Ils utilisent  un serveur de tuile pour les cartes anciennes:
http://www.davidrumsey.com/view/georeferencer

Pour renvoyer les informations "popup" suite à un événement click ou hover, c'est avec cartoDB.
Avec cartoDB, on peut choisir son format des data, par exemple:

Our blank table already has description and name fields, so we don't need to add those. We do want to add images to our pop-ups, as well as links our image sources and maybe even links to other websites with more information on the subject of the points we input. Let's add columns for those...
Add the following columns using the Add new column dialog box (just click the Add Column button again for each one):
  1. Description
  2. 'img_url1' with a type of 'string'
    (this will hold the URL for the image you want to show up in your pop-up)
  3. 'img_url1_src' with a type of 'string'
    (to hold the URL of the website you got the image from)
    If you want more than one image per pop-up, just add more sets of 'img_url#' and 'img_url#_src' columns, iterating the number (not too many, though, you'll be able to insert images into the narrative text of your Odyssey.js Story Map)
  4. 'link_url1' with a type of 'string'
    (This will hold a URL to link out to other sources of information)
  5. Again, if you want more links, just iterate the 'link_url#' column
  6. 'latitude' with a type of 'number'
  7. 'longitude' with a type of 'number'
Voir cet exemple avec google drive spreadsheets:

  • soit on exporte en .CSV (en le sauvegardant sur son ordi).
       puis on importe dans CartoDB. 
  • soit on importe directement ce fichier google drive (le nom du fichier est gardé; en fait il est importé en .CVS).
On obtient:


Attention cartoDB odyssey est  en (Lat, Long) par cette façon de rentrer les données 
(Rem: GeoJSON est en (Long,Lat)). 
Je vous conseille de mettre une colonne avec le titre The_geom et de mettre le string suivant avec ce format:
{"type":"Point","coordinates":[4.123694,45.142316]}
 avec en dernier la Longitude, ici 45.
Garder les deux colonnes séparées de chiffres avec les titres lo et la (pas Long ni Lat comme titre de colonne sinon cartoDB génère une erreur d'inversion) pour de futur interopérabilité de votre fichier excel.

Regarder votre data si tout va bien. Les titres doivent être en ASCII.
Il faut maintenant éditer une map (sur le bouton vert en bas à droite).
puis clicker sur le bouton (ici en vert):
puis choisir les effets pop-up (et legend) et aussi les styles des points


relier la Visualisation CartoDB avec Odyssey.js

La première des choses vise l'utilisation de l'option vizjson dans la configuration de votre Odyssey.js markdown. Ainsi vous avez besoin du JavaScript API URL de votre visualisation.

Il faut aller dans votre CartoDB page et votre visualisation pour un click sur le "Share button" (en bas).
Hélas avec la V3 de de cartoDB.js (et builder; cartoDB est en v3.15 en oct 2016) et odyssey.js (qui date de 2013-2014), nous n'avons plus l'export comme dans
http://mapninja.github.io/CartoDB_Odyssey_Tutorial_for_Story_Maps/
https://carto.com/blog/map-of-the-week-an-odyssey-js-story-by-loomstate/
(a post of jul 2014)
voir:
http://gis.stackexchange.com/questions/218606/is-there-a-way-to-get-a-viz-json-url-from-carto-builder

The CARTO Builder does not have the option to share the viz.josn URL due to the current version of CARTO.js (v3.15) is not compatible with the Builder. The new version of CARTO.js (v4) will be released by March/April and it will be compatible with the CARTO builder.

Changer de baseMap pour odyssey

On a de nombreux serveurs de baseMap:
http://wiki.openstreetmap.org/wiki/Tiles

On a 3 choix dans le sandbox d'odyssey: nokia est la moins mauvaise...
c'est l'ensemble des choix par défaut dans cartoDB editor:
  • https://cartocdn_a.global.ssl.fastly.net/base-light/{z}/{x}/{y}.png
    qui est vraiment très light!! mais "unlimited use permitted" et en lien avec OpenStreetMap.
  • une autre du provider Stamen: http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg
    essayez (chargement lent):
    http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg
    http://maps.stamen.com/#terrain/12/37.7706/-122.3782
  • une autre du provider ex-nokia, maintenant HERE ("nokia day"):
    https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24
    (vendu en 2015): https://wego.here.com; https://fr.wikipedia.org/wiki/HERE_WeGo
    essayer le mode hybrid:
    "https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24"
Rem:'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'
{s} means one of the available subdomains (used sequentially to help with browser parallel requests per domain limitation; subdomain values are specified in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y} — tile coordinates.
Ref: http://leafletjs.com/reference.html#popup

https://developer.here.com/rest-apis/documentation/enterprise-map-tile/
https://developer.here.com/rest-apis/documentation/enterprise-map-tile/topics/example-hybrid-map.html

vous pouvez aussi copier/coller celles-ci de cartoDB:
http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png
http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png

le plus important est de bien choisir en fonction de ses besoins.
Personnellement je préfère openstreetmap car très complète:
http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
et aussi une carte "france" :  http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
http://wiki.openstreetmap.org/wiki/FR:Servers/tile.openstreetmap.fr
voir les choix:
http://leaflet-extras.github.io/leaflet-providers/preview/

Il faut comprendre qq différences avec "tileset":
A "tileset" typically includes enough tiles to form a very large image, if they were shown all at once, and also several zoom levels. Generally the idea is not to show them all at once, but to display a particular area of the map on a website. Normally this is done using a JavaScript map library to provide panning and zooming functionality, and request downloading of new tiles as necessary to show the user new areas of the map (a Slippy Map). (http://wiki.openstreetmap.org/wiki/Slippy_Map)
Faire sa baseMap personnalisée:

voir mon post:
http://stephane-mottin.blogspot.fr/2016/11/faire-un-fichier-csv-ou-de-transcodage.html


--------------


On peut aussi faire son propre tiling:
http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

Il existe des outils de conversion entre le format X/Y/Z et TMS:
The difference between XYZ and TMS tiles and how to convert between them
https://gist.github.com/tmcw/4954720


https://en.wikipedia.org/wiki/Tiled_web_map

-----Rem:
On peut aussi changer l'apparence de la map avec les tests conditionnels du CSS via le zoom par exemple:
http://cartodb3.rssing.com/chan-32620984/all_p2.html
It is easy to change the content of your story map by using conditional zoom visualizations in the CartoDB CSS interface. Here is a snippet from the Berlin Map (https://carto.com/blog/berlin-wall-post/; https://gist.github.com/namessanti/e7432a85159fca12978e ; http://bl.ocks.org/namessanti/e7432a85159fca12978e )
we shared above:
line-opacity:1;[zoom=17]{polygon-fill:#F11810;polygon-opacity:0.4;}[zoom=15]{polygon-fill:grey;polygon-opacity:0.4;}[zoom=10]{polygon-fill:grey;line-color:#808080;}
This code changes the visualization at zoom level 17, 15, and 10 to represent the parameters identified below the [zoom = ] section.
When you bring your CartoDB map into Odyssey.js, those conditions remain on your map and make it easy to change the appearance of your map by simply moving the zoom and assigning a story panel. You can play around with all sorts of conditional CartoCSS parameters
https://github.com/mapbox/carto/blob/master/docs/latest.md

Si on veut plus, il faut un peu de code dans le config block.

Ref: http://mapninja.github.io/CartoDB_Odyssey_Tutorial_for_Story_Maps/

pour Story Map Tour (ESRI)

une web_slide= les colonnes suivantes avec un return à la fin:
name,description,icon_color,long,lat,pic_url,thumb_url,is_video
exemple:
Welcome to the reserve,
"The reserve is managed jointly. The Kendall Frost Mission Bay Reserve is part of the University of California Natural Reserve System (UC NRS) and is managed by the University of California San Diego (UCSD). The adjacent Northern Wildlife Reserve is managed by the City of San Diego. <i><a href=""http://nrs.ucsd.edu/kendall.html"" style=""color:yellow"" target=""_blank"">More Info</a></i>",
R,
-117.2296755,32.7920955,
http://downloads.esri.com/blogs/places/missionbaymarsh/marsh_intro_picture.jpg,
http://downloads.esri.com/blogs/places/missionbaymarsh/marsh_intro_picture_thumbnail.jpg,

avec au max 99 lignes.

le zoom (et centrage) sera à mettre slide par slide...

pour le javascript, on peut voir:

pour Story Map Knightlab

si on ne veut pas utiliser leur éditeur slide par slide, il faut plonger dans leur structure JSON.

La structure de la web_slide est:
{
    type: "overview",      // optional; if present must be set to "overview"
    location: {            // required for all slides except "overview" slide
        lat: decimal,      // latitude of point on map
        lon: decimal       // longitude of point on map
    },
    text: {                // optional if media present
        headline: string,
        text: string       // may contain HTML markup
    },
    media: {               // optional if text present
        url: string,       // url for featured media
        caption: string,   // optional; brief explanation of media content
        credit: string     // optional; creator of media content
    }
}
La structure de gestion de l'array de cet objet "slide" est:
{
    width: integer,                // required for embed tool; width of StoryMap
    height: integer,               // required for embed tool; width of StoryMap
    font_css: string,              // optional; font set
    calculate_zoom: true,              // optional; defaults to true.
    storymap: {
        language: string,          // required; two-letter ISO language code
        map_type: string,          // required
        map_as_image: false,       // required
        map_subdomains: string,    // optional
        slides: [object]           // required; array of slide objects (see below)
    }
}

Timeline Knightlab

Rem: l'utilisation de leur célèbre timeline est possible.
Elle se fait avec un fichier tableur
mais hélas les cartes sont à faire puis une URL dans une case du tableur...
Une carte par exemple une google map ou une cartoDB (avec l'excellent builder; voir ci-dessous), peut être mise sous forme de link_URL. 

le fichier tableur doit être stocké dans Google Drive, voir ici le template:

Year ,Month, Day, Time, End Year, End Month, End Day, End Time, Display Date, Headline, Text Media, Media Credit, Media Caption, Media Thumbnail, Type, Group, Background
soit 16 colonnes.
dans media ce sont des URL.
dans media caption: du texte ou par exemple <a href="http://www.flickr.com/photos/zachwise/6115056146/" title="Chicago by zach.wise, on Flickr">Chicago by zach.wise</a>


JackDougherty/leaflet-storymap or mapbox (2016)

Scroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery.
https://github.com/jackdougherty/leaflet-storymap

  • Scroll-driven navigation, using screen swipe, trackpad, or keyboard down-arrow. Initial map displays all point markers.
  • Viewers can pan and zoom the map independently of the narration, or click on any point to go directly to that chapter.
  • 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.
  • Images can be stored in local subfolder or pulled from an external URL.

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".
Then there are no hover or popup events on the map...

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.

with mapbox:
http://jackdougherty.github.io/mapbox-storymap/index.html

marker/pulse (animated) 3 choices of basemap:
http://jackdougherty.github.io/mapbox-storymap/pulse.html
no UI events on the map.

Examples with Added Features

Explore http://pembrokesoundscapes.ca/map, view code at https://github.com/rblades/rblades.github.io. Added audio playback in the narrative, historical map layers.
no UI events on the map.

Story Mapbox GL.js

A very quick way to create an effective scroll-driven story map is to use Mapbox GL. The advantage of using Mapbox GL over some other mapping libraries is that Mapbox GL allows you not only to zoom and pan the map but to rotate the map to provide different perspectives on your featured locations

If you want to create a Mapbox GL story map there is also the added advantage that Mapbox has provided a great template in their list of 'example' maps. The Fly to a location based on scroll position map in the Mapbox GL examples (https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/) provides a neat demo of the possibilities of a Mapbox GL story map (all you have to do to create your own story map is copy & paste the provided code and change the content to suit the story you want to tell).
An example of story map (without UI events):
https://www.mapbox.com/mapbox.js/example/v1.0.0/scroll-driven-navigation/
An example: Slideshow gallery in a marker tooltip; Add a custom slideshow to a marker's tooltip.
https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-image-slideshow/

This JavaScript library uses WebGL to render interactive maps from vector tiles and Mapbox styles. We found out how to to configure the color mapping on the client side and minimize data traffic while rendering a lot of data (https://www.ubilabs.net/en/news/data-driven-raster-layer-mapbox-lg-2016-09-05).

http://carlapedret.github.io/jewellerymap/
A beautiful example of a Mapbox GL story map is Birmingham Eastside's Gentrification in Birmingham’s Jewellery Quarter. Birmingham Eastside has used the Mapbox GL demo map to create a mapped guide to how gentrification is affecting Birmingham's Jewellery Quarter.
As you scroll through the map you are taken on a tour of the neighborhood, highlighting some of the biggest changes in the area. The Gentrification in Birmingham's Jewellery Quarter map also features map markers which provide another level of interactivity to the map. These markers provide additional information and media - such as audio recordings of interviews with some of the individuals featured in the side-panel content.
https://github.com/carlapedret
only copy/paste in html (in GitHub and after to github.io hosted pages http://carlapedret.github.io/jewellerymap/).

https://www.mapbox.com/bites/00110/
Mapbox have also used their own story map format to create a map of the intriguing case of Robert Durst. Durst was arrested on a first-degree murder warrant. If convicted he could face the death penalty.
Following the Life and Death of Robert Durst plots the key movements and actions of Robert Durst since his first wife 'disappeared' three decades ago up until his arrest in New Orleans. As well as the scroll-driven narration and up-dating map 'Following the Life and Death of Robert Durst' uses map markers and polylines to track Durst's movements around the country and to connect all the featured locations together.
-->no UI events on the map.


Ref: http://googlemapsmania.blogspot.fr/2016/08/mapbox-story-maps.html

Tools

---------------
Tools markdown/HTML
(Convert HTML to Markdown...)

Rem:
Remember that GeoJSON stores coordinates in "reversed order" (longitude, latitude)


Posted by at
Labels: , , , , , , , , , , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)