Widget Tricks - Static maps, a quick introduction

When your goal is to share a precise analysis of a theme, such as employment or demography, for given administrative territories, you may want to disable all interactions with the map. You will even probably want to have overseas territories right next to the other territories in order to visualize immediately how the measurement varies across these administrative areas.

In this situation, you might prefer a static colored picture over a classic map widget. The resource below shows you how to create such static analyses of administrative divisions.

Static maps with colored SVG images

Powered by ods-picto and ods-color-gradient, an example of combinaison to display a fast and lightweight map for analytic purposes

NOTE: Note: this resource showcase positionning possibilities and demonstrate how flexible SVG usage can be. On the other hand beware that reusing this code can be difficult. If you feel confortable with ng-model and ng-class you can copy and simplify it by removing unecessary positions and code.

SVG Paths styling

Path and other geometries can easily be styled with few CSS lines.

SVG Paths + Text

Hover paths to display it’s label.

SVG Paths + Text with multiple sources

Same example with different multiple picto sources for overseas or zoom-in.

The complete example - France with overseas regions, departments and cities + text hover paths

Click on HTML or CSS tab to edit and see the results. The code proposes only one positioning, therefore it’s lighter and cleaner.