Select Git revision
layertree.html
layertree.html 18.54 KiB
<div ng-if="!$root.is_mobile" id="layertree-button">
<div class="list-group-item active pointer layertree-button-content"
title="Affiche les jeux de données"
collapse="{{ctrl.layerstree_collapsed === true ? 'out' : 'in'}}"
data-target="#layertree"
onclick="oVmap.getMapManager().collapseElement(this)">
<span class="icon-database list-group-icon"></span>
<span>Jeux de données</span>
<span class="list-group-icon2" ng-class="{'icon-keyboard_arrow_down':ctrl.layerstree_collapsed !== true, 'icon-keyboard_arrow_right':ctrl.layerstree_collapsed === true}"></span>
</div>
</div>
<div id="layertree" class="layers-tool" collapse="{{ctrl.layerstree_collapsed === true ? 'out' : 'in'}}">
<ul class="nav nav-tabs layerstree-nav left" ng-show="$root.compare_enabled">
<li ng-class="{'active' : activeMap == 1}">
<a href="#" ng-click="activeMap=1;ctrl.resize()">Carte 1</a>
</li>
<li ng-class="{'active' : activeMap == 2}">
<a href="#" ng-click="activeMap=2;ctrl.resize()">Carte 2</a>
</li>
</ul>
<div class="indicators">
<span class="text-info icon-eye" style="font-size: 18px;line-height: 0" title="Définit si la couche est visible"></span>
</div>
<ul class="tree" ng-show="activeMap == 1 || !$root.compare_enabled">
<div ng-repeat="node in tree.children| orderBy : 'name'" ng-if="node.view === undefined">
<!-- Service -->
<div class="layerstree-phather">
<div class="tree-father-collapse-btn service-name left" data-toggle="collapse" data-target="#tree_element_{{$id}}" onclick="setTimeout(function () {
oVmap.resizeLayerTools(true)
}, 500)" title="{{node.name}}">
{{node.name}}
</div>
<div class="checkbox checkbox-info inline-checkbox right"
ng-class="{'checkbox_indeterminate': node.visible === null}">
<input id="service_{{$id}}_visible"
ng-init="node.visible = ctrl.isGroupVisible(node)"
ng-model="node.visible"
ng-model-options="{getterSetter: true}"
ng-click="ctrl.setGroupVisible(node)"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si le groupe est visible">
<label for="service_{{$id}}_visible"
style="cursor:pointer"
title="Definit si le groupe est visible"></label>
</div>
</div>
<!-- Calque -->
<ul id="tree_element_{{$id}}" class="collapse layers-tree-ul tree-element" ng-class="{'in': ctrl.layers_collapsed !== true}">
<div ng-repeat="layer in node.children">
<li>
<ul class="list-group-item layertree-item auto-height">
<!-- Nom du calque -->
<div class="layer-name layer-name-tree" title="{{layer.name}}">{{layer.name}}</div>
<div class="layer-checkboxes">
<button type="button"
class="btn btn-xs margin-sides-10 hidden"
ng-click="layer.olLayer.getSource().refreshWithTimestamp()">
<span class="glyphicon glyphicon-refresh"></span>
</button>
<div type="button" class="btn btn-xs layer-menu-button" ng-click="ctrl.toggleLayerMenu(layer, $event)">
<span ng-class="{'icon-filter': layer.olLayer.get('is_filtered'), 'icon-format_list_bulleted': !layer.olLayer.get('is_filtered')}"></span>
</div> <!-- Checkbox visible -->
<div class="checkbox checkbox-info inline-checkbox" style="z-index: 10;">
<input id="{{layer.$$hashKey}}_visible_order_checkbox"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si le calque est visible"
ng-checked="layer.olLayer.values.visible === true"
ng-click="ctrl.setVisible(layer.olLayer, !layer.olLayer.values.visible);node.visible = ctrl.isGroupVisible(node)">
<label for="{{layer.$$hashKey}}_visible_order_checkbox" style="cursor:pointer" title="Definit si la couche est visible"></label>
</div>
<!-- Checkbox interrogation GetFeatureInfo -->
<div class="checkbox checkbox-success inline-checkbox"
ng-if="layer.olLayer.values.is_queryable_getfeatureinfo === true && ctrl.properties.selection.enable_getfeatureinfo === true"
ng-class="{'checkbox_indeterminate': ctrl.isLayerWMSQueryable(layer.olLayer) === null}">
<input id="{{layer.$$hashKey}}_wms_queryable_checkbox"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si le calque est interrogeable par requête WMS"
ng-disabled="layer.olLayer.values.visible === false"
ng-checked="ctrl.isLayerWMSQueryable(layer.olLayer)"
ng-click="ctrl.toggleLayerWMSQueryable(layer.olLayer)">
<label for="{{layer.$$hashKey}}_wms_queryable_checkbox" style="cursor:pointer" title="Definit si le calque est interrogeable par requête WMS"></label>
</div>
</div>
</ul>
</li>
<div class="dropdown-menu layer-menu" ng-class="{'block': layer.displayedMenu === true}">
<div class="layer-menu-list">
<li ng-if="layer.olLayer.get('is_filtered')" ng-click="ctrl.displayFilterLayerModal(layer.olLayer)">
<a href="#">
<span class="icon-filter"></span>
Filtre
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-xs-6">
<span class="icon-star-half"></span>
Transparence
</div>
<div class="col-xs-6">
<div class="layer-menu-list-slider">
<input data-app-layer-opacity-slider="" id="slider_layer_form_{{layer.$$hashKey}}" type="text">
</div>
</div>
</div>
</a>
</li>
<li ng-if="layer.olLayer.get('type') === 'imagewms' || layer.olLayer.get('type') === 'tilewms'"
ng-repeat="sublayer in layer.olLayer.get('sublayers')">
<div class="sublayer-checkboxes">
<!-- Checkbox interrogation GetFeatureInfo -->
<div class="checkbox checkbox-success sublayer-checkbox inline-checkbox" ng-if="layer.olLayer.values.is_queryable_getfeatureinfo === true && ctrl.properties.selection.enable_getfeatureinfo === true">
<input id="{{layer.$$hashKey}}_sublayer_{{sublayer}}_wms_queryable_checkbox"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si la couche est est interrogeable par requête WMS"
ng-checked="ctrl.isSublayerWMSQueryable(layer.olLayer, sublayer)"
ng-disabled="layer.olLayer.values.visible !== true"
ng-click="ctrl.toggleSublayerWMSQueryable(layer.olLayer, sublayer)">
<label for="{{layer.$$hashKey}}_sublayer_{{sublayer}}_wms_queryable_checkbox" style="cursor:pointer" title="Definit si la couche est interrogeable par requête WMS"></label>
</div>
<!-- Checkbox visible -->
<div class="checkbox checkbox-info sublayer-checkbox inline-checkbox">
<input id="{{layer.$$hashKey}}_sublayer_{{sublayer}}_visible_checkbox"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si la couche est visible"
ng-checked="ctrl.isSublayerActive(layer.olLayer, sublayer)" ng-disabled="layer.olLayer.values.visible !== true"
ng-click="ctrl.toggleSubLayer(layer.olLayer, sublayer, '#' + layer.$$hashKey + '_sublayer_' + sublayer + '_visible_checkbox')">
<label for="{{layer.$$hashKey}}_sublayer_{{sublayer}}_visible_checkbox" style="cursor:pointer" title="Definit si la couche est visible">{{sublayer}}</label>
</div>
</div>
</li>
</div>
</div>
</div>
</ul>
</div>
</ul>
<ul class="tree" ng-show="activeMap == 2 && $root.compare_enabled">
<div ng-repeat="node in compareTree.children| orderBy : 'name'" ng-if="node.view === undefined">
<!-- Service -->
<div class="layerstree-phather">
<div class="tree-father-collapse-btn service-name left" data-toggle="collapse" data-target="#comparetree_element_{{$id}}" onclick="setTimeout(function () {
oVmap.resizeLayerTools(true)
}, 500)" title="{{node.name}}">
{{node.name}}
</div>
<div class="checkbox checkbox-info inline-checkbox right"
ng-class="{'checkbox_indeterminate': node.visible === null}">
<input id="compare_service_{{$id}}_visible"
ng-init="node.visible = ctrl.isGroupVisible(node)"
ng-model="node.visible"
ng-model-options="{getterSetter: true}"
ng-click="ctrl.setGroupVisible(node)"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si le groupe est visible">
<label for="compare_service_{{$id}}_visible"
style="cursor:pointer"
title="Definit si le groupe est visible"></label>
</div>
</div>
<!-- Calque -->
<ul id="comparetree_element_{{$id}}" class="collapse layers-tree-ul tree-element" ng-class="{'in': ctrl.layers_collapsed !== true}">
<div ng-repeat="layer in node.children">
<li>
<ul class="list-group-item layertree-item auto-height">
<!-- Nom du calque -->
<div class="layer-name layer-name-tree" title="{{layer.name}}">{{layer.name}}</div>
<div class="layer-checkboxes">
<button type="button"
class="btn btn-xs margin-sides-10 hidden"
ng-click="layer.olLayer.getSource().refreshWithTimestamp()">
<span class="glyphicon glyphicon-refresh"></span>
</button>
<div type="button" class="btn btn-xs layer-menu-button" ng-click="ctrl.toggleLayerMenu(layer, $event)">
<span ng-class="{'icon-filter': layer.olLayer.get('is_filtered'), 'icon-format_list_bulleted': !layer.olLayer.get('is_filtered')}"></span>
</div>
<!-- Checkbox visible -->
<div class="checkbox checkbox-info inline-checkbox" style="z-index: 10;">
<input id="{{layer.$$hashKey}}_compare_visible_order_checkbox"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si le calque est visible"
ng-checked="layer.olLayer.values.visible === true"
ng-click="ctrl.setVisible(layer.olLayer, !layer.olLayer.values.visible);node.visible = ctrl.isGroupVisible(node)">
<label for="{{layer.$$hashKey}}_compare_visible_order_checkbox" style="cursor:pointer" title="Definit si la couche est visible"></label>
</div>
</div>
</ul>
</li>
<div class="dropdown-menu layer-menu" ng-class="{'block': layer.displayedMenu === true}"> <div class="layer-menu-list">
<li ng-if="layer.olLayer.get('is_filtered')" ng-click="ctrl.displayFilterLayerModal(layer.olLayer)">
<a href="#">
<span class="icon-filter"></span>
Filtre
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-xs-6">
<span class="icon-star-half"></span>
Transparence
</div>
<div class="col-xs-6">
<div class="layer-menu-list-slider">
<input data-app-layer-opacity-slider="" id="compare_slider_layer_form_{{layer.$$hashKey}}" type="text">
</div>
</div>
</div>
</a>
</li>
<li ng-if="layer.olLayer.get('type') === 'imagewms' || layer.olLayer.get('type') === 'tilewms'"
ng-repeat="sublayer in layer.olLayer.get('sublayers')">
<div class="sublayer-checkboxes">
<!-- Checkbox visible -->
<div class="checkbox checkbox-info sublayer-checkbox inline-checkbox">
<input id="{{layer.$$hashKey}}_compare_sublayer_{{sublayer}}_visible_checkbox"
type="checkbox"
style="cursor:pointer; position: absolute"
title="Definit si la couche est visible"
ng-checked="ctrl.isSublayerActive(layer.olLayer, sublayer)"
ng-disabled="layer.olLayer.values.visible !== true"
ng-click="ctrl.toggleSubLayer(layer.olLayer, sublayer, '#' + layer.$$hashKey + '_sublayer_' + sublayer + '_visible_checkbox')">
<label for="{{layer.$$hashKey}}_compare_sublayer_{{sublayer}}_visible_checkbox" style="cursor:pointer" title="Definit si la couche est visible">{{sublayer}}</label>
</div>
</div>
</li>
</div>
</div>
</div>
</ul>
</div>
</ul>
</div>
<!--Modale pour le filtrage-->
<div id="layerstree-filter-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="max-height: 100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Filtrer la couche: {{ctrl.olFilteredLayer.get('name')}}</h4>
</div>
<div class="modal-body modal-body-big-with-footer-3">
<div id="layerstree_filter_formreader"
app-form-reader
app-properties="ctrl.properties"
app-token="ctrl.token"></div>
</div>
<div class="modal-footer modal-footer-sm">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" onclick="oVmap.simuleClick('layerstree_filter_formreader_submit_btn')">Appliquer le filtre</button>
</div>
</div>
</div>
</div>
<!--
Bouton invisible qui sert à charger les cartes: ceci a été fait car ce bouton a besoin de ctrl.reloadTree
qui se trouve uniquement ici. Pour appeler la fonction:
-->
<button id="btn-reload-map" style="display: none" ng-click="ctrl.reloadTree()">Reload map</button>