onsvisual/maptemplates

ONS Map templates

Common map templates

Contains map templates:

• Simple map
• Map with line chart showing change over time
• Multiple maps
• Multimap with simple bar chart
• Multimap with vertical scale
• Simple map with beeswarm
• Simple map with stacked bar chart
• Mutiple characteristics map
• Side by side map
• Hexmap
• LSOA house price map
• MSOA deaths map
• MSOA simple map
• MSOA multimap

maptemplates's Issues

Use area names not codes for analytics event labels

Makes it much easier to read places people have searched for in analytics

Rounding with Jenks breaks

When using Jenks breaks, the legend will round to say the nearest integer while the hover value will be to one decimal. You might have the situation where the highest value is 43.3 so the legend will stop at 43 but the value on hover will be 43.3 so will be off the legend

change over time - Increased margin required above line chart

Small but fiddly enough for it not to be worth it for me to sort out now.

svg for line chart needs enlarging at the top because numbers appear (too far?) above the line and can get cut off when they go off the svg.

might help to play with #keyunit margins - might have to change some position css like in dvc895 international comparisons map.

characteristics map

Update the api key (style.json file)

upgrade to mapbox v1.13

Add preset zoom/location on load

Can be achieved by adding details to the URL and then picking zoom/latlng up on load.

Change over time no data colour

It's a bit dark

Mulimap Firefox tab control bug

Multimap template in Firefox -
Once a geographical area is selected, tabbing back up to variable selection moves the area text so that it's mostly out of view.
(minor aside but it might be more intuitive for the deselection cross to come afterwards in the tabbing order)

Deselect with keyboard control bug

When you select an area on the map and click the cross to deselect, the area's value is removed from the key, the area's outline disappears and the map zooms out to view the whole country.

When you select an area on the map and use keyboard controls to navigate to the cross and deselect, the area's value remains on the key along with the area's outline on the map, with no change in zoom.

More accurate legend colours

In the Simple Map template (and possibly others?), the colours in the legend don't exactly match the map colours.

One way to fix this would be to add a rectangle that is the map's background colour (#f2f3f0) just behind the legend rectangles, and to make the legend rectangles' opacity the same as the map's fill opacity (0.7). The result looks like this:

Not much different!

Remove firsthover

firsthover is a variable that only creates an event for analytics if it's the first time someone hovers over the map (I think!).

However, this is unnecessary since analytics show separately 'Total events' and 'Unique events', meaning that if we remove this unique events will still tell us how many 'firsthovers' happen and total events will tell us how many areas people hover over around the map before getting bored and moving on.

Beeswarm map Source bug

On mobile, map needs to have position:relative and the source needs to be moved. The source is currently behind the map.

add source to characteristics map

CurrPoint on change over time

Change over time is paused and variable changed using the top button, currValue updates but currPoint doesn't

Aria-hidden

Aria-hidden is applied to the full content although this is not being properly recognised in Chrome. Safari and FF act as expected.

Put the source in the config

Use d3.geoBounds() instead of turf.extent()?

turf.extent(areas)
// [-8.607227544131755,49.91001820137803,1.7629159475701766,60.84535348677859]
d3.geoBounds(areas)
// [[-8.607227544131755,49.91001820137803],[1.7629159475701766,60.84535348677859]]

It looks like we could avoid the 546 kB Turf JavaScript file by using d3.geoBounds.