Work Snippets

Customizable SVG Map Regions with CSS

Challenge

Forest Data Network needed a way to manage dozens of custom map images to include alongside its timber pricing reports for various regions in the Midwest.

Solution

Astuteo created SVG images with county IDs and paired them with categories in Craft CMS, allowing Forest Data Network to generate custom maps based on content alone.

Fdn reports 2x

Forest Data Network sells timber pricing reports for various regions of the Midwest – with each region composed of group of counties. Rather than asking the client to manage dozens of map images, we added a unique ID to each county polygon in an SVG image of the state. Then we paired those IDs with county categories in Craft CMS.

This enabled Forest Data Network to define, and redefine if necessary, the borders of their custom regions. By creating a new region and selecting its included counties, we were able to automatically create the highlighted state map and list the included counties without any additional content management required of the client.

Fdn svg maps 2x