courte analyse du code "markdown odyssey.js" et ajout popup tooltip icon

http://cartodb.github.io/odyssey.js/

il y a des fonctionnalités "cachées" (c'est du leaflet.js):

pour avoir des tooltips (hover) et popup, on peut faire dans le markdown:
L.marker([40.7348, -73.9970],{title:"I am a tooltip"}).bindPopup("<b>Hello world!</b><br>I am a popup.").actions.addRemove(S.map)

et une fonction associée:
L.marker([40.7348, -73.9970]).on("click", function(e){alert("You clicked the map at " + e.latlng);}).actions.addTo(S.map)
Ici cela ouvre une fenêtre "alert" (avec un bouton "OK"):
          cartodb.github.io indique :
          You clicked the map at LatLng(40.7348, -73.997)

Ref: https://github.com/CartoDB/odyssey.js/issues/171

on a aussi :
ce que fait le bouton "add":
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
Creates an action that adds the marker instance to the specified map when the story enters in the action and removes when the story leaves it.
mais on a aussi:
L.marker([37.8250, -122.0430]).actions.addTo(S.map)

http://cartodb.github.io/odyssey.js/documentation/#leaflet-object
On peut donc mettre du html après L.marker dans le fichier markdown avec la structure leaflet.js.

pour de l'audio:
L.marker([44.7348, -67.5645],{title:"I am a tooltip", opacity: 0.5}).bindPopup('<b>Hello world</b><br>  <mark> blue </mark><span style="color:blue">blue</span>..............................................................................................<br><audio controls autoplay loop> <source src="http://www.zapsplat.com/wp-content/uploads/2015/sound-effects-blastwave-fx/Blastwave_FX_ChurchBells_BW.60957.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>').actions.addRemove(S.map)

pour un lien vers une image:
L.marker([40.7348, -73.9970],{title:"I am a tooltip", opacity: 0.7}).bindPopup('<b>Hello world</b><br>
<span style="color:blue">blue</span>..........................................................................................<br>
<a href="http://farm6.staticflickr.com/5344/25373090639_4a33c061fe_h.jpg"><img src="http://farm6.staticflickr.com/5344/25373090639_4a33c061fe_n.jpg" alt="Icon"></a>').actions.addRemove(S.map)

pour les video youtube par exemple:
<iframe width="480" height="360"src="https://www.youtube.com/embed/AekYJ62Knno?autoplay=1"></iframe>
elle déborde en largeur car pour la fenêtre popup, par défaut
maxWidth= 300 Max width of the popup.
minWidth= 50 Min width of the popup.
maxHeight= null If set, creates a scrollable container of the given height inside a popup if its content exceeds it.
http://leafletjs.com/reference.html#popup


Si le media dépasse 340px de large, il faut passer à autre chose qu'un simple bindPopup("<b>Hello world!</b><br>") mais aller en plus dans les options du popup:
L.marker([44.7348,-69.96]).bindPopup(L.popup({maxWidth:500}).setContent(
'<b>video with width=480 and L.popup maxWidth:500 </b><mark>OK</mark><br><span style="color:blue">blue</span>...<br><iframe width="480" height="360" src="https://www.youtube.com/embed/AekYJ62Knno?autoplay=1"></iframe>'
)).actions.addRemove(S.map)

utiliser maxWidth: "auto"

pour une video
L.marker([44.7348,-68.96],{title:"I am a tooltip for video", opacity: 0.7}).bindPopup(L.popup({maxWidth:500}).setContent('<b>video with width=480 and L.popup maxWidth:500 </b><mark>OK</mark><br><span style="color:blue">blue</span>...........................................................................<br><iframe width="480" height="360" src="https://www.youtube.com/embed/QmES8eumLa8?autoplay=1"></iframe>')).actions.addRemove(S.map)

pour l'icône des marqueurs:
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png',iconSize: [22, 40], iconAnchor: [12, 39]})}).actions.addRemove(S.map)
```
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png',iconSize: [22, 40], iconAnchor: [12, 39]})}).actions.addRemove(S.map)


**from GitHub**
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png


**from your blogspot**
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWF7sYMJQpYwjWXRtpJPXgwB-HSk7dsbWlwlJ_KROyrSKKY70rwi5X_IHO49XjA77L1gfTDMzfHNsXKxQH6vAE6u467Sm0e1-LajztXNlJ4KVvdRPD40zKnwydqONHXWN1Xq1vS4TO5bT/s1600/church-2.png

**random with Placeholder Images **
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'http://lorempixel.com/64/64/',})}).actions.addRemove(S.map)

Sandbox html: cartodb.github.io/odyssey.js/sandbox

Lorsque l'on arrive sur la page  "slides" "Your first odyssey.js story", nous avons sur une page html (avec CSS et javascript interne et externe) hébergé par GitHub que tout compte peut réaliser de type:
http://cartodb.github.io/odyssey.js/sandbox avec username.github.io puis sa repository.

Dans le head, le titre de cette page est <title>Odyssey.js Sandbox</title>

A/ La liste des librairies js utilisées dans le "head":

http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js
    https://modernizr.com/
    Modernizr tells you what HTML, CSS and JavaScript features 
    the user’s browser has to offer.
   dec 2016=latest version:  3.3.1

B/dans les scripts:

http://d3js.org/queue.v1.min.js
       Data-Driven Documents= D3; https://d3js.org/
       D3.js has been extensively used for GIS map making, managing both GeoJSON 
       and Topojson files as input.   https://en.wikipedia.org/wiki/D3.js
http://cartodb.github.io/odyssey.js/dist/odyssey.js
http://cartodb.github.io/odyssey.js/vendor/d3.js
    version: "3.3.10";  dec 2016= the latest version (4.4.0)
http://cartodb.github.io/odyssey.js/vendor/codemirror/codemirror.js
http://cartodb.github.io/odyssey.js/vendor/codemirror-markdown.js
    // CodeMirror version 3.22
    // CodeMirror is the only global var we claim
   CodeMirror is a versatile text editor implemented in JavaScript for the browser. 
   It is specialized for editing code, and comes with a number of language modes
   (>100, also Markdown) and addons 
   that implement more advanced editing functionality.
   It is the editor used in the dev tools for both Firefox and Chrome
    https://codemirror.net/
  Cela permet d'avoir le code markdown en couleur...
http://cartodb.github.io/odyssey.js/vendor/jszip.js
    les fonctions .zip (bouton "download story" qui sauve en .zip
http://cartodb.github.io/odyssey.js/vendor/ZeroClipboard.min.js
    * The ZeroClipboard library provides an easy way to copy text to the clipboard 
       using an invisible Adobe Flash movie and a JavaScript interface.
     * http://zeroclipboard.org/
     * v1.3.5  (now dec 2016, Current config: v2.2.0)
http://cartodb.github.io/odyssey.js/dist/sandbox.js

../vendor/jquery-1.10.2.min.js; /vendor/jquery.imageload.js; ./vendor/jquery.spriteanim.js célèbre jquery librairie... Juste un mot sur ce odyssey.js/vendor/markdown.js (un fork) qui est de 2013/09: https://github.com/cadorn/markdown-js https://github.com/evilstreak/markdown-js/ C'est un analyseur markdown pour JavaScript.  Vous entrez du markdown et obtenez du HTML en out.  Quelques points de vue sur le code:  produire du HTML bien formé. Cela signifie que em et strong nesting est important, de même que la capacité de sortie en tant que HTML et XHTML  une représentation intermédiaire pour permettre le traitement des données analysées (nous avons en fait deux, à la fois JsonML: un arbre markdown et un arbre HTML ). http://www.jsonml.org/ JSON Markup Language (JsonML). Étant facilement extensible pour ajouter de nouveaux dialectes sans avoir à réécrire la mécanique d'analyse entière. il est bien documenté... https://github.com/CartoDB/odyssey.js/search?utf8=%E2%9C%93&q=markdown.toHTML a fonction fondamentale est "markdown.toHTML" Dans odyssey.js, il y est 5 fois: https://github.com/CartoDB/odyssey.js/blob/59e194e8cf18154d095f004e01f955b6af9348f9/dist/odyssey.js aux lignes 1071 : _slide.html = function() {     if (!html) {       html = markdown.toHTML(['markdown'].concat(md_tree));     }     return html;   }; 5389: /** * toHTMLTree( markdown, [dialect] ) -> JsonML * toHTMLTree( md_tree ) -> JsonML * - markdown (String): markdown string to parse * - dialect (String | Dialect): the dialect to use, defaults to gruber * - md_tree (Markdown.JsonML): parsed markdown tree * * Turn markdown into HTML, represented as a JsonML tree. If a string is given * to this function, it is first parsed into a markdown tree by calling * [[parse]]. **/ Markdown.toHTMLTree = function toHTMLTree( input, dialect , options ) { 5418: /** * toHTML( markdown, [dialect] ) -> String * toHTML( md_tree ) -> String * - markdown (String): markdown string to parse * - md_tree (Markdown.JsonML): parsed markdown tree * * Take markdown (either as a string or as a JsonML tree) and run it through * [[toHTMLTree]] then turn it into a well-formated HTML fragment. **/ Markdown.toHTML = function toHTML( source , dialect , options ) { 6724: expose.toHTML = Markdown.toHTML;   expose.toHTMLTree = Markdown.toHTMLTree; C/ un petit js de 10lignes  initAnim Dans le body un iframe qui renvoie sur un html pour l'initialisation http://cartodb.github.io/odyssey.js/sandbox/slides.html et 2 div dont le "share_dialog" d'inialisation ---- Si on inspecte les éléments DOM avec le CSS. Il y a 4 grandes structures. Dans la iframe "map" class="leaflet-container leaflet-fade-anim" div class="leaflet-map-pane" (carte "baseMap liée au début du fichier markdown) "slides_container" le cadre avec texte de l'histoire qui s'affiche qui contient 3 sous-cadres: "dots" pour aller d'une slide à l'autre "slides" la narration avec le texte+image+URL "navButtons" les flèches préc et suivante "credits": c'est la barre en bas avec "title et "author" (liés au début du fichier markdown) Après les scripts, on a un div "editor_modal".  Ce cadre/DOM contient 4 div: "header" (barre en haut) qui contient 2 choses un bouton "expandButton" qui étend ou réduit cette fenêtre un bouton "show_slide"qui renvoie sur la page de choix du template slides/scroll... "options" qui est la barre d'en bas qui contient 2 <ul> (<ul> tag defines an unordered (bulleted) list) qui ont des popups: "h_left" : bouton "?" qui renvoie sur l'URL documentation" et                 bouton qui renvoie sur "change map" "h_right" : avec les 3 boutons en bas à droite   qui renvoie  sur des events "toggle collapse mode", "download story" et "share story". "actions_bar"  (barre à gauche) il y a un ::before et ::after car c'est une zone qui se déroule. L'apparence y montre les boutons qui permettent 3 choix dont mettre un marqueur  sur la carte mais en fait ces boutons forment une classe "actionButton".  class="CodeMirror cm-s-default CodeMirror-wrap" il y a un ::before et ::after car c'est une zone qui se déroule. Elle contient des zones "collapsées" de la structure de codemirror, mais 3 structures y sont: "CodeMirror-vscrollbar" sur la droite "CodeMirror-scroll"  qui contient le texte  "actionButton" sur la gauche avec 3 choix dont mettre un marqueur  sur la carte En fait la liste des dépendances est plus importante: https://libraries.io/github/CartoDB/odyssey.js  package.json Requirements Latest Stable Latest Release Licenses browserify ^4.1.5 13.1.1 13.1.1 MIT d3 3.3.10 4.4.0 4.4.0 BSD-3-Clause hammerjs ~1.1.3 2.0.8 2.0.8 MIT phantomjs ~1.9.0 2.1.7 2.1.7 Apache-2.0 smash 0.0 0.0.15 0.0.15 BSD-3-Clause https://libraries.io/npm/hammerjs A javascript library for multi-touch gestures https://libraries.io/npm/phantomjs Headless WebKit with JS API https://libraries.io/npm/smash Concatenate files together using import statements. This project has been marked as deprecated and is not recommended for use anymore.