Modèles d'impression

Les Modèles d'impression sont des templates utilisés pour obtenir le rendu principal de l'impression. Ils permettent de définir et ajuster la disposition, le contenu et le format des cartes imprimées en assurant une présentation cohérente et personnalisée selon les besoins spécifiques de l'utilisateur.

Pour créer un modèle, cliquer sur Ajouter depuis le mode Impressions (déprécié) > Modèle d'impressions (déprécié) et remplir l'ensemble des informations demandées par le formulaire (un nom, un format de page, une orientation, les groupes d'utilisateurs autorisés à utiliser ce modèle, ainsi qu'une définition HTML).

Chaque modèle d'impression peut être personnalisé à partir de variable afin de récupérer les images de la carte, la légende, des informations sur l'utilisateur qui lance l'impression...

Voici les différentes variable et balises utilisables dans les impressions :

1. Variables / balises correspondant aux images

3 balises sont disponibles :

  • map_image : Image de la carte. Balise à intégrer dans un élément HTML de type img.

  • map_overview : Image dde l'overview (mini carte). Balise à intégrer dans un élément HTML de type img.

  • map_legend : Image de la légende. Balise à intégrer dans un élément HTML de type div.

Dans le cas d'une carte en comparaison, il est aussi possible de récupérer la carte et la légende comparée. Dans ce cas, les noms des balises sont un peu différents :

  • map_image_compare_1 : Image de la carte de gauche. Balise à intégrer dans un élément HTML de type img.

  • map_image_compare_2 : Image de la carte de droite. Balise à intégrer dans un élément HTML de type img.

  • map_legend_compare : Image de la légende de la carte de comparaison. Balise à intégrer dans un élément HTML de type div.

Exemple permettant d'afficher l'image de la carte dans une impression (balise map_image) :

Partie HTML :

<img id="map_image" class="map_image" src="images/transparent.png">

La taille de l'image est définie dans la partie CSS de la définition du modèle :

.map_image {
	background-color: #D8D8D8 !important;
	height: 22cm;
	width: 14cm;
	border: 1px solid black;
}

Exemple permettant d'afficher la légende de la carte dans une impression (balise map_image) :

Partie HTML :

<!-- Mode normal -->
<div ng-if="!compare_mode" class="container" style="top: 5cm; left: 1.5cm;">
	<label class="legend_headline">Légende</label><br>
	<div id="map_legend" ng-if="map_legend">
		<div ng-repeat="legendLayer in map_legend">
			<div ng-repeat="legend in legendLayer.legendObjects" class="legend_object">
				<div class="legend_layer_name">{{ legend.layerName }}</div><br>
				<img ng-src="{{ legend.legendURL }}" class="legend_image" />
			</div>
		</div>
	</div>
</div>

<!-- Mode comparaison -->
<div ng-if="compare_mode" class="container" style="top: 5cm; left: 1.5cm;">
	<div id="map_legend" ng-if="map_legend">
		<label class="legend_headline">Légende 1</label>
		<div ng-repeat="legendLayer in map_legend">
			<div ng-repeat="legend in legendLayer.legendObjects" class="legend_object">
				<div class="legend_layer_name">{{ legend.legendName }}</div>
				<img ng-src="{{ legend.legendURL }}" class="legend_image" />
			</div>
		</div>
	</div>
	<div id="map_legend_compare" ng-if="map_legend_compare">
		<label class="legend_headline">Légende 2</label>
		<div ng-repeat="legendLayer in map_legend_compare">
			<div ng-repeat="legend in legendLayer.legendObjects" class="legend_object">
				<div class="legend_layer_name">{{ legend.legendName || legend.layerName }}</div>
				<img ng-src="{{ legend.legendURL }}" class="legend_image" />
			</div>
		</div>
	</div>
</div>

Partie CSS :

.map_legend {
	width: 3cm;
	margin-top: 16px;
}

#map_legend_compare {
	margin-top: 100px;
}

.map_legend_compare_mode {
	width: 3cm;
	margin-top: 16px;
}

2. Autres variables disponibles

En plus de pouvoir intégrer dynamiquement des images dans l'impression, vMap donne la possibilité d'intégrer de nombreuses valeurs faisant référence :

  • à l'utilisateur qui réalise l'impression

  • à des informations de la carte

  • ou encore à la date

Ces informations doivent être ajoutées dans la définition HTML encadrées par des accolades (Exemple {{date}}) :

  • map_scale : échelle de la carte imprimée

  • date : date du jour

  • date_hour : date + heure du jour

  • layer_sources : sources des couches

  • map_legend: légende de la carte principale

  • user_name : nom de l”utilisateur

  • user_login : login de l”utilisateur

  • user_company : société de l”utilisateur

  • user_department : service de l”utilisateur

  • user_email : adresse mail de l”utilisateur

  • user_id : identifiant de l'utilisateur

3. Directives Utilisables dans la définition modèle :

  • ng-f="map_legend" : Cette directive AngularJS conditionne l'affichage de la légende. Le contenu n'est affiché que si la variable map_legend existe et contient des données.

  • ng-repeat="legendLayer in map_legend" : Cette directive permet de parcourir chaque élément de la variable map_legend. Pour chaque élément (qui représente un calque de la légende), une nouvelle <div> est créée.

  • ng-repeat="legend in legendLayer.legendObjects" : À l'intérieur de chaque calque de légende, cette directive parcourt les objets de la légende (les éléments individuels à afficher). Pour chaque objet, une nouvelle <div> est créée avec la classe legend_object.

  • {{ legend.layerName }} : Cette interpolation affiche le nom du calque de la légende.

  • ng-src="{{ legend.legendURL }}" : Cette directive AngularJS lie dynamiquement l'URL de l'image de la légende à l'attribut src de la balise <img>. Cela permet d'afficher l'image correspondante à chaque élément de la légende.