Cartographer v6.2: Improved map interface

We’re excited to announce Cartographer v6.2, featuring a new, streamlined map interface. The new UI takes less screen real estate, giving your maps more space to shine! Read on to find out what we changed, and read our updated help pages for a detailed step-by-step guide.

What problems have we addressed?

Here’s our old map page. We were pretty happy with it, except for a few nagging problems:

Problem 1: Poor use of space

Notice how the inspector and legend panels on the left and right of the map took up quite a lot of space? This wasn’t a problem on larger monitors, but on smaller screens it started to encroach on the main attraction – the map:

On phones, the panels took up way too much space to the point where they overlapped and were almost unusable:

We re-use the same interface in our embeddable map widgets, which tend to be about the same size as a phone. This made performance on small screens even more important to us.

Problem 2: Related concepts in unrelated places

The old map interface had evolved over time, and workarounds on top of workarounds for browser and layout bugs had meant that some related aspects of the UI had ended up in different places.

For example, we used three buttons, Data, Photos, and Options, to toggle between modes in the inspector panel. But the inspector was on the left of the screen and the buttons were in the bottom right!

Further more, we’d added a way to toggle off the to save screen space, but it involved clicking the selected mode button again, which almost nobody guessed was a thing!

Problem 3: Performance

As Cartographer has grown, so have our maps, and the map interface has paid the price in terms of performance. Modern web browsers have the power required to keep everything running smoothly, but our oldest supported browser, poor old Internet Explorer 11, is barely able to keep up.

Part of the problem is that we’re updating a lot of things at once. Every time the user pans the map we load in more map markers and update any visible charts. Our map and chart widgets, Leaflet and jqPlot, are both pretty heavyweight and there were sometimes two charts on-screen at once.

What have we done to fix things?

Fix 1: More screen space

The most obvious change in the new interface is that the legend panel has gone from the bottom right:

We’ve done this by integrating the map legends into the inspector pane. By selecting an attribute in the inspector, you simultaneously colour code all of the markers and open the corresponding legend:

Switching from a two- to a one-panel interface saves huge amounts of space and makes the map much more usable on small screens. We added a dedicated hide inspector button to toggle the inspector off on phones and small map widgets:

Fix 2: Put related things together

Because everything is in one panel, we don’t need the Data, Photos, Options, and Legend buttons in the bottom right of the screen. We’ve moved all of these controls inside the inspector.

The bars in the distribution chart correspond to the items in the legend, so we’ve moved the chart onto the same panel as the legend:

Fix 3: Better performance through fewer charts

One disadvantage of the new layout was that we had to put three large things next to one another on the same panel: the distribution chart, the timeline, and the legend.

This had the disadvantage that the legend was sometimes pushed off the bottom of the page. To work around this we introduced a toggle so that only one chart is displayed at a time:

As an added bonus, we actively remove the charts from the web page when they’re not visible, which stops us having to update them as the user pans and zooms the map. This sped the interface up, which was particularly welcome in our old friend IE 11.

Conclusion

Maps are vitally important to our users for many reasons, including data analysis, training, and public engagement. This update streamlines Cartographer’s map interface, simplifies it, and makes it faster and more usable.

And we’re not done yet — we have some updates coming down the pike that will continue to improve the map interface, making it faster, prettier, and more powerful for all. Watch this space 🙂