Saturday, November 5, 2016

test of several blog editors (markdown) on mac OSX (an iOS) or with a browser (blogger.js) for google blogspot blogger. Extreme markup editor for blogger: blogger.js.(Hatena markup)

Browser-based interfaces are  clumsy, and require you to be connected to the internet just to use them. Browsers are perfect for reading web content, but not so great for creating it.
The blogspot's editor is very old...

Mars Edit (shareware 30-day trial)

Nice: autodetect you blog.
Quickly scan your iPhoto Photos, Lightroom, or Flickr libraries, and insert images into your blog post with the click of a button.
Build a template to match your blog, then let MarsEdit's live preview show you how your posts will look before you publish them. Use Markdown? MarsEdit will preview that, too.
Combine the power of MarsEdit with your favorite editor. Integrates cleanly with BBEdit, TextMate, WriteRoom, TextWrangler, or any editor that supports the ODBEditor suite.

"insert image" ---> src=""
It's different from the blogspot editor---> ""
Then flipcard does not work.



Built-in Image Editor: Image editing and handling made easy

Crop, resize and set aspect ratio of your images
Adjust brightness, contrast and color temperature
Easy Instagram-esque filters such as B&W, Sepia, and Vintage
Drag and drop placement of images with live preview
Set your "Featured Image” with 1-click
Add alt text, caption, and tooltip information

A fully featured editor: Writing was never so enjoyable

Markdown or Rich Text mode
Elegant formatting bar for headings, lists, quotes, links and more
Writing goals (characters, words, reading time) with live update
Inline HTML. Perfect for tables, forms and HTML embeds
Code block, supporting all major code languages

Same problem for inserting image: ""


You can use Extreme Markup Editor for Blogger™ on both Google Chrome and Firefox.
In fact near of Hatena Markup (blog platform :

open source:

blogger.js is a 815 lines of javascript.

* Paragraphs
* Headings
* Hierarchical Lists
* Definition Lists
* Tables
* Blockquotes
* Pre-formatted Texts
* Source Code
* Footnotes
* Raw HTML Tags
* Links
* Images

* LaTeX

Websites hosted directly from your GitHub repository

Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

on the map et google drive pour un trajet.

On the Go Map est une application gratuite qui peut se connecter à Google Drive, avec toutes les fonctionnalités que la plateforme de sauvegarde offre. Que ce soit en termes de partage, de stockage ou de notifications d’édition.

L’outil en ligne permet d’avoir une vue d’ensemble sur les dénivelés ascendants et descendants du parcours, ainsi que sur le pourcentage de la pente.


Friday, November 4, 2016

how to add an gif to google blogger blogspot

Go to  GIF host site like giphy.
and copy the embed code in you post (HTML mode).

Sure it does not work with flipcard option...

use google slides for blogging your travel on blogspot blogger.

This does not work for flipcard option.

You have to use iframe in HTML mode:

List of Image uploaders, text uploaders, file uploaders, URL shorteners, URL sharing services

Image uploaders

Text uploaders

File uploaders

URL shorteners

URL sharing services

the best tool for publishing a photo on a blog, blogger blogspot: google drawings. ScreenShots and blogging on google blogger blogspot (5 best tools).

If you are regularly blogging, you will encounter a lot of images and sometimes, you want to change these images.

As many blog platform (CMS) the blog editor with the usual features, including WYSIWYG editing, image "editing" is not sufficient.

The best solution: you will need a screenshot application and the use of google drawings.

Use a screnshot app (with automatic copy in your clipboard in jpg or png. jpg is better).
Go to you drive.
Select Google drive and drawing.
Google drawing is a very good web service.
Name your drawing if you want (up right, "Untitled drawing");
You can rotate, crop...
Explore menu: you can change color brigthness...
And also you can change the mask...

Menu File->Publish to the web
select small size.
copy the link.

go to you blogger and "add image" and copy URL.
All it takes to create a totally-customized .png or .jpeg image with a transparent background:

Use a background color or find free textures (insert image->select search) or to use for the background. Go to Insert > Image to upload the texture file. Resize the texture to fit the background. You can also set a background color (Right Click > Background).

If you will change your file, it will be dynamic.
The drawing is inserted as an image, but it continues to be editable (only in google drawings) after you add it to the document. Google uses SVG in Firefox, Opera, Chrome and other browsers that support it and VML in Internet Explorer, so you don't need third-party plug-ins. 

You have a lot of sharing possibilities (change the file or comment...) ->revision history...
It is a real-time collaborative application.
All your drawings are automatically saved and stored in Google Drive. Access them wherever you go, from any device.
You can also use chrome extension:
--> Google drawings works offline.

file .gdraw
A .gdraw file contains web link to a drawing created and saved in Google Drive. These files do not contain the actual drawing just encoded URL link.
These files are typically found in your Google Drive folder that is synchronized with the service. Opening it results in launching Google Drive in your Web browser so you can edit the drawing.
Google drawing can import and export jpeg, png and SVG files.

While more sophisticated apps exist, this one is very durable, fast, doesn't lag, saves, shares, reloads clean. One user wanted ability to add user-shaped arrows etc. Free fonts abound online, a good assortment for charting.

But it does not work with the function ""!!!!

In order to select the size and to use flipcard option,
use your screenshot apps when you have finished your drawings
(You loose the dynamic view).


Desktop Blog Editors 

8 Desktop Blog Editors To Make Your Blogging Faster


Screenshot apps

  • Save images in multiple formats
  • Take screenshots of specific resolution
  • Annotations (Arrows, Highlight, Tags, Blue, Text)
  • Easy Share to cloud services
  • Fast Loading and Lightweight
  • Full-Screen Capture (For Long Web Pages)
  • Screen Recording, excellent high-quality tools to capture screenshots
  • Support for shortcut keys
  • Basic Image Editing Features like cropping, rotating, etc.


InstantShot! (freeware)

It creates an icon in the menu bar. Clicking on the icon, a small menu will appear. Select the capture type from the menu (whole screen, a portion of screen, timed screenshot or multiple captures) or, if you want to change the save format, select the desired one from the submenus and then... capture!

Very fast but no editor's functions and no contextual name of the file.

Skitch (freeware)
You must drag to save a file.
Editor is OK. Link with evernote (free evernote cloud site (only 60MB)).
Mobile App is also available (Android/iOS)


editor: OK

Open source:



Nimbus Screenshot (Chrome and Firefox Plugin)

Image Editing Features are pretty basic.

Awesome Screenshot

Capture, Annotate and Share

and web Free Photo Editing Tools like PicMonkey, BeFunky,


Wednesday, November 2, 2016

comparison of major (continually updated) travel websites

comparison of major (continually updated) image-sharing websites
the top 15 Most Popular Photo Sharing Websites as derived from our eBizMBA Rank which is a continually updated average of each website's Alexa Global Traffic Rank, and U.S. Traffic Rank from both Compete and Quantcast.

see also:

Flickr= 1TB of storage and geo-tools.

The grandaddy of photo-sharing sites, Flickr-Yahoo offers 1TB of storage for free (which can hold from 500,000 to 2 million photos) with no limit on picture resolution (users can also upload 1080p high-definition video clips, with playback up to three minutes long).

You can also organize pictures into collections and sub-collections, with options to tag keywords and people either individually or in batches of photos. Your friends and followers can tag photos too, creating a massive database of keyworded photos. You can then search your library by keyword or people tags and sort by dates that pictures were posted or taken.

Flickr displays photos in a minimalist grid with a slideshow option, as well as an “explore” feature to find new pictures and photographers to follow. The site also offers the same beginner-friendly image editor as Photobucket, with Instagram-style color filters, cutesy effects like frames and stickers and basic editing tools, such as contrast, saturation and focus tweaks.

You can upload photos via email, the website, or directly from the Flickr smartphone app and share albums on Facebook, Pinterest, Tumblr and Twitter. I

Photobucket: Great for editing but low Gbyte.

if you want to check out photo services with basic editing tools built in...
2GB free, with an additional 8GB if you use the Photobucket app= 10GB.
A reader brought to our attention that the Photobucket Terms or Use will provide full rights to Photobucket to use your photos in any way this wish, including for commercial purposes, if your privacy setting are set to "Public" Photobucket albums default to "Public" when you sign up, so this is a significant privacy risk.

ThisLife (now shutterfly): Great for collating diverse sets of photos

If your pictures are scattered throughout the Internet, photo aggregator ThisLife (by Shutterfly) can import and organize them. The service links with Flickr, Instagram, Facebook, Picasa and SmugMug to pull in all your photos and sort them by date and place. You can upload full resolution pictures directly from your computer as well as high-definition video.

Photos are privately displayed in a timeline and can be further organized by category and custom tags. Facial recognition, geo-tags and duplicate-killing add to the organizational mojo. Tags from social network sites are saved, too, allowing for a heavyweight search feature by person, place, date, time and keyword.

You can also organize pics into slideshows and galleries that you can then share via email.


If storing your photos is less important than sharing them with followers across the globe, Instagram is the answer. The wildly popular app for Android and iOS doesn't have much of a desktop presence - although it is possible to browse photos at its website – but any photo you post from your smartphone is saved online forevermore.

You get unlimited photo uploads as well uploads of videos between three and 15 seconds long – although since photos are compressed, it's not the ideal place to store pictures you may want to print out later.

Of course, Instagram's killer app is its dozens of filters, from old-timey black and white to vintage high-colors and moody contrasts. There are also several intuitive sliders to adjust shadows, highlights, focus and more, while the Layout add-on lets you create collages.

You can tag your followers in pictures and captioning images with hashtags helps people outside your existing circles find your pictures. For example, a well-tagged sunset pic of your favorite beach can help you connect with other lovers of dusk and sandy locales.

Though Instagram is designed to be a newsfeed of photos from people you follow, you can view a person's entire photo history – and your own – by clicking on the profile tab.

Privacy control: You can set your account to be viewed by approved followers only; otherwise, anybody with an Instagram account can see your pictures
Full-size uploads/downloads? No; but you can use external service Instaport to download all your pics to your hard drive


Jalbum: building story map, a shareware cross-platform software (Java virtual machine) for managing and creating digital photo galleries

Create beautiful web albums

Jalbum can also be thought of as similar to Google's Picasa, or Apple's iPhoto...

Use the powerful jAlbum software to create professional online photo albums for any website. Choose from hundreds of album skins and customize to your own personal touch.

With one button click jAlbum will batch process your images, scale them for the web and create web pages for you.

Add captions to images to tell the whole story. Display the photo's location on the map. jAlbum automatically extracts GPS data added to photos.

Google trips et Google Cultural Institute (exemple des Châteaux de la Loire)

En sept 2016, google présente une nouvelle application qui devrait intéresser tous les voyageurs : Google Trips.
En effet, cette appli pour iOS et Android souhaite vous gérer votre temps, et vous permettre d’accéder plus rapidement aux informations dont vous avez besoin lorsque vous vous êtes en déplacement, en voyage, en ballade touristique, en excursion.

Google Trips vous permet d’organiser votre voyage dans les moindres détails. Vous pouvez y conserver toutes les informations importantes au même endroit sur votre smartphone. Et vous pourrez y accéder à tout le contenu de Trips même sans connexion internet.

A conditions de l’y autoriser lors de l’installation, l’appli peut aussi analyser le contenu des vos mails, si vous utilisez Gmail. Elle peut alors en extraire les informations relatives à vos horaires de trains ou d’avion, les réservations de votre hôtel, les locations de véhicules et toutes les données en relation avec les activités prévues lors de votre séjour qui auront été trouvées dans votre messagerie ou dans votre agenda, si vous utilisez Google Agenda.

Trips propose également de conserver l’historique de vos déplacements dans Google Maps. Cela permettra à Trips d’analyser vos gouts et vos centres d’intérêts. L’appli pourra alors vous recommander des activités que vous aimerez sans doute. Google Trips peut également vous proposer des lieux plébiscités par les internautes, très pratique lorsque vous ne savez pas quoi faire dans un endroit que vous ne connaissez pas, ou même autour de chez vous.

Trips est aussi la "gentille organisatrice" de vos visites. Google Trips peut en effet vous aider à planifier vos déplacements dans la ville. Elle vous aide d’ailleurs à organiser vos visites de la manière la plus logique, en calculant les meilleurs trajets pour vous rendre d’un point d’intérêt à un autre, par rapport à ceux que vous avez choisi parmi les endroits marquants ou les suggestions faites par l’application.

Enfin, Google Trip peut aussi être votre guide en proposant des photos et des informations sur tous les lieux marquants que vous souhaitez découvrir. Les informations sont piochées dans Google Maps et bénéficient ainsi de la riche base de données de Google, mais aussi des avis des internautes.

Pour vos prochains weekend ou vos vacances, Google Trips pourra donc vous rendre de fiers services. L’appli est gratuite et disponible sur iOS et Android.


 Google Cultural Institute
Si vous n’avez pas encore eu la chance de visiter les Châteaux de la Loire, le Google Cultural Institute vous propose désormais une incroyable visite virtuelle depuis votre ordinateur, votre smartphone, ou votre tablette.

Les Châteaux de la Loire en visite virtuelle

Avec Google Street View, vous pouvez donc visiter l’Abbaye Royale de Fontevraud, la Cité Royale de Loches, le Domaine national de Chambord, les Châteaux d’Angers, d’Azay-le-Rideau, de Chateaudun, de Chenonceaux, du Clos Lucé, de Fougères-sur-Bièvre, de Meung-sur-Loire, de Montpoupon, du Moulin, du Rivau, de Sully-sur-Loire, de Talcy, de Villandry, ainsi que le Château et le Jardin de Bouges, et la Forteresse royale de Chinon.

Sur ces 18 sites historiques de la Vallée de la Loire, il est désormais possible de visiter châteaux et jardins de manière classique dans Google Street View, avec notamment 7 lieux qui peuvent être survolés. Mais le Google Cultural Institute nous permet aussi de faire des visites virtuelles en 360° de ces lieux, dont certains ne sont même pas ouverts au public !

Google Art Camera : des clichés en 1 000 Megapixels

Depuis le site dédié, 46 expositions virtuelles sont proposées. Elle permettent d’admirer plus de 2000 objets historiques. Google a notamment utilisé une caméra spéciale, la Art Caméra, qui permet de réaliser des clichés avec une très haute résolution de 1000 Megapixels. Ils permettent ainsi d’en apprécier les détails les plus infimes avec un zoom presque à infini dans 56 œuvres en particulier.

Avec cette technologie inédite, on peut par exemple découvrir ou redécouvrir la célèbre Tenture de l’Apocalypse d’Angers ou les fresques de la salle capitulaire de l’Abbaye de Fontevraud, datant du XVIe siècle.

En plus des 18 millions de visiteurs qui parcourent chaque année la Vallée de la Loire, la numérisation des monuments et des oeuvres permet donc au plus grand nombre de les apprécier dans Google Street View dans un rendu proche de la réalité et jamais vu auparavant. Ces visites sont entièrement gratuites et accessibles depuis un ordinateur, un smartphone ou une tablette, mais aussi un casque de réalité virtuelle comme le Google Cardboard.

Sunday, October 30, 2016

Embedding Instagram posts is an easy way to add Instagram photos and videos to the stories

Embedding Instagram posts is an easy way to add Instagram photos and videos to the stories you want to tell on articles or websites. You can embed your own content as well as photos and videos from public profiles. As always, people own their Instagram content, and embedded posts give the proper attribution by showing the username and linking back to the original content on Instagram.

Embedded posts are responsive and automatically resize if the embedding container becomes smaller. This means that the content will look great both on desktop and mobile websites.

WordPress makes it even easier to embed Instagram content on your blog. All you have to do is to copy the Instagram URL of the media page and paste it on its own line in the WordPress editor. For example:

You can also use the Wordpress shortcode which allows you to remove the caption or manually specify the width. Just paste this in your blog post as an example:

[instagram url= hidecaption=true width=320]

You can check out the WordPress documentation for more information on how to use and customize embedded posts:

Comparison of online source code playgrounds and sandbox. Real-time on line editor and run. Samples for map.

write and run a code on a browser...

Online web client-side source code playgrounds:

open 4 maps Google/Yahoo!/Bing/OpenStreetMap
with api Flickr
(Plunker is an online community for creating, collaborating on and sharing your web development ideas. and it's fully open-source on GitHub).
Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Article nature de 2013 et PlosONE 2016 sur Flickr et tourisme quantitatif;

Leaflet an open-source JavaScript library.. example of plug-in : atlefren, An open source jQuery-plugin to create a map that follows your text with openStreetMap.
an open-source JavaScript library for mobile-friendly interactive maps.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

many plug-ins:

to create a map that follows your text. Annotate each paragraph and place a map alongside it. Then you can zoom/pan/add marker etc to the map as the reader reads through the text.

Will not work well on mobile (map gets removed on small screens)...

modèles des Story Maps d'arcGIS: quelques story map (excursion, ballade, pèlerinage, voyage, road trip) avec promotion du tourisme d'une région avec ArcGIS Online.

Promotion touristique des territoires, une Story Map vaut mieux qu'un long discours !

En cette période printanière où les week-end rallongés sont propices aux escapades, j'ai regardé un peu comment les utilisateurs d'ArcGIS Online exploitaient les modèles de Story Map pour promouvoir des territoires et faire connaître leur potentiel touristique. Voici un panorama de différentes approches et des exemples de réalisation en France et à l'étranger:

Un beau billet de 2014:

Selon le modèle de Story Map utilisé, les sites pourront proposer plus ou moins de description et pourront être organisés de manière hiérarchique ou thématique.

online web service pour des photos géo-taggées ou géo-localisées

La « balise de géolocalisation »  peut notamment contenir dans le champs EXIF de chaque image :

  • des données GPS (coordonnées latitude et longitude, une altitude)
  • la direction de vue (boussole)1
  • des informations saisies par l'utilisateur : lieux de saisie, code postal…
  • autres données non cartographiques peuvent être associées comme :
    • des données temporelles : heure de capture…
    • des données spécifiques aux périphériques de capture : appareil photo (focale…), appareil audio (échantillonnage, bit…)

online web service

(on peut aussi voir les données exif d'une image via son URL
et sa localisation :
Map via embedded coordinates at: Google, Yahoo! Japan, MapFan, WikiMapia, OpenStreetMap, Bing).

Open source:
avec Java Webstart et Java SE 7 runtime installé
ou en local avec  java -Xmx256M -jar

Create and publish interactive maps; Use maps for analysis and presentations:

steps to create a story map :

a web service: Turn geotagged photos in Flickr Albums (Flickr stes) into KML

just enter the id number of the Flickr photo set you wish to generate KML for.

many options:
6 choices for photo sizes
-KML File
-Open in GoogleMaps - (small photo set please, small photos recommended)
Large photo sets make take a long time to generate, sometimes causing Google Maps to time out. If you want to share a large photo set, please use the following steps:

  1. download the KML file
  2. upload it to your own blog or web site
  3. paste its URL into GoogleMaps
This will speed up loading of your photo set and reduce the load on my server.
In GoogleMaps click on the 'Link to this page' link to get an HTML snippet to embed the map in your website.

You also can use openStreetMap (Potlatch can read a KML file for geotagged photos. ):

 Draw lines (paths) between photos.

  1.  Chronologically - Paths will be drawn based on photo creation date.
  2.  Chronologically - by upload - Paths will be drawn based on date the photo was uploaded to Flickr.
  3.  Set Order - Paths will be drawn based on the order they appear in the set.

What icon/style to use for each image:
  1.  Square Thumbnail - The square thumbnail generated by Flickr for each photo.
  2.  Thumbnail - The proportionally-sized thumbnail generated by Flickr for each photo*
  3.  Camera - The default GoogleMaps 'photo'/'camera' icon.
*This is exactly what I’m looking for – thumbnails generate beautifully from KML file, however when a thumbnail is clicked, I just get a blank screen with the message: ‘This photo is no longer available’ (it is) If I click again, I then get a flickr message saying I’m using an unsupported browser (post 2016).

open source:

You are welcome to use this script hosted on my site, or you can download it and run it on your own computer/webserver. If you would like to run it yourself, please be aware of the following (System Requirements):

  • PHP 5.2 or greater.
  • The PEAR Flickr API

I was looking for an easy way to add geotagged photos that I had stored in Flickr to an ArcGIS web map. While geotagged photos, hosted or not, can't currently be directly imported into an ArcGIS web map, there are several different paths you can take to accomplish the task.

One of the ways is to convert the geotagged photos in a Flickr album to KML,
- Flickr Photo Set to KML. Click Photo Set to KML in the post to open the web utility.

First put the desired geotagged photos into a Flickr Album (formerly a Flickr Set). Next, open the album and obtain the album ID from the URL:


faire une story map avec storymap.knightlab ou avec timeline.knightlab?

  1. pour commencer il faut aller à et un clic sur "make a storymap"
  2. puis se connecter avec son compte google. Pour travailler avec ce service de  knightlab il faut un compte Google car vos données de projet sont stockées dans Google Drive.
  3. Définir le nom du projet, et le nom peut être changé pendant le fonctionnement en renommant simplement la diapositive de titre. C'est la première diapo. Prévoir une introduction.
    Le premier écran est toujours une diapositive/map "aperçu".
  4. puis faire les autres diapositives qui elles ont un zoom.

Le projet fini peut être placé sur un domaine distinct ou  à l'aide de l'iframe sur le site de vos médias. Si vous utilisez le lien généré automatiquement à StoryMap, il peut y avoir des problèmes avec le partage de la carte dans les réseaux sociaux...


On ne peut télécharger qu'une image ou video (ou son HTML5) à la fois (ou une URL ).
La taille est limitée i.e. 4608 × 2592, 4.2 Mo 11.9Mpixels c'est trop!!!!
Une fois téléchargée, cela donne:

Il ne gère pas les photos géo-taggées!!!!!!
Il faut mettre à la main des coordonnées GPS (ou le lieu)!!!!

On peut choisir son marqueur mais pas d'effet quand on clic dessus.

Par rapport à odyssey.js, on ne peut que agir diapo par diapo.

Quelques questions

Comment puis-je avoir une carte sans les lignes entre les points?
Pour désactiver les lignes de connexion sur les cartes, utilisez l'option  «Traiter comme image» (par opposition à la valeur par défaut «Traiter comme cartographie»).

Comment puis-je utiliser une carte personnalisée?
Choisissez "options" de la partie supérieure gauche de la fenêtre StoryMap, puis dans le menu "Type de carte" choisir le type que vous voulez.
Sélectionnez "MapBox" pour entrer l'ID de votre carte MapBox et son token:
Sélectionnez "custom" pour entrer l'URL d'un serveur de tuile. Si le serveur prend en charge plusieurs sous-domaines, saisissez-les comme une seule chaîne dans le champ Subdomain (par exemple, les sous-domaines "a", "b" et "c" doivent être entrés comme "abc":

La structure est donc très simple d'une slide.
    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
Il faut mettre de l'HTML à la main car l'éditeur est trop simpliste. Mais là aussi les copier/colelr d'HTML sont nettoyés!!!
les tag h1-h4, les bullets ou num listes, les polices sont gardées mais les couleurs...


the basic process

You can create a simple timeline in a few short minutes using our Google spreadsheet template, and this quick guide explaining the basic process. Experts can use their JSON skills to create custom installations, while keeping TimelineJS3's core look and functionality (see below timelineJS).

It's based on google drive spreadsheet i.e. 

For an example of a completed spreadsheet, see the spreadsheet which powers the example on our home page:

Once you've created a timeline, you can make changes by going back to your Google spreadsheet. Changes you make to the spreadsheet are automatically available to your Timeline—you don't need to repeat the "publish to the web" step (step #2). If you want to make changes to the optional settings, you will need to update your embed code, but if you are only changing content in the spreadsheet, then there's nothing else to do.

TimelineJS's text fields (headline, text, caption, and credit) all accept HTML markup.

The main problem is that we must code in HTML in the google spreadsheet.
In order to use maps, we must also code with an external service where the photos with GPS-geo-tag are put with "beautiful markers". 
TimelineJS can pull in media from a variety of sources and has built-in support for Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, major video sites (YouTube, Vimeo, etc.) 
If your URL ends in jpg, gif, png or jpeg, it will be used as the source for an image tag. It should also work if there is a query string after the extension, perhaps specifying dynamic width and height values.
Google Maps
Use the URL for the Google Maps page (unless you are using Streetview, which currently requires the embed URL found in the "Share" section). Coordinates, search results, place marks and directions are all honored by Timeline. TimelineJS supports roadmap, hybrid, satellite and terrain Google Maps, as well as directions, places, and Streetview maps.

The columns:
  1. You have the option to add media to your slides in columns L-O. Under the Media column (L) enter the link (URL) to the media you wish to display. TimelineJS supports multiple media types. In the next column (M), you can credit the media's original source, and in column N you can include a short caption.
  2. If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering <iframe> markup in the Media column (L) instead of a URL. You can also enter <blockquote> markup in column L.
  3. Markers for slides that contain media show a small icon representing the type of media used. If you'd like, you can show a thumbnail of the media there, instead. Simply add the URL of the image you'd like to use to column O.
  4. If you like, you can set the background of the slide to a specific color or an image. To do this, enter a CSS hex color value, CSS named color, or the URL to an image in the Background column (R).

Titles and Eras

The Type column (P) can be used to activate a few more specialized features in Timeline. In most cases, you'll leave it blank.
If you use the word title in this column, then Timeline will use the row as a "title slide," which is shown before all others, and which does not require a date. Title slides do not appear in the markers in the navigation component of the Timeline. You should only have one row with "title" in the Type column.
If you use the word era in this column, then Timeline will use the row to label a span of time in the "axis" area of the timeline navigation component. Each era gets a distinct color, which is not currently configurable. At this time, overlapping eras are not well-supported, but we are investigating design strategies for that use case.

Organizing slides

Timeline automatically orders slides according to their start date, and always puts the title slide first, no matter how the rows in your spreadsheet are ordered. If you need to have two slides with exactly the same start date, then the row which appears first in the spreadsheet will be shown first in the timeline.
Using the Group column (Q), you can organize your slides by groups (formerly known as "tags"). You can put any values you want in the Group column. Events with the same group will be put in the same row or adjacent rows, and TimelineJS will use the text from the Group colum as a label at the left edge of the row(s) containing those events. The group text will also be displayed on each slide. If you like, you can have a mix of slides in groups and slides with a blank value in the Group column.

Publishing your Timeline

Now that you have your spreadsheet set up, you can turn it into a timeline in a couple easy steps.
  1. Go to the File menu of your Google spreadsheet and select "Publish to the Web." In the window that pops up make sure you are under Link (it should place you there by default), then make sure that "Automatically republish when changes are made" is checked and that "Entire Document" is selected.
  2. Copy the link.
  3. Open the TimelineJS site. Paste your copied link into the "Google spreadsheet URL" box. There you are also given some styling options to play around with if you desire.
  4. Copy the embed code displayed and paste it on your site wherever you'd like it to appear.

You have this choice:
-an iframe (appears like a youtube video)
-share your timeline in a post, copy the link below and paste it on a line by itself where you'd like the timeline to appear.  The link is like this:
-or with this link.

more with javascript TimelineJS

Most of our users are happy to use the markup created in our simple authoring tool to publish their timeline. However, if you want to substantially customize the visual presentation of your timeline, or integrate it with other parts of your page, you will need to understand some more technical details.
Because there are so many details to the styling, this is not exactly simple, but, if you have some technical capacity, you can override TimelineJS's CSS rules and have complete control over the look of the timeline. For details, see Using the TimelineJS CSS selectors. You will need to be able to instantiate the Timeline in javascript on your own page. 

cartoDB odyssey.js storymap.js and many examples of "story map" (pour de l'histoire, des voyages, des ballades, des excursions, road trips).

cartodb and odyssey.js 

very good open source (2014):
javascript "cartodb": odyssey.js

When you're ready to go and build the narrative/navigation part of your application. We're going to use Odyssey.js for this. Odyssey.js is actually a JavaScript library that you can use on your own web server, but CartoDB has implemented a Sandbox that allows non-programmers to deploy a story map with very little coding and without any web server infrastructure, at all. Odyssey.js uses a very simple text matkup language called Markdown.

Three possibilities:

Templates control the overall structure and layout of your story. They define the position of your map and story elements and define the method by which your story will progress. We have developed three templates to get you started.

Slide template

The slide template acts like a Keynote or PowerPoint presentation. Your story is broken down into different states or slides, so you can go forward or backward just by clicking the arrows on the screen buttons or by pressing the forward/back arrows on your keyboard. This is perfect for stories that don’t have too much text and you want to highlight the map as the principal element.

See a live example (in the sandbox)

Scroll template

The scroll template moves based on when the viewer scrolls the page. As you scroll up or down, the story moves forward or backward. This template works really well with stories that have a lot of editorial content such as images and texts, and where the map adds more context to the story.

See a live example (in the sandbox)

Torque template

Use this template if your data is animated. This template adds triggers to your animated map so when reaching a certain point on the timeline your contextual information changes. This is perfect for adding extra information to animated stories. But it is more complex....

best tools specially for students:
The Odyssey Sandbox allows you to link map changes and movements to different elements in a web document through the use of Markdown. We have included a small number of webpage templates to help you quickly create your stories.

  1. Start a new history
  2. Publish your story
  3. Save your story

See the syntax of markdown :

Sharing your story map

Once you have created all the slides you are interested in putting into your Story Map, you are ready to share your work with the world. The Odyssey.js Sandbox allows you to do this in three ways:

1/Sharing with an URL or Embed code

Odyssey.js can export your Story Map directly to a site called, which is just a platform for sharing and rendering JavaSript code, or give you an IFRAME code snippet to paste into your blog, or other website.

2/You can also download the code for your Story Map and host it on your own Web Server

3/ others

See this exemple:

Each student was responsible for researching a location, writing the text and assembling the materials, writing the Markdown Code, etc to support a series of online map narratives about San Francisco




open source (2014-now) but no sandbox

StoryMapJS is a simple tool to help you tell stories with maps. If you're not a programmer, you don't need to spend much time on the GitHub page—instead, go StoryMapJS:

choose Gigapixel if:
To preface the instructions, the gigapixel feature of StoryMap is not as easy to use as most of our other tools because it requires hosting a folder of images on a web server. If you are unable to serve your images and make them accessible through the web, you won't be able to use the gigapixel feature of StoryMap.
You'll start with a large image for your gigapixel project. It doesn't actually need to be a gigapixel image, but images you take with your phone won't be big enough to be interesting. You need to know the image width and height in pixels as part of starting a gigapixel StoryMap.
Once you have a large image, export it as tiles. Windows and Mac users can use the Zoomify Express app. Or, if you have Photoshop, you can use its "Zoomify" export feature. (show me how) More technically-minded users can use command-line tools such as ZoomifyImage or VIPS.
This is when you'll need to be able to put your image folder onto a web server. You'll use the base url of the image folder for your exported tiles to make your gigapixel StoryMap.
After you have your image tiles up on a server, go to make a new StoryMap and choose the "gigapixel" button. (). Give your new project a name and enter the base url of your image tile folder on the web. Then enter the image width and height mentioned above, and you're ready to tell your gigapixel story. 

some users:
medium (texte is not available)

If you want information on creating JSON with your own code and embedding it, see the "Advanced" documentation on the StoryMap website:

Some users/demo(s) : many story maps



the best (pop-up and custom with cartDB import data):
with popup text click and hover (and custom)

The Voyage of the HMS Beagle: (classic)

1/history of the wall (Berlin)
from this template:

2/ evolution of some lakes:

an introduction to odyssey.js:


4/classic (Français):

Running odyssey.js with the md as an external file

(bird, BIRD TRACKING, open data)
many mapping resources
For this project I chose CartoDB, a cloud platform that lets users build map applications in a very easy way. Their new open-source tool named Odyssey.js let me create “The story of James Rodriguez”. You can use the Odyssey sandbox or get the code straight-away. I felt it would be better to download the files and start to write my code using Aptana Studio (web application IDE).
At this stage I had made changes to the code, so the next step would be find a place to keep my code safe and create a webpage to host my project. What to use? An easy question for me, since I have been meaning to take advantage of the huge benefits of Git for a long time, the open-source version control system (VCS). This would be the perfect time to do so.

I started from scratch, so the first thing I did was complete the TryGit offer by Code School and GitHub, an introductory free course makes up of 25 challenges to review the basic concepts of Git.

I joined GitHub but also after grasping some Git fundamentals from Pro Git book, a practical tutorial with examples and explanations by Scott Chacon.

I installed Git on Mac, set it up in my Terminal application with the git config command and fortunately I could create my first repository on GitHub.
I would say the most difficult part for me was move and commit my repository files to a webpage, but thanks to the GitHub tutorial I could generate a proper project site.

----project clhenrick

While each photo was taken with geo location tracking enabled, there was some poor management of the photographs collected by various teams. Granted the photos were logically grouped by census tract in folders on Google Drive, yet no unified naming convention was used to name the photographs.
For example, a sensible naming convention could have been something like:


The way in which the Urban Ecologies students then mapped the photos after they were collected was using Google Earth to produce a KML file of the photos’ locations. The problem with this approach is that for some reason unknown to me, the KML they produced only has ~700 features while there are a total of 1008 photos. I didn’t learn this until after the Urban Ecologies group shared then survey data, KML, and photos with me.

To make working with the photos easier I first uploaded all 1008 photos to Flickr which genorously gives all users a whole terabyte of free storage. I then used the Flickr API to grab the URLs and title for each uploaded photo and store them in a JSON file. For some reason I wasn’t able to see the geo data for the photos using this method which definitely would have helped save some time.

My original solution was to merge all the layers in the KML file, then convert it to a GeoJSON format and then join it to the Flickr JSON data using the joiner module for Node JS. Yet I soon realized this was not a good strategy as the KML file was missing locations for ~300 photos.

Thankfully one last solution occured to me; I could scrape the Exif metadata from the photos which includes latitude and longitude coordinates (only if geolocation was enabled from the camera).

The question was, how to do this?
Node JS to the Rescue
I ended up finding a Node JS library that worked pretty well called Exif. This module allows to retreive the Exif metadata in a JSON format. From here I wrote a script that iterates over the Exif data from all of the photos and outputs a GeoJSON file which I was then able to join to the Flickr JSON data. I ended up doing the join in CartoDB because they make it so easy to do.

The end result is that I successfully geocoded 1006 out of 1008 of the photos so that they can now be added to the Bushwick Community Map.

-------- and

For example, if your Gist URL is:

Replace “” with “” in the URL to view it:

The main source for your example is in index.html. This file can contain relative links to other files in your Gist, such as images, scripts or stylesheets. And of course you can use absolute links, such as CDN-hosted D3, jQuery or Leaflet. To explain your example, add a written in Markdown. (You can omit the index.html if you just want to write, too.)

Customize the appearance of your Block by adding a .block YAML configuration. The following options are supported:

license - a supported SPDX license code
height - the iframe height in pixels; defaults to 500
scrolling - yes if the iframe should scroll; defaults to no
border - no if the iframe should not have a border; defaults to yes
To add a thumbnail preview, add a 230×120 thumbnail.png to your Gist. For social media, you can also add a larger 960×500 preview.png or preview.jpg.


"histoire et géo"
réalisé en 2012, un blog avec mapping sur l'histoire de la révolte en Jamaique de 1760-1761 par Charles Warren (Professor of History and Professor of African and African-American Studies), y compris un mode diaporama (que du texte et des trajets des révoltés):