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.jshttps://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.jsData-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:
a fonction fondamentale est "markdown.toHTML"
Dans odyssey.js, il y est 5 fois:
aux lignes 1071 :
_slide.html = function() {
if (!html) {
html = markdown.toHTML(['markdown'].concat(md_tree));
}
return html;
};
5389:
5418:
6724:
expose.toHTML = Markdown.toHTML;
expose.toHTMLTree = Markdown.toHTMLTree;
C/ un petit js de 10lignesinitAnimDans le bodyun iframe qui renvoie sur un html pour l'initialisationhttp://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
Après les scripts, on a un div "editor_modal".
Ce cadre/DOM contient 4 div:
En fait la liste des dépendances est plus importante: https://libraries.io/github/CartoDB/odyssey.js
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. |
