Mapping A Rainy Day in Paris

For day 2 of the #30DayMapChallenge I've created an animated Map of A Rainy Day in Paris. Obviously this one isn't a map but it does use the Leaflet mapping library, GeoJSON and uses animated polylines. 

What you can see in my 'map' is a partial recreation of the painting Paris Street; Rainy Day by Gustave Caillebotte. You can see the painting itself on this instance of my Leaflet-IIIF-GeoJSON tool. Using the IIIF manifest of the painting from the Art Institute of Chicago I loaded the painting into Leaflet-IIIF-GeoJSON. I then simply used the drawing tools to trace over the painting and saved the results as a GeoJSON file.

I then animated the traced polylines in Leaflet using Ivan Sanchez's SnakeAnim plug-in. SnakeAnim is a utility which allows you to animate polylines on a Leaflet map. If you look at the code in my Map of A Rainy Day in Paris you will see that it is very messy. This is mainly because I simply cannibalized a previous map I had made with Leaflet and SnakeAnim. That cannibalized map was the First 50 Years of the London Underground, which uses SnakeAnim to replay the building of the first lines built on the London Underground network. 

If you are wondering why my map is back-to-front compared to the original drawing that has to do with the fact that Leaflet transposes the Latitude and Longitude coordinates from GeoJSON (this means that the drawing in my map is turned on its size). There is actually a simple fix to this (if you read the documentation). Unfortunately I couldn't remember what it was this morning so I cheated and simply flipped my map by 90 degrees (which causes some ugly problems if you try to pan around on a Map of A Rainy Day in Paris).