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
#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.
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
```
-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"
```
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):
- Description
- 'img_url1' with a type of 'string'
(this will hold the URL for the image you want to show up in your pop-up)
- '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)
- 'link_url1' with a type of 'string'
(This will hold a URL to link out to other sources of information)
- Again, if you want more links, just iterate the 'link_url#' column
- 'latitude' with a type of 'number'
- '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
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 f
eatures 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)
