Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision

Target

Select target project
  • Documentation/doc_module_vmap
  • Gwendal/doc_module_vmap
  • carto/doc_module_vmap
3 results
Select Git revision
Show changes
Commits on Source (2)
......@@ -100,6 +100,153 @@ Comme je l'ai stipulé précédemment il y a plusieurs identifiants clés permet
- **map_overview** : si vous donnez cet identifiants à une balise **<img\>** alors la carte de supervision y sera inscrite.
- **map_legend** : si vous donnez cet identifiants à une balise **<div\>** alors le contenu de la légende sera copié dedans.
### Cartes en comparaison
Lors de l'utilisation du mode comparaison seule la carte principale (située à gauche) est imprimée par défaut, pour imprimer la carte de droite il faudra utiliser les balises **map_image_compare** et **map_legend_compare**.
Une fois ceci fait on retrouvera la carte secondaire sur toutes les impressions qu'on soit ou pas en mode comparaison. Pour rendre ceci variable et afficher la carte secondaire uniquement si le mode comparaison est actif la variable scope **compare_mode** utilisée avec **ng-if** permettra de conditionner l'affichage.
```HTML
<style>
#A4_print_template {
width: 21cm;
font-family: arial;
position: absolute;
}
#map_overview {
background-color: #D8D8D8 !important;
height: 4cm;
width: 4cm;
border: 1px solid black;
}
.map_image {
background-color: #D8D8D8 !important;
height: 22cm;
width: 14cm;
border: 1px solid black;
}
.map_image_compare_mode {
background-color: #D8D8D8 !important;
height: 11cm;
width: 14cm;
border: 1px solid black;
}
.map_legend {
width: 3cm;
margin-top: 16px;
}
.map_legend_compare_mode {
width: 3cm;
margin-top: 16px;
}
.color_blue{
color: #424A96 !important;
}
.logo {
height: 2cm;
}
.container {
position: absolute;
}
#header_container{
width: 18cm;
height: 2.5cm;
background-color: #D8D8D8 !important;
}
#footer_container{
width: 18cm;
height: 1cm;
background-color: #D8D8D8 !important;
}
.header_content{
margin-left: 10px;
}
.title{
display: block;
font-size: 24pt;
font-weight: bold;
margin-top: 0.8em;
}
.headline{
font-weight: bold;
font-size: 14pt;
}
.legend_headline{
font-weight: bold;
font-size: 14pt;
color: black;
}
.footer_text{
font-weight: bold;
font-size: 10pt;
margin: 0.3cm;
}
</style>
<div id="A4_print_template">
<div id="header_container" class="container" style="top: 1.2cm; left: 1.5cm;">
<div class="container" style="top: -0.5cm; left: 0cm;">
<div class="header_content title color_blue">{{title}}</div>
<div class="header_content headline color_blue">{{headline}}</div>
</div>
<div class="container" style="top: 0.2cm; right: 10px;">
<img class="logo" src="data:image/png;base64,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">
</div>
</div>
<!-- Mode normal -->
<div ng-if="!compare_mode" class="container" style="top: 5cm; left: 1.5cm;">
<label class="legend_headline">Légende</label>
<div id="map_legend"></div>
</div>
<!-- Mode comparaison -->
<div ng-if="compare_mode" class="container" style="top: 5cm; left: 1.5cm;">
<label class="legend_headline">Légende</label>
<div id="map_legend"></div>
<div id="map_legend_compare"></div>
</div>
<!-- Mode normal -->
<div ng-if="!compare_mode" class="container" style="top: 4cm; right: 1.1cm;">
<img id="map_image" class="map_image" src="images/transparent.png">
</div>
<!-- Mode comparaison -->
<div ng-if="compare_mode">
<div class="container" style="top: 4cm; right: 1.1cm;">
<img id="map_image" class="map_image_compare_mode" src="images/transparent.png">
</div>
<div class="container" style="top: 15cm; right: 1.1cm;">
<img id="map_image_compare" class="map_image_compare_mode" src="images/transparent.png">
</div>
</div>
<div class="container" style="top: 24.5cm; left: 1.7cm; z-index: 9;">
<!-- Pour afficher l'overview utiliser id="map_overview-->
<img id="map_overview">
</div>
<div id="footer_container" class="container" style="top: 26.7cm; left: 1.5cm">
<div class="container" style="top: 0cm; right: 0cm;">
<div class="footer_text">
<label class="color_blue">Source(s):</label>
<label class="color_blue">{{sources}}</label>
</div>
</div>
<div class="container" style="top: 0cm; left: 5.5cm;">
<!-- Pour afficher l'échelle actuelle utiliser {{map_scale}}-->
<div class="footer_text">
<label class="color_blue"></label>
<label class="color_blue">Echelle: {{map_scale}}</label>
</div>
</div>
</div>
</div>
```
![styles impression](../images/impressions_7.jpg)
### Variables disponibles
Tous les paramètres qui vous affecterez depuis le mode Paramètres seront interprétés comme des variables et pourront être incluses dans le résultat en les mettant entre crochets dans le définition.
......
images/impressions_7.jpg

308 KiB