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.
http://cartodb.github.io/odyssey.js/
Three possibilities:
http://cartodb.github.io/odyssey.js/documentation/#the-odyssey-sandbox
sandbox: http://cartodb.github.io/odyssey.js/sandbox/sandbox.html
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
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.
Sandbox:
- Start a new history
- Publish your story
- Save your story
http://cartodb.github.io/odyssey.js/documentation/#advanced-use-of-the-sandbox
See the syntax of markdown : http://daringfireball.net/projects/markdown/syntax
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 http://bl.ocks.org/, 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:
http://mapninja.github.io/CartoDB_Odyssey_Tutorial_for_Story_Maps/
Training:
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
https://cartodb.github.io/training/special/stanford-odyssey.html
fund:
http://www.knightfoundation.org/articles/testable-moment-for-media-innovation
http://blog.vizzuality.com/
http://www.vizzuality.com/projects/global-forest-watch
questions
http://gis.stackexchange.com/search?q=odyssey.js
http://gis.stackexchange.com/questions/124043/using-odyssey-js-with-cartodb-js
storymap.js
open source (2014-now) but no sandboxhttps://github.com/NUKnightLab/StoryMapJS
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:
https://storymap.knightlab.com/
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:
http://ursilaa.tumblr.com/post/95926012537/understanding-storymap-js-101
medium
http://s3.amazonaws.com/uploads.knightlab.com/storymapjs/bf3baae30cab35dca6e1e3d208a86c1f/karpatyrocks/index.html (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:
https://storymap.knightlab.com/advanced/
Some users/demo(s) : many story maps
storymap.js
https://storymap.knightlab.com/examples/aryas-journey/https://storymap.knightlab.com/examples/bosch-garden/
odyssey.js
the best (pop-up and custom with cartDB import data):
1/
http://bl.ocks.org/anonymous/raw/409cb9de4c713e082dee/#0
http://mapninja.github.io/CartoDB_Odyssey_Tutorial_for_Story_Maps/
https://github.com/mapninja
2/
with popup text click and hover (and custom)
http://web.stanford.edu/~maples/maps/odyssey/odyssey.html
http://www.burdgis.com/cumberShaw/
http://www.burdgis.com/blog/archive/map-stories/
-->http://multimedia.nydailynews.com/css/maps/48hours/index3.html?123456789000
http://multimedia.nydailynews.com/css/maps/shootings-2/index.html
The Voyage of the HMS Beagle:
http://bl.ocks.org/anonymous/raw/7d67c4ef3348192da613/
http://seeread.info/experiments/santiago/ (classic)
1/history of the wall (Berlin)
http://bl.ocks.org/namessanti/e7432a85159fca12978e
from this template:
http://bl.ocks.org/anonymous/f888598531665f34f864
2/ evolution of some lakes:
http://bl.ocks.org/auremoser/raw/d2e883314470768a07f8/
https://gist.github.com/auremoser/c644c9be4879498a429f
an introduction to odyssey.js:
https://gist.github.com/auremoser/c644c9be4879498a429f
3/special:
http://bl.ocks.org/anonymous/raw/2f1e9a5a74ceeb88e977/
4/classic (Français):
https://gist.github.com/jonathanlurie/0b8785bc83b56693c089
-----
http://blockbuilder.org/search#text=odyssey.js
---
https://gist.github.com/lokal-profil/8427ce6a1acda3c34f15
Running odyssey.js with the md as an external file
----
https://carto.com/blog/odyssey-js-examples-in-the-wild/
(bird, BIRD TRACKING, open data)
many mapping resources
https://gist.github.com/auremoser/da1b8fe8de23fe6365923b1a4d8f7b7d
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).
http://www.aptana.com/
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.
https://www.codeschool.com/courses/try-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.
https://git-scm.com/book/en/v2
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.
https://pages.github.com/
----project clhenrick
http://clhenrick.github.io/BushwickCommunityMap/https://github.com/clhenrick/BushwickCommunityMap
http://clhenrick.github.io/data/web-scraping/node/js/web-mapping/flickr-api/cartodb/2015/05/29/scraping-photo-metadata/
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:
<building-number>-<street>-<census-tract>.jpg
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.
--------
gist.github.com and bl.ocks.org
For example, if your Gist URL is:https://gist.github.com/mbostock/1353700
Replace “gist.github.com” with “bl.ocks.org” in the URL to view it:
https://bl.ocks.org/mbostock/1353700
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 README.md 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.
Ref:
http://bl.ocks.org/-/about
---------
PS:
"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):
http://revolt.axismaps.com/map/
No comments:
Post a Comment