location.html

<!--location search-->
<li id="location-search-tool" role="presentation">
    <form ng-submit="ctrl.searchLocation()" id="location-search-form" class="margin-sides-5 from-control">
        <!--Recherche-->
        <input id="location-search-input"
               type="text" 
               placeholder="Localiser.."
               ng-model="ctrl.locationSearch"
               ng-click="ctrl.searchLocation()">
        <!--Sélecteur-->
        <select id="location-search-api-select"
                ng-model="ctrl.sSelectedLocationService"
                ng-change="ctrl.searchLocation()">            
            <!--Géocodeurs-->
            <option ng-repeat="(key, value) in ctrl.locationServices"
                    value="{{key}}">{{value.title}}</option>
            <!--Objets métier-->
            <option ng-repeat="node in ctrl.oBusinessObjects | orderObjectBy:'bo_title'"
                    ng-if="node.bo_search_field && node.bo_result_field"
                    value="{{node.bo_id}}">{{node.bo_title}}</option>
        </select>
    </form>

    <div class="dropdown-menu basic-tools-dropdown-element">

        <!--Bandeau du haut-->
        <div style="margin: 10px">
            <label>Résultats de la recherche: </label>
            <span class="glyphicon glyphicon-remove right pointer margin-sides-10" 
                  ng-click="ctrl.removeLocation()"></span>
        </div>

        <!--Infos sur le chargement-->
        <div style="text-align: center" class="margin-10">
            <img class="hidden" src="images/ajax-load-big.gif" height="42" width="42" ng-class="{'block': ctrl.searching === true}">
            <span ng-class="{'hidden': ctrl.noResults === ''}">{{ctrl.noResults}}</span>
        </div>

        <!-- Objet métier -->
        <div ng-if="locationServiceType === 'business_object'" class="location-search-dropdown-content">
            <div class="location-search-dropdown-result"
                 ng-repeat="node in ctrl.locationResults">

                <div class="pointer opacity-hover"
                     ng-click="ctrl.addToSelection(node, ctrl.oBusinessObjects[ctrl.sSelectedLocationService])">
                    <span ng-bind-html="node['bo_summary'][ctrl.oBusinessObjects[ctrl.sSelectedLocationService].bo_result_field]"></span>
                </div>

                <div class="location-search-dropdown-result-buttons pointer collapsed" data-toggle="collapse" href="#location-custom-search-dropdown-result-infos-{{this['$index']}}">
                    <a>Détails</a>
                    <i class="caret right" style="margin: 9px 0px 0px 6px;"></i>
                </div>

                <div class="collapse" id="location-custom-search-dropdown-result-infos-{{this['$index']}}">
                    <div style="padding-bottom: 10px">
                        <ul>
                            <li ng-repeat="key in node['bo_summary_attributs']"
                                ng-bind-html="key + ': '+node['bo_summary'][key]">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Géocodeur -->
        <div ng-if="locationServiceType === 'geocoder'" class="location-search-dropdown-content">
            <div class="location-search-dropdown-result" 
                 ng-repeat="node in ctrl.locationResults">
                <div class="pointer opacity-hover"
                     ng-click="ctrl.locatePlace(node)">
                    <span>{{node.title}}</span>
                </div>					

                <div class="location-search-dropdown-result-buttons pointer collapsed" data-toggle="collapse" href="#location-search-dropdown-result-infos-{{this['$index']}}">
                    <a>Détails</a>
                    <i class="caret right" style="margin: 9px 0px 0px 6px;"></i>
                </div>

                <div class="collapse" id="location-search-dropdown-result-infos-{{this['$index']}}">
                    <div style="padding-bottom: 10px" ng-if="node.summary">	
                        <ul>
                            <li ng-repeat="oSummaryElement in node.summary">{{oSummaryElement.label}}: {{oSummaryElement.value}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--Bandeau du bas-->
        <div style="text-align: center; margin: 10px;">
            <button type="button" class="btn btn-sm btn-primary" ng-click="ctrl.searchLocation(ctrl.locationSearch, 12)">
                Plus de résultats
            </button>			
        </div>
    </div>
</li>

<!--Go home-->
<li role="presentation">
    <a id="original-position-tool"
       class="basic-tools-element pointer" title="Centrer la carte sur l’emprise par défaut"
       ng-click="ctrl.goHome()">
        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
    </a>
</li>

<!--Refresh map-->
<li role="presentation">
    <a id="original-position-tool"
       class="basic-tools-element pointer" title="Rafraichir les couches de la carte"
       ng-click="ctrl.refreshMap()">
        <span class="icon-repeat" aria-hidden="true"></span>
    </a>
</li>

<!--Max extent-->
<li role="presentation">
    <a class="basic-tools-element pointer" title="Centrer la carte à l’étendue maximale"
       ng-click="ctrl.maxExtent()">
        <span class="icon-language" aria-hidden="true"></span>
    </a>
</li>

<!--Geolocate me-->
<li role="presentation">
    <a class="basic-tools-element pointer" title="Centrer la carte sur ma position"
       ng-click="ctrl.geolocateMe()">
        <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
    </a>
</li>

<!--Go to-->
<li role="presentation" style="position: inherit" class="basic-tools-dropdown">

    <a class="basic-tools-element pointer"
       title="Centrer la carte sur une position donnée"
       onclick="oVmap.getToolsManager().getBasicTools().toggleTool(this)">
        <span class="icon-coordinates" aria-hidden="true" style="font-size: 19px;line-height: 0.7 !important;"></span>
    </a>

    <div class="dropdown-menu basic-tools-dropdown-element" style="margin: -11px -1px">
        <div class="row margin-sides-0 margin-10">
            <div class="col-md-5">
                <div class="input-group-sm">
                    <input type="number" class="form-control" placeholder="X" ng-model="goToX">
                </div>
                <div class="input-group-sm">
                    <input type="number" class="form-control" placeholder="Y" ng-model="goToY">
                </div>
            </div>			
            <div class="col-md-5">
                <b>Projection:</b>
                <select class="form-control" ng-model="goToProj">
                    <option value="EPSG:4326">{{ctrl.projections['EPSG:4326']}}</option>
                    <option value="EPSG:3857">{{ctrl.projections['EPSG:3857']}}</option>
                    <option value="EPSG:2154">{{ctrl.projections['EPSG:2154']}}</option>
                </select>
            </div>
            <div class="col-md-2">
                <br>
                <button type="button" class="btn btn-success btn-sm"
                        ng-click="ctrl.goTo(goToX, goToY, goToProj)">
                    Go
                </button>
            </div>
        </div>
    </div>
</li>

<!--Previous history-->
<li role="presentation">
    <a class="basic-tools-element pointer" title="Aller à l'étendue précédente"
       ng-click="ctrl.previousHistoryExtent()" ng-class="{'inactive' : ctrl.iHistoryOffset >= ctrl.aLocationHistory.length - 1}">
        <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
    </a>
</li>

<!--Next history-->
<li role="presentation">
    <a class="basic-tools-element pointer" title="Aller à l'étendue suivante"
       ng-click="ctrl.nextHistoryExtent()" ng-class="{'inactive' : ctrl.iHistoryOffset === 0}">
        <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
    </a>
</li>

<!-- Modal -->
<div id="scale-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <form ng-submit="ctrl.addScale()">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Nouvelle échelle</h4>
                </div>
                <div class="modal-body">
                    <i>Saisissez une nouvelle échelle puis cliquez sur "ajouter"</i>
                    <div class="input-group">
                        <span class="input-group-addon" id="new-scale-describer">1:</span>
                        <input type="number" class="form-control" id="new-scale-input" aria-describedby="new-scale-describer" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Ajouter</button>
                </div>
            </form>
        </div>

    </div>
</div>