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-modelandng-classyou can copy and simplify it by removing unecessary positions and code.
Dataset in use: liste-des-departements-metropole-dom (See it on userclub domain)
Fields in use:
| code_text | name | code (numeric) |
|---|---|---|
| 04 | Alpes-de-Haute-Provence | 4 |
| 42 | Loire | 42 |
| 57 | Moselle | 57 |
| 15 | Cantal | 15 |
<ods-dataset-context context="ctx"
ctx-dataset="liste-des-departements-metropole-dom"
ctx-domain="userclub">
<div ods-color-gradient="analysis"
ods-color-gradient-context="ctx"
ods-color-gradient-x="code_texte"
ods-color-gradient-serie="MAX(code)"
ods-color-gradient-logarithmic-scale-factor="1"
ng-init="idf = 'svgmap-idf-top-left';
drom = 'svgmap-drom-right';">
<div class="ods-box">
<span>
Position de l'île de France
</span>
<select ng-model="idf">
<option value="svgmap-idf-top-left">Haut gauche</option>
<option value="svgmap-idf-top-right">Haut droit</option>
<option value="svgmap-idf-none">Désactivé</option>
</select>
<br/>
<span>
Position des départements et régions d'outre mer
</span>
<select ng-model="drom">
<option value="svgmap-drom-left">Gauche</option>
<option value="svgmap-drom-right">Droite</option>
<option value="svgmap-drom-bottom">En dessous</option>
<option value="svgmap-drom-none">Désactivé</option>
</select>
</div>
<div class="svgmap-france">
<div class="svgmap-drom"
ng-class="drom">
<div class="svgmap-martinique">
<ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_mtq.svg'"
color-by-attribute="analysis.colors"></ods-picto>
</div>
<div class="svgmap-reunion">
<ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_reu.svg'"
color-by-attribute="analysis.colors"></ods-picto>
</div>
<div class="svgmap-guyane">
<ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_guf.svg'"
color-by-attribute="analysis.colors"></ods-picto>
</div>
<div class="svgmap-guadeloupe">
<ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_glp.svg'"
color-by-attribute="analysis.colors"></ods-picto>
</div>
<div class="svgmap-mayotte">
<ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_myt.svg'"
color-by-attribute="analysis.colors"></ods-picto>
</div>
</div>
<div class="svgmap-idf"
ng-class="idf">
<ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_idf.svg'"
color-by-attribute="analysis.colors"></ods-picto>
</div>
<div class="svgmap-francemetro">
<ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_fxx.svg'"
color-by-attribute="analysis.colors"></ods-picto>
</div>
</div>
</div>
</ods-dataset-context>
/******** SVG MAPS *************/
/************ Conteneur France ***************/
.svgmap-france {
width: 500px;
margin: auto;
position: relative;
background-color: white;
}
/* France Métropole */
.svgmap-francemetro {
padding: 0;
}
/********** DROM ************/
/* Position en colonne left */
.svgmap-drom-left ~ .svgmap-francemetro {
padding-left: 17%;
}
.svgmap-drom.svgmap-drom-left {
display: flex;
flex-direction: column;
position: absolute;
left: 1%;
top: 2%;
width: 12.1%;
}
/* Position en colonne right */
.svgmap-drom.svgmap-drom-right {
display: flex;
flex-direction: column;
position: absolute;
right: 1%;
top: 3%;
width: 11%;
}
/* Position en ligne bottom */
.svgmap-drom-bottom ~ .svgmap-francemetro {
padding-bottom: 16%;
}
.svgmap-drom.svgmap-drom-bottom {
display: flex;
flex-direction: row;
position: absolute;
left: 5%;
right: 5%;
bottom: 1%;
width: 90%;
height: 17%;
}
.svgmap-drom.svgmap-drom-bottom > * {
margin: 2%;
}
/****** Ile de France ZOOM ********/
/* Position Top Left */
.svgmap-idf-top-left ~ .svgmap-francemetro {
padding-top: 7%;
padding-left: 7%;
}
.svgmap-idf.svgmap-idf-top-left {
position: absolute;
left: 2%;
top: 2%;
width: 20%;
}
/* Position Top Right */
.svgmap-idf.svgmap-idf-top-right {
position: absolute;
right: 10%;
top: 3%;
width: 20%;
}
.svgmap-idf-top-right ~ .svgmap-francemetro {
padding-top: 8%;
}
/* DROM Right + IDF Top Right */
.svgmap-drom-right ~ .svgmap-idf-top-right ~ .svgmap-francemetro {
padding-right: 3%;
}
.svgmap-drom-right ~ .svgmap-idf-top-right {
right: 16%;
}
/* DROM Right + IDF Top Left */
.svgmap-drom-right ~ .svgmap-idf.svgmap-idf-top-left {
left: 3%;
}
/* DROM Left + IDF Top Right */
.svgmap-drom-left ~ .svgmap-idf-top-right {
right: 1%;
}
/* DROM Left + IDF Top Left */
.svgmap-drom-left ~ .svgmap-francemetro ~ .svgmap-idf.svgmap-idf-top-left {
padding-top: 11%;
padding-left: 20%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left ~ .svgmap-francemetro{
padding-left: 22%;
padding-top: 5%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left {
left: 17%;
width: 17%;
}
/* Some CSS override to manage picto sizes */
.ods-svginliner__svg-container {
height: 100%;
}
.odswidget.odswidget-picto {
height: 100%;
}
/* None styles */
.svgmap-idf-none, .svgmap-drom-none {
display: none;
}