Friday, December 2, 2016

notification réception email gmail sur mac



l'application "aura" gratuite (pour un seul compte Gmail):
https://itunes.apple.com/us/app/aura/id953924032

Aura is your e–mail assistant for Gmail and Google Apps built from the ground up for OS X Yosemite and El Capitan and Sierra
https://crosscoded.com/support/

Liste des serveurs de baseMap (tiles, tuillage et layers). Changer de baseMap (et la personnaliser) pour odyssey.js: mapbox.

Les tuiles:
puis les zooms:


La base:

En français:
http://openstreetmap.fr/blogs/cquest/visite-guidee

https://switch2osm.org/fr/les-basiques/

Servir des tuiles:
https://switch2osm.org/fr/servir-des-tuiles/utilisation-dune-solution-tout-en-un/

les serveurs:
http://wiki.openstreetmap.org/wiki/Tile_servers

Le format principal (pour X/Y/Z) est une URL de ce type:
'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.

tile server capable of providing map tiles in vector (pbf) or raster (png) formats, as well as static map snapshots of any size for a given location.

Une liste de serveurs
The maps project aims to build cartography technologies for all Wikimedia projects, at a scale sufficient for their widespread usage. 
https://www.mediawiki.org/wiki/Maps
https://www.mediawiki.org/wiki/Maps#/map/0
On peut comparer: Bing Maps, Google Maps, OpenStreetMap,ACME Mapper,Apple Maps,HERE, MapQuest,Waze, Wikimapia, WikiMiniAtlas, Yandex.Maps.
http://tile.openstreetmap.fr/?q=yssingeaux
http://mapper.acme.com/?ll=45.142316,4.123694&z=10&t=M&marker0=45.142316,4.123694,Maps

Serveurs

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

Il faut comprendre qq différence 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)

Changer de baseMap pour odyssey.js

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 free:
  • 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.comhttps://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érence 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 avec MapBox utilisable par odyssey.js

On peut utiliser le provider mapbox (https://www.mapbox.com) mais attention au mélange:
Mapbox is a service which lets you customize the design of a basemap with custom colors and elements. Insert your Mapbox URL and access token to add the basemap
Note: CARTO only supports Mapbox classic urls. If you enter a new Mapbox Studio url, an error appears.
En premier, avec odyssey.js, on peut utiliser les baseMaps styles de base de mapBox comme la "mapbox.streets":
https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=your_token
voir: https://carto.com/location-data-services/basemaps/
https://carto.com/docs/carto-editor/maps/#basemaps

On a deux choix:

  • soit avec les superbes outils javascript de MapBox
  • soit avec MapBox Studio.

Je vais traiter du cas avec "MapBox Studio" (et en lien avec la doc/exemple javascript).
MapBox n'est pas facile à comprendre au début.
C'est un processus linéaire :
                                            datasets->tilesets->Styles
                                            en fait (GeoJSON data->layer vectorielle->carte multicouche).

  1. Il faut se créer un compte et on obtient une clé (token).
    Il faut savoir que c'est construit "on top of Leaflet" http://leafletjs.com/
    ->plus de renseignement: GitHub: https://github.com/mapbox/mapbox.js/
  2. importer un dataset (voir point 3). Juste une explication: c'est fondée sur les fonctions import/export liées au Leaflet-Omnivore plug-in
    https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js. qq exemples:
  3. avec MapBox Studio, il suffit de faire "new datasets", soit on le créée soit on l'upload, avec ces deux choix (tester son fichier avec geojson.io, avant):
    • GeoJSON 
    •  CSV file
  4. on click sur datasets (à gauche) puis "edit", on peut voir son fichier sur une carte et aussi en un click sur un point (ou plusieurs points) l'ensemble des données associés.
    On peut ajouter une droite, un polygone, un point... Si on revient sur dataset, on peut sauvegarder en geoJSON son oeuvre modifiée.
  5. exporter vers "tilesets"
  6. dans tilesets, on peut voir la nature de cette "carte", par exemple: "This layer contains mostly Points". On a le numero "mapId" le format "pbf" vector et sa taille. C'est en fait une vector layer (générée à partir de l'ensemble des données GeoJSON). De plus on peut suivre les stats de visualisation de sa carte.
    Avec un compte gratuit: 50 000 map views/mois ou 50 000 mobile users/mois (en décembre 2016); 600 geocode requests/minute, 5 GB tileset storage, 250 MB dataset storage, 20 Mapbox Studio styles. Cet ensemble de limite est le principal défaut de l'hébergement/usage sur mapBox. Sinon on a accès à tout le reste  (Geocoding,  Satellite & street maps, full Mapbox Studio, Directions, les librairies javascripts).
    A map view is 
    • four map tiles when using Mapbox Studio styles, or 
    • 15 smaller map tiles when using Mapbox Studio Classic or Mapbox Editor Classic. 
    • One Static API request also counts as one map view.
  7. faire "add to style". Vous avez enfin votre solution où vous pouvez tout personnaliser.vous avez le lien vers ce style de type:
    https://www.mapbox.com/studio/styles/username/mapId/
    avec votre username et votre mapid.
    Si vous avez choisi la base: "Mapbox Streets V7 + Vector Terrain V2(Composite source)"
    vous aurez un très grand choix des layers (à afficher ou non). Pour l'instant allons dans le symbol "menu" juste à droite du bouton "edit" et sélectionner "share". 
  8. Les 4 choix du sharing/partage:
    1. faire un lien (URL) .html (la carte est déplaçable, zoomable et on a la rotation du plan)
      par contre on a un gros logo en haut à droite pas beau...
    2. "Develop with this style"
      1. mapbox: pour utiliser avec leur librairie javascript; voir exemple:
        https://www.mapbox.com/mapbox-gl-js/example/setstyle/
        Cet exemple permet aussi de comparer les styles de base de mapbox.
      2. leaflet:
        https://api.mapbox.com/styles/v1/stef4250/ciw6uszpd000e2pmkuzzzqlln/tiles/256/{z}/{x}/{y}?access_token=XXmyTokenXX
        C'est cette URL de tuiles qu'il faut utiliser pour odyssey.jspour avoir une carte personnalisée (et avec un import/export interopérable)
        http://leafletjs.com/reference.html#tilelayer
        Voir les nombreuse options...
        Used to load and display tile layers on the map, implements ILayer interface:
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
        dans odyssey.js:
        var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
        var
        basemap = this.basemap = L.tileLayer(baseurl, { attribution: 'data OSM - map CartoDB'}).addTo(map);
        Rem: C'est ici qu'est inséré    comme attribution le string  'data OSM - map CartoDB'
      3. on peut personnaliser ses "points"
        • Title                    Eglise
        • marker-color       #7e7e7e
        • marker-size         medium
        • marker-symbol  village

Add your map style as a layer in ArcGIS and QGIS with WMTS:
https://www.mapbox.com/help/mapbox-arcgis-qgis/

Outils

Faire son tuillage

On peut aussi faire son propre tiling:

outils de conversion entre le format X/Y/Z et TMS

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

ajout de layers

Par exemple avec google fusion:

design a specific layer-basemap

Most web maps are made up of many small, square images called tiles. These tiles are typically 256×256 pixels and are placed side-by-side in order to create the illusion of a very large seamless image. There are several different tiling schemes, but among the most popular is the standard XYZ tile scheme, used by Google, OpenStreetMap, CARTO, Mapbox, and others. Tile images are are served through a REST API with a URL like http://.../Z/X/Y.png, where Z is the zoom level, and X and Y identify the tile.
Mapbox now supports directly accessing raster tile endpoints for Mapbox studio styles. This means you can design custom maps in Mapbox Studio and access them directly in Fulcrum!
From the Styles page in Mapbox Studio, click on either a Mapbox style or one of your own custom styles.
Scroll down the style page until you see the “Use style in GIS apps” section and click on the CARTO tab (Fulcrum uses the same scheme as CARTO).
Copy the Integration URL and proceed with adding the map layer to Fulcrum.


----------

son et text : enregistrer le son et en même temps requête Siri ou dictée vocal (Apple)





La transcription, c’est le fait de reproduire fidèlement un enregistrement audio ou un texte écrit sur toute autre support. Ici nous nous intéressons au son->text.
La reconnaissance vocale est autre chose: voir Siri.

Tu as sur Mac (et sur iPhone) des fonctions de dictée vocale assez puissantes et totalement gratuites. Apple a bossé dessus avec Nuance, l’expert mondial en reconnaissance vocale.

La solution Apple

Dictée vocale Apple

Activation : deux fois sur la touche fonction (fn)
https://support.apple.com/fr-fr/HT203085

Dans accessibilité puis dictée, il faut créer une commande "nouvel enregistrement audio":


Aller dans une application comme textEdit par exemple.
Appuyer deux fois sur "fn" puis dite cette phrase "nouvel audio" (j'ai changé car nouvel enregistrement audio était trop long.
Vous pouvez aussi cliquez sur cette commande à côté de l'icone du microphone ou dans le menu "afficher les commandes de dictée" (choisir avant afficher menu accessibilité et alors il apparait dans le menu en haut).
Cette commande lance quicktime player comme montré sur l'image dessus:
puis sauvegarde


On peut associer la commande vocale à un autre logiciel comme audacity
http://www.audacityteam.org/
voir listes des bons logiciels "audio" sous mac:
http://www.makeuseof.com/tag/best-mac-os-x-apps/
Il existe plein d'outils pour convertir du AAC en divers formats.
En online: http://audio.online-convert.com/fr/convertir-en-mp3

puis on commence à dicter sous textEdit.

puis on arrête avec un click sur le microphone et sur arrêt dans quicktime et on sauvegarde les deux.

Le problème est que "dictée Apple" n'est pas si précise notamment pour les noms géographiques et scientifiques... Siri est meilleur.
On peut utiliser la même méthode quicktime avec Siri.

En outre pour la fonction inverse le text-to-speech d'apple a une interface limité comme "service". click sur un texte puis clic droit puis service et choisir "lecture".
choisir:
https://nosrac.github.io/Dictater/

Siri

http://www.apple.com/fr/macos/sierra/
Toutes les fonctionnalités pratiques de Siri sur iOS font leur apparition sur Mac. Avec une panoplie de nouvelles fonctionnalités pour vous aider au quotidien dans l’utilisation de votre ordinateur.

 Activation : la combinaison CMD + Espace maintenue une seconde ou par la voix (ci-dessous).

http://www.makeuseof.com/tag/use-siri-mac-quick-start-guide/
You can also create documents with Siri on Mac. To do so, start with a command such as “Send John a text” or “Send John an email”. From there, Siri will prompt you to compose the message using your voice. When completed, Siri sends the message automatically. You can also use Siri to compose tweets, Facebook posts, and more. You cannot write documents in applications like Pages and Word with Siri. In this release, Siri cannot work with any third-party applications, unlike its iOS counterpart.

http://www.macg.co/os-x/2016/06/macos-sierra-la-decouverte-de-siri-94581
Le panneau de réglage Siri remplace le « Dictée et parole » que l’on avait sur OS X<10.12.  Les réglages associés à la synthèse vocale et à la dictée de texte ont été logés ailleurs, en l’occurrence dans le panneau dédié à l’accessibilité (rubriques « Parole » et « Dictée » dans la barre latérale).
Siri gère de nombreuses langues:



Siri macOS est aussi capable d’appeler vos contacts, mais uniquement avec FaceTime, il peut également envoyer des messages via iMessage et sur les réseaux sociaux, ou encore composer un mail. On peut aussi modifier certains paramètres système, baisser ou augmenter la luminosité ou le volume sonore, ou encore ouvrir directement des panneau de préférences. Quelques informations sur le Mac seront aussi plus facilement accessibles par ce biais, comme le numéro de série, mais Siri ne l’ajoute pas au presse-papier, dommage.

On peut aussi afficher un contact, calculer des itinéraires (Plans prend alors le relais), chercher dans ses propres photos (Photos se charge d’afficher les résultats), gérer la musique avec Apple Music (et iTunes qui s’en charge) créer de nouvelles notes et gérer ses rendez-vous, etc.
Siri prend en charge quelques-unes des spécificités de macOS, et il gère notamment les fichiers.

Il y a une nouveauté dans Siri macOS qui n’existe pas encore sur iOS 10 et qui serait pourtant utile. Certains résultats peuvent être sauvegardés sous la forme d’un widget dans le Centre de notifications. C’est le cas pour les prévisions météo et pour la bourse, mais aussi pour une recherche dans le Finder, ce qui peut-être assez pratique.

Siri permet de réaliser plusieurs interactions entre la voix de l'utilisateur et les applications du système iOS comme le navigateur Safari, les applications de SMS, l'application téléphone, l'application Mail ou encore l'application de cartographie Plans. Voici quelques exemples de ces interactions :

  • Effectuer un appel avec l'application téléphone.
  • Dicter un SMS à envoyer.
  • Dicter une recherche à faire sur le web avec Safari.
  • Jouer un morceau de musique avec l'application musique.
  • Lancer un itinéraire avec Plans.
Les différences avec Siri iOS sont nombreuses:
Siri is the big step forward in macOS. This isn’t the same Siri you’ve used (or tried to use) on the iPhone. Siri for Mac can handle multi-step searches, for instance, like “What time do the Warriors play?” followed by “What channel is it on?” It also feels Mac-specific in clever ways, and more thoroughly integrated. 


En américain (et différent): https://support.apple.com/en-us/HT206993

La fonctionnalité Dictée vocale convertit vos paroles en texte.

Choisissez le menu Apple () > Préférences Système > Clavier > Dictée vocale. Activez la fonctionnalité Dictée vocale, puis choisissez parmi les options suivantes :
Sélectionnez l’option Dictée améliorée (dès OS X Mavericks 10.9 ) si vous souhaitez utiliser la fonctionnalité de dictée vocale lorsque vous n’êtes pas connecté à Internet.
Sélectionnez vos langue et dialecte. Certaines langues, comme l’anglais, se déclinent en plusieurs dialectes.
Choisissez le raccourci clavier permettant d’activer la fonctionnalité de dictée vocale. 
Sélectionnez ensuite votre microphone préféré à partir du menu contextuel situé sous l’icône de microphone.
Les fonctionnalités Siri et Dictée vocale n’offrent pas les mêmes résultats, mais vous pouvez demander à Siri de composer des messages courts, notamment des e-mails et des messages texte.
Avec Siri, vous ne pouvez pas parler plus de 40 secondes à la fois!!!
Siri est plus performant avec un accès online que "dictée".

Ce qui manque?

Il manque toutefois au Siri de Sierra une fonction fort utile disponible sur iOS : Dis Siri, qui permet d’invoquer l’assistant d’une simple requête vocale, sans avoir à cliquer sur son icône du dock ou dans la barre de menus.
Lancer Siri par la voix sur OSX Sierra 10.12:
Pour créer votre requête « Dis Siri », rendez-vous dans les préférences Accessibilité > Dictée. Si cela n’est pas déjà fait, cochez l’option Activer les commandes de dictée avec la phrase clé, puis saisissez la commande vocale qui lancera les fonctions de dictée (ici, « Dis »).
http://www.macg.co/os-x/2016/07/comment-avoir-dis-siri-sur-macos-sierra-94909
Donc cette fonction ne manque pas...

Autre point un peu négatif, habitué à autant que déformé par Google, on aimerait pouvoir décider que Siri mène ses recherches dans ce moteur de recherches plutôt que dans Bing, qui est celui par défaut.

on ne peut pas envoyer un texte sur TextEdit que vers mail.

temps limité à 40secondes ou quand on arrête de parler 1/2 seconde!

concurrents

https://fr.wikipedia.org/wiki/Google_Now
https://fr.wikipedia.org/wiki/Cortana_(assistant_personnel_intelligent)

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

On peut aussi utiliser la transcription YouTube

Pour chaque fichier vidéo envoyé sur YouTube, YouTube génère de façon automatique un transcript texte de ton enregistrement vidéo. C’est largement imparfait, mais c’est toujours mieux que de démarrer de zéro, en plus tu as tous les repères de temps dans le fichier à exporter. YouTube n’accepte que les fichiers vidéos en Upload. Si tu as seulement un fichier audio, utilise un logiciel de montage vidéo comme iMovie sur Mac (ou Movie Maker sur PC). Donc tu vas ajouter le fichier audio dans la ligne de ton montage et une image fixe pendant toute la durée du son. Tu pourras ensuite exporter ça. YouTube considérera que c’est une vidéo. Tu n’auras plus qu’à le partager sur YouTube, attendre une ou deux heures en fonction de la durée du montage et ensuite tu auras un transcript automatique de ton montage audio.
Maintenant que tu as le son, le transcript YouTube imparfait, Prend ton navigateur Internet préféré et tape dessus, dans la barre d’adresse, Otranscribe.com (http://otranscribe.com/), ajoute ton enregistrement sonore dans le player, ton transcript YouTube dans la zone de texte et commence à corriger les imperfections à la voix avec la dictée vocale si tu as un Mac ou au clavier si tu as un PC.
Grâce au lecteur audio intégré, tu peux facilement revenir sur une séquence, passer en lecture accélérée, en lecture ralentie. A chaque fois que tu appuies sur pause, et que tu reviens ensuite en mode lecture, le player revient une seconde avant, ce qui te permet de bien te caler au moment de l’écriture.

A la fin de toutes ces opérations, tu auras un texte parfait que tu pourras intégrer dans un article de blog, en sous-titre améliorés dans une vidéo YouTube, ou dans ton livre.
Otranscribe.com  permet de sauvegarder en markdown, en texte et Google Docs.

Ref: http://astuces.jeanviet.info/musique/transcricption-automatique.htm

Thursday, December 1, 2016

Web conférence, webRTC et cloud sécurisé (université CNRS)

Université

Web-conférence BigBlueButton
et de partage de documents
utilisation sans logiciel spécifique comme skype 
java doit être à jour; bientôt plus besoin de java...
On pourra enregistrer sa web conférence.
Actuellement partage micro et cam et autres avec flash.
C'est d'un ordi à un ordi.
ce sera avec https://webrtc.org/
WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.

WebRTC (Web Real-Time Communication, littéralement « communication en temps réel pour le Web ») est une interface de programmation (API) JavaScript actuellement au stade de brouillon (Draft) développée au sein du W3C et de l'IETF. C'est aussi un canevas logiciel avec des implémentations précoces dans différents navigateurs web pour permettre une communication en temps réel. Le but du WebRTC est de lier des applications comme la voix sur IP, le partage de fichiers en pair à pair en s'affranchissant des modules d'extensions propriétaires jusqu'alors nécessaires.

stockage des sauvegardes

données utilisateurs: min 10Go et max 50Go.
c'est sauvegardé sur la baie puis le portable

-windows (collaborer/mesDossier) (mode cache off-line)
-linux/mac (autre: Assistance/sauvegarde avec BackupPC toutes les 6heures; ici c'est en local puis sauvegarder sur la baie du serveur).

Echange fichier 4Go chiffré avec URL

c'est mieux qu'en fichier attaché dans son courriel.

Stockage structuré et collaboratif

GED Nuxéo. en web ou en "drive"
versionnage des documents
délégation des droits d'administration
identification possible par shibbolteth (https://shibboleth.net/) pour les universitaires.

documents collaboratifs avec OAE

ca ressemble au "drive" mais que des documents simples.

CNRS

My Com en 2 minutes (outil CNRS basé sur Skype Entreprise : webconférence, tchat,…) :

gestion des mots de passe.

KeePass (sur mac: KeePassX, mobile: MiniKeePass)
  • un seul mot de passe
  • accès à tous les autres (par banque de données: user, pass et URL). On click que l'url et il s'occupe du login.

my Core (onCloud)

Open; alternative dropBox.

Vous pouvez dès à présent créer votre compte My CoRe : https://mycore.cnrs.fr
Vous trouverez la documentation utile à vos premiers pas sur l’espace d’aide.
https://aide.core-cloud.net/mycore

Caractéristiques techniques

  • Hébergement sur des infrastructures dédiées dans un centre serveur CNRS (confidentialité garantie)
  • Protocoles sécurisés (https)
  • Espace de stockage unique de 20 Go par utilisateur
  • Intégration dans le système d’information (authentification via la fédération d'identités CNRS Janus)

My Core en 80 secondes (outil CNRS basé sur ownCloud : partage de fichiers, nomadisme,…)
20Go gratuit.
C'est un compte personnel.
Existe Web service ou client lourd.

My com (qui se nommait Link de Microsoft, maintenant "skype Pro" depuis 2016)

My Com permet :
  • d’économiser du temps et de l’argent en réduisant les besoins de déplacement (réunions virtuelles)
  • de simplifier l’organisation des réunions de formation ou d’information (chacun peut rester à son bureau)
  • de développer de nouveaux usages grâce au présentiel et au partage interactif d’écrans
  • de profiter d’échanges visio à la fois souples d’utilisation et à la confidentialité garantie
  • d’inviter à un échange visio toutes les personnes de votre choix (interne ou externe), y compris à l’étranger

maptime est aussi un bookmark sur l'enseignement du mapping/géomatique.



http://maptime.io/lessons-resources/

voir aussi leur site GitHub:
https://github.com/maptime/maptime-bites

TileMill (mapbox studio) is an open source, free desktop application for designing maps


Importing data
We walk through how to download data and get it into TileMill. To work with more complex data and datasets, check out the Adding Layers documentation.

Styling data
Here we show the basics of using CartoCSS to style your data and make a truly custom map. For an a in-depth dive into how Carto works, check out the Carto manual.

Adding tooltips and legends
Making your map interactive and adding a legend is critical to communicating your data. Here we show how to add tooltip interactivity and legends to maps. The Project Settings documentation offers more advanced details on this.

Exporting your map
Maps made in TileMill can be shared quickly and easily in a number of formats. Here we show how to export an interactive map to the MBTiles format for uploading on the web. See our Exporting docs for an overview of all supported exporting formats.

https://tilemill-project.github.io/tilemill/
https://tilemill-project.github.io/tilemill/docs/crashcourse/introduction/
http://tilemill-project.github.io/tilemill/docs/crashcourse/tooltips/

Alternatives to TileMill:
Mapbox Studio: the official, supported successor to TileMill
https://github.com/tilemill-project/tilemill


maps and stories: an article "the cartographic journal"

"the cartographic journal":
2015 Impact Factor: 0.569
http://www.tandfonline.com/toc/ycaj20/current

Geography professors Sébastien Caquard and William Cartwright have analysed the relationship between maps and narratives, and they agree that maps are an extraordinary tool to explain stories.
http://www.tandfonline.com/doi/full/10.1179/0008704114Z.000000000130
The Cartographic Journal
The World of Mapping
Volume 51, 2014 - Issue 2: Cartography and Narratives
“The potential of maps to both decipher and tell stories is virtually unlimited. Maps can contribute to leaving cartographic traces, making these experiences more visible and more tangible.”

If you are starting to create your own maps, some of the best tools you can use are CartoDB and Google Fusion Tables. You can also get simple and effective maps with Google Maps.
If you have some knowledge of JavaScript, you can also use Mapbox with hundreds of options to customise your maps.

Ref:
http://www.carlapedret.cat/maps-stories-cartodb-mapbox-fusion-tables/

Wednesday, November 30, 2016

Carto (cartoDB)

Présentation générale 

CARTO (anciennement CartoDB) est une plate-forme de cloud computing Software as a Service (SaaS) qui fournit des outils de cartographie GIS et Web pour affichage dans un navigateur Web. La société est positionnée comme une plate-forme de localisation avec data (et d'intelligence) grâce à des outils dotés d'une aptitude à l'analyse et à la visualisation des données qui ne nécessitent pas de SIG ou d'expérience de développement... Il est fondé sur PostGIS qui est une extension (plugin) du SGBD PostgreSQL, qui met en forme et gère les événements liés à la manipulation d'informations géographiques/spatiales sous forme de géométries (points, lignes, polygones), conformément aux standards établis par l'Open Geospatial Consortium. Il permet à PostgreSQL d'être un SGBD spatial.
CartoDB a deux "produits":

The CARTO Builder

C' est une application Web appelée CARTO Builder, où les utilisateurs peuvent gérer les données, exécuter l'analyse côté utilisateur et concevoir des cartes personnalisées. Cet outils est destiné aux non-développeurs et aux débutants amis permet d'avoir accès à des outils géomatiques avancés et à les utiliser. Dans CARTO Builder, les utilisateurs avancés ont également accès à une interface Web où SQL peut être utilisé pour manipuler des données et CartoCSS, un langage de cartographie similaire à CSS, qui peut être utilisé pour la conception de carte pilotée par données.

The CARTO Engine

Cette deuxième offre est un ensemble d'API et de bibliothèques de développeurs pour la construction de cartes personnalisées et des interfaces de visualisation de données.

APIs 

L'API  Maps sert de service de mosaïque dynamique (tiling, gestion/sharing de tuiles), qui crée de nouvelles mosaïques en fonction des demandes des clients. Cela permet aux utilisateurs de concevoir des cartes dans l'application Web, puis d'utiliser ces styles et données dans des applications Web personnalisées.

L'API SQL, où les instructions SQL prises en charge par PostgreSQL peuvent être utilisées pour extraire des données de la base de données. L'API SQL sert des données dans différents formats, y compris Shapefile, GeoJSON et CSV.

L'API Data Services permet de créer facilement des fonctionnalités telles que le routage, le géocodage et les bases de données vectorielles.

Bibliothèques Javascript [
Enfin, il y a la bibliothèque Carto.js, qui peut gérer (wrap) les API en visualisations complètes ou être utilisée pour intégrer des données dans d'autres applications Web.

Ref:
https://en.wikipedia.org/wiki/CartoDB
https://fr.wikipedia.org/wiki/PostGIS

Démarrage Carto Buider

Vous pouvez vous connecter avec ces 3 choix:


Dès le départ on peut importer ses data:



Sinon nous avons:

Si vous ne connaissez rien à ce site allez à:

en mode avancé:

La map s'affiche sur le monde. Un click sur "Add" en haut à droite.
Le choix de l'import des data est important et permet une forte interopérabilité:



Concentrons nous sur le format CSV Comma-Separated Values (ou TSV, Tab-Separated Values).

La première ligne du fichier doit contenir les noms des colonnes
Le reste des lignes suit le schéma de cette première ligne.
Il est recommandé que les valeurs "string" sont en text.
Si une donnée contient des , alors la mettre entre "".
Chaque ligne doit être terminée par  CR/LF, or LF line terminators (CR line terminators are not supported).
Le mode "automatically" permet de mettre la géométrie pour des données avec Lat,Long.


Vous pouvez faire votre carte (edit map) avec un grand choix de personnalisation.

Hélas on ne peut que sauvegarder sous forme d'URL (plus viz.JSON).
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

Une bon tutoriel en anglais:

Documentation Infowindows export de cartoDB editor

Infowindows

Infowindows provide additional interactivity for your published map. A pop-up information window appears when a viewer clicks, or hovers their mouse over, select data on your map. You can define whether the infowindow appears with the click or hover action, choose what data appears in the infowindow, style the infowindow color and width, display the default title of the infowindow, or add custom title labels for the infowindow data.

You can create custom infowindows with HTML code directly from the CARTO Editor. Infowindows is available from the CARTO sidebar of the Map View. (For details about how to create infowindows with Carto.js, see
From the Map View of a selected map, click infowindows from the CARTO sidebar.






analysis VIZJSON and odyssey.js, cartoDB.js: story map


VizJSON is a markup language for describing charts to a rendering engine such that the engine can interpret the associated data and display it in a chart. It is similar in concept to HTML in that HTML is a common markup language that browsers can interpret and use to display web pages. Think of it this way: VizJSON is for visualization renderers as HTML is for browsers. This article describes the advantages of an open language (such as VizJSON) for describing visualization. This language can serve as the foundation of new open-source software that produces and consumes VizJSON as the descriptive language of visualization.
VizJSON is a language-based specification of a visualization data model based on The Grammar of Graphics (see Resources) and expressed in JavaScript Object Notation (JSON). The Grammar of Graphics describes the rules that connect data and graphics. The ideas behind this book have influenced statistical software such as R and SPSS. (See Resources to more about R and SPSS.)

Ref: http://www.ibm.com/developerworks/library/bd-vizjson/

For map


A viz.json is a file that contains all the data needed to reproduce the visualization you created in CartoDB.
The CARTO's viz.json file tells CARTO.js all the information about your map, including the style you want to use for your data and the filters you want to apply with SQL. The viz.json file is served with each map you create in your CARTO account.
Although the viz.json file stores all your map settings, all these settings can be easily customized with CARTO.js. If you want to modify the result after instantiating your map with the viz.json, reference the CARTO.js API available methods. For example, you can also use the returned layer to build more functionality (show/hide, click, hover, custom infowindows):
https://carto.com/docs/carto-engine/carto-js/getting-started/

Now the CARTO Builder does not have the option to share the viz.json 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 2017 and it will be compatible with the CARTO builder...


Best tutorial for cartoDB and odyssey.js
https://github.com/mapninja/CartoDB_Odyssey_Tutorial_for_Story_Maps

only with maps 

viz.json files are related with Maps (visualizations) but not with tables (datasets):
http://gis.stackexchange.com/questions/171283/get-a-viz-json-uri-from-a-table-name/171377

some codes:

An HTML template that takes a viz.json and displays the map, SQL, and CartoCSS in a neat embeddable iframe
https://github.com/CartoDB/labs-cdbfiddle
http://cartodb.github.io/labs-cdbfiddle/#https://team.cartodb.com/u/chriswhong/api/v2/viz/b047457a-8e2d-11e5-87da-0e5db1731f59/viz.json
"builder" with the old: "api/v2/viz/ "


Carto Builder<->Carto.js->viz.json URL -> odyssey


example
a page produced by odyssey.js:
a map produced with the old builder "carto.com/viz/":
its viz..JSON URL:
idem pour 
viz.json est la même structure cartoDB. L'information entrée pour les pop-up et hover... reste associée à la carte et son dataset. 
Un viz.json est un fichier qui contient toutes les structures (et pas les données comme un texte dans info-windows qui est dans une cellule du dataset) nécessaire à la reproduction de la visualisation créée dans cartoDB. 
viz.JSON and SQL:

---
cartodb.createLayer(self.map, vizjson)
n'intervient qu'une fois dans chacun des 3 templates:
  • sandbox/scroll.html 
  • sandbox/slides.html 
  • sandbox/torque.html 
 cartodb.createLayer(self.map, vizjson)
               .done(function(layer) {

odyssey.js

https://github.com/CartoDB/odyssey.js/blob/master/ARCHITECTURE.md

Odyssey is a simple FSM (https://en.wikipedia.org/wiki/Finite-state_machine)
- states
- outputs
- triggers
Each state has multiple outputs To change state a trigger should be raised When the state machine is doing a switch between states no trigger is taken into account Each state have internal states.


  • timeline
    • time in range [0, 1]
  • trigger
  • action
  • when a trigger moves the timeline other triggers don't take affect
  • trigger can be continous or fixed
    • actions can be:
    • undo/redo
    • once


cartoDB.js

cartodb.createVis(map_id, vizjson_url[, options] [, callback])
Creates a visualization inside the map_id DOM object.
cartodb.createVis(map_id, vizjson_url[, options] [, callback])
Creates a visualization inside the map_id DOM object.

cartodb.createLayer(map, layerSource [, options] [, callback])
With visualizations already created through the CARTO console, you can simply use the createLayer function to add them into your web pages. Unlike createVis, this method requires an already activated map object and it does not load a basemap for you.

https://github.com/CartoDB/cartodb.js/

createvis-vs-createlayer


https://carto.com/academy/courses/cartojs-ground-up/createvis-vs-createlayer/

In CARTO, there are two main methods to bring your maps into custom webpages, createVis and createLayer.

The first method, createVis allows for quick and easy maps with a large degree of customization. It gives two map layers in an array: layer 0 is the base map; layer 1 is the CARTO data layer.

The second method, createLayer, allows for much more customization, including the combining of layers from separate maps, each with its own levels of customization. createLayer also allows client-side control over basemaps.

Both methods allow custom CartoCSS styling, SQL queries, and overlay options (zoom controls, a search box, a share button, etc.). Before showing these methods, we need to be introduced to these methods’ main sources of information.

https://carto.com/academy/courses/cartojs-ground-up/createvis-vs-createlayer/#createvis
https://github.com/CartoDB/cartodb.js/blob/develop/doc/vizjson_format.md



webGL 2 (firefox 51, chrome 55) et cartographie 3D


"Version 51.0beta, first offered to Beta channel users on November 16, 2016":
Added support for WebGL 2 (is now enabled by default).


Différents outils de cartographie, comme l'ancienne application de cartographie 3D Nokia Maps 3D WebGL qui représentait des villes entières dont les bâtiments avaient été reconstruit par des procédés automatiques d'imagerie numérique. 
F4map (http://www.f4map.com/) qui se base sur les données 3D fournies par OpenStreetMap, 
c'est également le cas plus récemment du moteur WikiMiniAtlas de Wikipedia:



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.comhttps://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)