Posts Tagged ‘Leaflet JS’

I refined the prototype for the NYC Property Extractor web app a bit more with some minor UI / UX changes. The app now only lets the user select an area when they are zoomed into the neighborhood scale (greater than or equal to zoom 16). This limits the amount of data a user may select so that they won’t say be able to select all of Brooklyn and bog down the server or database. Other changes include panning and zooming the map to the area the user selects when they draw a shape or click on a tax lot.

Also see this post and this post for feedback and development of the web app.

cccc-screen-shot

A project I worked on for a digital zine Elia Vargas is putting together. I also submitted this to a call for entries for the Istanbul Biennial, which was announced by Stamen Design. You may view the live / interactive version here.

Culture Code Cities Cells

In the last several decades cultural production has shifted from being shaped primarily by geographically separate places to a world that has become continually influenced by interconnected networks. The pivotal factor being that mobile devices and the web now mediate how many people experience their lives. In response, the data generated from these devices and shared across the web are informing how users of the technology view the world from their constant connectivity to email, social media and instant messaging. Thus we may choose to work from about any location at any time. We learn about events as they are unfolding. Time is now experienced in milliseconds rather than large hourly blocks (what’s on my Twitter feed vs. how has the news progressed since last evening?)

In this map the shape of the continents has been created from geotagged photos on Flickr. Nations and states / provinces are shown as Voronoi cells, also generated from Flickr user data (in a given place do Flickr users think it’s administrative area A or B?) Ten minutes of geotagged tweets collected on September 4th are shown in their temporal sequence that contrast with standard time zones which highlight on a mouseover. This map is an attempt to ask if we should rethink how we define time and place. Just as time was standardized following the advent of telecommunications and the rail roads, our computerized networks suggest the future of time is not what it used to be.

Guess That NYC ‘Hood from Chris Henrick on Vimeo.

An in progress NYC neighborhood guessing game for the web that runs on Node JS via the Express framework and MongoDB with Leaflet JS, GeoJSON and Underscore JS. This was my final for Web 3: Javascript last semester, taught by Mani Nilchiani. The user navigates a map of New York City and selects neighborhoods that come from a dataset by PediaCities. Their guesses are checked against the neighborhood boundary data and then stored in a NoSQL database (MongoDB). If the guess is correct then the polygon for that neighborhood disappears from the map and they are color coded blue in the left part of the interface.

I’d like to make the game two player using web sockets so players could compete against one another, as well as add a timer to give a sense of urgency. There is also the possibility of making this game more in depth conceptually such as providing historical information about the neighborhood being guessed as commentary on gentrification in NYC.

Code for the project is available on GitHub.

 

So after a lot of work I’ve arrived at the second major update for my Major Studio Two project which tells the story of my brother Mike’s thru-hike on the Pacific Crest National Scenic Trail through an interactive web media experience.

Major milestones include:

1. Debugging a Leaflet map interaction where the animated marker (representing my brother’s position) triggers popups to open on the stationary markers.

2. Improving the interaction between scrolling and the animated marker start and stop using the JQuery Waypoint library. Now when the user scrolls, then animated marker will only start and stop when the user passes the correct chapter chronologically. I found that users tend to scroll up and down through the site fairly quickly to get an idea of long it is. Previously this would have caused the animated marker interaction to be buggy.

3. I’ve also managed to do some user testing for the site today which has proven to be super helpful. I will admit that all the folks that have helped me out have been DT students so I will also test the site with some people outside of my program for a different perspective. Here’s some feedback I’ve received so far:

1. The title bar doesn’t stand out enough and blends in with the rest of the site too much. The url of the site would also help with the title (no url as of yet…)

2. The Alan Watts quote on the opening slide is hard to read; try masking the area behind it with a transparent fill. (fixed)

3. Initially the user has no idea who the main character is. It would be helpful to add some background about Mike and the PCT in general prior to the start of his story.

4. The map transition from overview to the start of the trail should be slightly smoother and more seamless.

5. It’s somewhat confusing where the marker is going in relation to the content. Some suggestions to improve this are to break up each chapter’s path so that the marker will travel shorter distances. Then have photos or other text blocks trigger the marker to move. This would also help connect the particulars of the content with the map. Text blocks could even be highlighted so that when the user hovers or clicks on them their location is displayed in the map. Another suggestion was to repeat each chapter title over the top of the map so that the user is aware of the connection between the area being traveled and the map chapter.

6. When the marker is moving the map tends to shake. I’m not sure if this is something I have a lot of control over but will definitely think about.

7. Add a locator map to show the regional overview (ie: the current state or entire trail) so that the user has an idea of where on the whole trail Mike is.

8. Use Lazy Loading JQuery library to load the images as the user scrolls. This will help cut down on overall loading time and improve performance of the site.

9. Possibly consider adding menu options to the title bar so that the user can jump to certain chapters. This will be somewhat tricky to implement but may be necessary. Also adding forwards and backwards arrows could be helpful with navigating chapters. Worth testing though.

Positive feedback I recieved was that the site is very readable and would make a good narrative template overall. The first image is liked by everyone I’ve tested and serves as a good introductory slide.

Lastly, some updates from a house keeping perspective are to make the site cross-browser compatible (right now I’ve only been developing it using Google’s Chrome browser) and organizing the javascript code into separate modules / files.

Looks like some more updates and then another round of user testing will be needed. Looking forward to completing this project and submitting it to the student mapping competition for NACIS this year in Pittsburg, PA.

 

Triggering PopUps with an AnimatedMarker in Leaflet JS from Chris Henrick on Vimeo.

With the help of my web-developer guru friend Eric Brelsford, I’ve managed to figure out one of the last pieces of my Map Story project which was having the animated marker on the map open popups on stationary markers that represent points of interests, natural features, towns, etc. I’ve documented the code in a GitHub Gist which can be viewed live on this block. Excited to be wrapping this project up soon (hopefully!).

2014-03-14_15-26-01

2014-03-14_15-26-20

2014-03-14_15-26-30

2014-03-14_15-26-48

2014-03-14_15-27-04

For my major studio two class this semester I’m working on creating an interactive web piece that tells the story of my brother Mike’s epic trek across the Pacific Crest National Scenic Trail in 2013. My inspiration for creating this piece came from a story by the New York Times titled The Russia Left Behind which features a map that animates as the user scrolls through the content. I’m attempting a similar feel with my piece, but rather than using the D3 JavaScript library for rendering the map I’ve chosen to use a combination of Leaflet JS, a few plug-ins for Leaflet including the Animated Marker and Maki Markers plug-ins and JQuery Waypoints to tie the scrolling of the content to creating changes in the map. Last of all and perhaps most importantly the base map I’m using is courtesy of Stamen Design‘s Terrain Tiles. Stamen did a superb job of using open data from both the OpenStreetMap Project and USGS to beautifully render topography in North America. I’m taking advantage of this open-source tile set to add an important visual element to my brother’s story; the user has a detailed visual representation of the mountainous landscape my brother hiked through. In fact you can see how this plays out in the story itself when he describes “the climb”, the first of many ascents on his trip, which he mentions in the second chapter (Warner Springs to Idyllwyld).

For the content of this story I’m scraping text from my brother’s blog using a Python script that uses the beautiful soup library. The photos and videos he  has shared directly with me and generously gave me permission to use. Needless to say there’s an added editorial and curated component to this work from choosing the best photos and checking spelling and grammar. Being comfortable with editing writing from my undergraduate studies in Geography and Urban Studies is definitely helping here!

I’m almost set to do some user-testing, with the intention to get some feedback to improve the next iteration of the project. One last part I’d like to accomplish is for the animated marker to trigger pop-ups on the stationary markers as it passes them. I also have the task of editing and curating my brother’s writing which is another huge undertaking given the detail and length of writing from his blog posts.

The project in its current state can be viewed here, though at this time I have only tested it in the Chrome browser so it may not work in Safari, Firefox and Internet Explorer.

Screen Shot 2013-12-16 at 12.38.47 PM

sample of part 1: Comparing point of interest data from OSM and USGS


prospect-park-web-map-v2-detail

sample of part 2: Mapping non-normative features in Prospect Park

Screen Shot 2013-12-16 at 12.36.58 PM

sample of part 3: a non-euclidean map of Prospect Park

MS1 FINAL PROJECT PRESENTATION NOTES:

Part 1, Points of Interest, OSM vs. USGS: here

Part 2, Mapping the park from my point of view: here

Part 3, Moving beyond maps (OF): here

Final paper for project available here

We live in world inundated with maps yet we are never critical of maps, assuming that if it’s mapped it must be empirical and free from subjectivity.

Dennis Wood, The Power of Maps; “Mirror,” “window,” “objective,” “accurate,” “transparent,” “neutral”: all conspire to disguise the map as a …reproduction… of the world, disabling us from recognizing it for a social construction which, with other social constructions, brings that world into being out of the past and into our present.

This project seeks to address the following:

1. Maps have always been political in nature; the idea that maps embody interests of not only the mapmakers but also who they are serving, (developers, advertisers, etc.)

2. The unintended consequences of maps: Google Maps (web-mercator & their algorithm)

USGS criteria for what they represent on their topographic maps: 1. permanence of features, 2. cost of compiling information (aerial photography and field checking), and 3. map legibility.” (Wood)

How To Lie With Maps; “Not only is it easy to lie with maps, it’s essential…maps must tell white lies to avoid hiding critical information in a fog of detail the map must offer a selective, incomplete view of reality” (Monmonier, H2LWM)

Map Art: began in the 1920’s and was used by artists from different movements (surrealists, situationists, Fluxus, post-Minimalists) surrealist map of the world.

Wood again:

“…map artists are reclaiming the map as a discourse function for people in general. The flourishing of map art signals the imminent demise of the map as a privileged form of communication. The map is dead, long live the map!”

Counter / Critical Cartography: If maps are political why not use them for subversive purposes?
“All maps, whether institutional or counter-cartographic, embody and produce power relations” (Mogel)

Maps in the Digital Era:

Are now made from geospatial data. No data is ever completely “raw” or “objective” (Para-Empiricism, coined by Annette Kim). How do new forms of web-mapping and spatial data embody bias and subjectivity? Is new technology really allowing mapping to become more democratic or just pseudo-popular?

map 1: looking at bias in spatial data

> what does the USGS say about PP according to their criteria?

> what does OSM say about PP from their contributors?

map 2: what don’t normative maps show the reader?

>If maps are a snap shot in time how do we define permanence?

>What is deemed worthy of being mapped?

map 3: how can we make mapping more humanistic?

> is our perception of maps as objective and neutral too embedded to make them truly democratic?

> do we need something beyond the map?

using on the ground research methods to collect qualitative data (field papers, photography, video, sound)

A non-euclidean “map” of Prospect Park, Brooklyn. Created using a GoPro camera mounted to my head, iMovie for video editing and Open-Frameworks for combining the video shots into one screen space. Inspired by the theory of artist and cartographer Dennis Wood and work by Associate Professor of Urban Studies and Planning Annette Kim (of MIT’s SLAB): http://slab.scripts.mit.edu/wp/maps/narrative-maps/