mise en parallèle langage markdown d'odyssey.js et API odyssey/leaflet.js

markdown	odyssey ou leaflet.js
- center: [37.7620, -122.4385] - zoom: 9	MAP Ici, au début ce sera du odyssey.js de la documentation http://cartodb.github.io/odyssey.js/documentation/#marker var map = new L.Map('map', {   center: [37, -91],   zoom: 6 }); O.Story()  .addState(O.Scroll().within($('#myelement'), map.actions.panTo([37.1, -92]); MARKER
L.marker([37.7620, -122.4385]).actions.addRemove(S.map) ou L.marker([37.82, -122.0]).actions.addTo(S.map)	var map = new L.Map('map', {   center: [37, -91],   zoom: 6 }); O.Story()   .addState(     O.Scroll().within($('#myelement'),     L.marker([37, -92]).actions.addTo(map)   ); --- http://leafletjs.com/reference.html#marker L.marker([50.5, 30.5]).addTo(map); L.marker( <LatLng> latlng,<Marker options> options? )
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) cela permet de changer l'icone.	var marker = L.marker([0, 0]) O.Story()   .addState(     O.Scroll().within($('#myelement'),     marker.actions.icon('enabled.png', 'disabled.png')   ); ICON Creates an action that changes the icon of a marker. It receives two arguments (iconEnabled, iconDisabled). ---- http://leafletjs.com/reference.html#icon var myIcon = L.icon({     iconUrl: 'my-icon.png',     iconRetinaUrl: 'my-icon@2x.png',     iconSize: [38, 95],     iconAnchor: [22, 94],     popupAnchor: [-3, -76],     shadowUrl: 'my-icon-shadow.png',     shadowRetinaUrl: 'my-icon-shadow@2x.png',     shadowSize: [68, 95],     shadowAnchor: [22, 94] }); L.marker([50.505, 30.57], {icon: myIcon}).addTo(map); L.Icon.Default extends L.Icon and is the blue icon Leaflet uses for markers by default. TOOLTIPS
pour avoir des tooltips (hover) et popups, on peut faire dans le markdown: L.marker([40.7348, -73.9970],{title:"I am a tooltip", opacity: 0.7}).bindPopup("<b>Hello world!</b><br>I am a popup.").actions.addRemove(S.map) 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) et pour ouvrir une fenêtre "alert" avec un bouton "OK" et le texte   cartodb.github.io indique :  You clicked the map at LatLng(40.7348, -73.997) L.marker([40.7348, -73.9970]).on("click", function(e){alert("You clicked the map at " + e.latlng);}).actions.addTo(S.map) Rem: Unfortunately, if the image is not loaded yet in browser cache, the popup will open right away with default size (not if you set maxWidth "auto"), and adjust its size but sometimes not its position once the image is fully loaded and displayed.	var map = new L.Map('map', {   center: [37, -91],   zoom: 6 }); var popup = L.popup().setLatLng(latlng).setContent('&lt;p&gt;popup for action1&lt;/p&gt;') O.Story()   .addState(O.Scroll().within($('#myelement'), popup.actions.openOn(map)); ---- http://leafletjs.com/reference.html#marker L.marker( <LatLng> latlng,<Marker options> options? ) option1: title (Text for the browser tooltip that appear on marker hover (no tooltip by default).) option2: opacity (1=full opacity) L.marker([40.7348, -73.9970],{title:"I am a tooltip", opacity: 0.7}). POPUP le markdown utilise marker/events de Leaflet, la fct: bindPopup( <String> html | <HTMLElement> el | <Popup> popup, <Popup options> options? ) Binds a popup with a particular HTML content to a click on this marker. You can also open the bound popup with the Marker openPopup method. http://leafletjs.com/reference.html#popup The leaflet documentation shows you can add a popup to a marker with marker.bindPopup("<b>Hello world!</b><br>").openPopup(); ou créer un standalone popup var popup = L.popup()     .setLatLng([51.5, -0.09])     .setContent("I am a standalone popup.")     .openOn(map); On peut combiner les deux: var popup = L.popup()     .setContent("I am a standalone popup."); marker.bindPopup(popup).openPopup(); On peut ajouter les options du popup bindPopup( L.popup({maxWidth:500}).setContent('textHTML') ou d'autres events-marker par exemple avec la fenêtre alert: http://leafletjs.com/reference.html#events map.on('click', function(e) {alert(e.latlng);});
voir ICON ci-dessus	L.marker( [             e.latlng.lng,             e.latlng.lat         ], {             icon : L.icon( {                 iconUrl : 'http://lorempixel.com/64/64/',             } )         } ).addTo( this );
à venir	à venir
XXX	YYY