diff --git a/modeles_impression/Comparaison.html b/modeles_impression/Comparaison.html new file mode 100644 index 0000000000000000000000000000000000000000..537bb489e3bd0f33d1b19900553ea4f0717c9dc0 --- /dev/null +++ b/modeles_impression/Comparaison.html @@ -0,0 +1,180 @@ +<style> + @page { + margin: 0px; + } + + #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; + } + + .legend_object { + margin-bottom: 10px; + } + + .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> + Echelle: {{map_scale}} + </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" 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.legendName || legend.layerName }}</div> + <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;"> + <label class="legend_headline">Légende</label> + <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.legendName || legend.layerName }}</div> + <img ng-src="{{ legend.legendURL }}" class="legend_image" /> + </div> + </div> + </div> + <div id="map_legend_compare" ng-if="map_legend_compare"> + <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> + <!-- 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_compare_1" class="map_image_compare_mode" src="images/transparent.png"> + </div> + <div class="container" style="top: 15cm; right: 1.1cm;"> + <img id="map_image_compare_2" 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 class="container" style="top: 25.9cm; right: 1.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 id="footer_container" class="container" style="top: 26.7cm; left: 1.5cm"> + <div class="container" style="top: 0cm; left: 4.5cm;"> + <div class="footer_text"> + <label class="color_blue">Source(s):</label> + <label class="color_blue">{{layer_sources.join(', ')}}</label> + </div> + </div> + </div> +</div> \ No newline at end of file