Responsive Map

This is a demonstration of how thematic map types can be changed responsively.

Why should a map theme change when screen size changes?

Interface design guidelines like this and this recommend minimum touchscreen target sizes. An interactive map marker's minimum clickable area can extend across other markers.

This is a prototype of one solution: aggregate map points into interactive clusters on small screens.

• This prototype is made with CARTO.js v3/3.15, which incorporates these other libraries.
• Clusters are created via a PostgreSQL query based on a modified CARTO algorithm, and styled with CartoCSS.
• Window functions are used to make clusters for small screens only.
• Different functionality can become enabled in smaller-width screens. Click on the four-arrow button to enable zoom, home (return original center and zoom), and legend toggle buttons.

Presented at NACIS Annual Meeting 2017

---