12 :: I’d like to talk about the change in mapping

[The title of this post is a reference to an admittedly obscure bit of Canadian audio culture: Adam  Goddard’s The Change In Farming – track 17]

There has been a change in mapping.

Web design would be dramatically different if HTML had been born with some foresight for storytelling devices like maps. We certainly can’t blame web pioneers for focusing on type and images instead of maps, video, or canvas. But, because maps found their place at the table through browser plugins and third-party APIs, I find that they’re too often dismissed in the design process as elements that are just “plugged in.”

It’s easier to limit our web map designs to the what third parties offer straight out of the box:

  • A self-contained map embedded on a page, centered and zoomed to your taste
  • Map markers that, when selected, display pop-ups with more detail about that location
  • The ability to zoom and pan the map

In effect, web maps are typically assumed to be interactive worlds bound inside a box, whose only relation to the content around them is their subject matter…

So begins an illuminating post by Brandon Rosage called “Maps Should Be Crafted, Not “Plugged In.”  It was illuminating to me because it helped me understand why Leaflet.js is such a big deal.

Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 28 KB of JS code, it has all the features most developers ever need for online maps.

Leaflet is designed with simplicityperformance 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 still being accessible on older ones.

But as Brandon goes on state, Leaflet is similar to JavaScript libraries of Mapbox, ArcGIS, Polymaps, and Modest Maps, but:

Its most important contribution, in my experience, is its ability to treat map elements just like every other page element: something you can easily select and manipulate with CSS and Javascript.

While that capability may seem pedestrian, it’s quite powerful in practice. Tapping a marker on a map can trigger an event related to elements outside of the map, and vice versa. And once you begin playing with the power that offers, the traditional boundaries between the map and “the rest of the page” vanish.

And now, reading post like this one – Behind the scenes: Making a heatmap of gun seizures – are starting to make a little more sense I figure out when and why designers use they do – including leaflet.js.

Leave a Reply

Your email address will not be published. Required fields are marked *