<!doctype html>
<html ng-app="mainNgApp">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-slider.css">
    <link rel="stylesheet" href="css/spectrum.css">
    <link id="hostStyle" rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="iconfonts/font-awesome/css/all.min.css">
    <link rel="stylesheet" href="iconfonts/custom/customIcons.css">
    <link rel="stylesheet" href="css/mapboxGl.css">
    <title>GEOlayers 3</title>
</head>

<body class="hostElt flexcontainervertical">

    <div ng-controller="baseController" class="flexcontainervertical flexplus1 displaynone" style="height:100%" id="baseController">
        <div id="mapboxrender">
        </div>
        <div class="aesp-notifications" ng-class="{'aesp-is-open':notificationbar.isOpen}">
            <div class="aesp-notification" ng-class="{'aesp-is-open':notificationbar.isOpen}">
                <div class="aesp-notification__content">{{notificationbar.message}}
                    <div class="aesp-notification-button" ng-click="notificationbar.close()">Close</div>
                </div>
            </div>
        </div>
        <div ng-controller="modalsController" id="modalsController">
            <div id="modalFinalize" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"><span class="{{iconClasses.finalize}}"></span> Finalization</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div ng-if="preferences.lottieAnimations && !finalizationFinished && finalizationActive" style="height:100px;width:100px;margin:auto;">
                                <lottie path="support_files/lottie/busy1.json|support_files/lottie/busy2.json|support_files/lottie/busy3.json|support_files/lottie/busy4.json|support_files/lottie/busy5.json|support_files/lottie/busy6.json|support_files/lottie/busy7.json" loop="2" autoplay></lottie>
                            </div>
                            <div ng-if="preferences.lottieAnimations && finalizationFinished && !hasAnyMapcompWrappersToFinalizeError()" style="height:100px;width:100px;margin:auto;">
                                <lottie path="support_files/lottie/success.json" autoplay></lottie>
                            </div>
                            <div ng-if="preferences.lottieAnimations && finalizationFinished && hasAnyMapcompWrappersToFinalizeError()" style="height:100px;width:100px;margin:auto;">
                                <lottie path="support_files/lottie/error.json" autoplay></lottie>
                            </div>
                            <div ng-repeat="mapcompWrapper in mapcompWrappersToFinalize track by $index" class="card mb-3" ng-class="{'border-secondary': (mapcompWrapper.status.id < 2),'border-success': mapcompWrapper.status.id == 2,'border-danger': mapcompWrapper.status.id == 3}">
                                <div class="card-header">{{mapcompWrapper.comp.name}}</div>
                                <div ng-if="mapcompWrapper.status.id == 1" class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{mapcompWrapper.status.progress.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{mapcompWrapper.status.progress.percentage}}%"></div>
                                </div>
                                <div ng-if="mapcompWrapper.status.id == 1" class="card-body">
                                    <p class="card-text"><small>{{mapcompWrapper.status.progress.description}}</small>
                                    </p>
                                </div>
                                <div ng-if="mapcompWrapper.status.id == 3" class="card-body">
                                    <p class="card-text"><small>{{mapcompWrapper.status.message}}</small></p>
                                </div>

                            </div>
                            <small>
                                <p ng-show="!finalizationFinished && !finalizationOptions.onlyCurrentFrame && finalizationOptions.onlyWorkArea">
                                    <span class="{{iconClasses.info}}"></span> The Workarea of your containing Comp is
                                    finalizing.
                                </p>
                                <p ng-show="!finalizationFinished && finalizationOptions.onlyCurrentFrame"><span class="{{iconClasses.info}}"></span> One Frame of your containing Comp is
                                    finalizing.</p>
                                <p ng-show="!finalizationFinished && finalizationOptions.previewQuality"><span class="{{iconClasses.info}}"></span> Finalizing in Preview Quality.</p>
                                <p ng-click="toggleFinalizationHint()"><span class="{{iconClasses.info}}"></span>
                                    {{finalizationHints[finalizationHintIndex]}}</p>
                            </small>
                            <div ng-if="finalizationRenderCandidates.length" class="btn-group flexcontainer" role="group">
                                <div ng-if="finalizationRenderCandidates.length > 1" class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-secondary flexplus1 flexshrink1 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    </button>
                                    <div class="dropdown-menu scrollable-menu">
                                        <a class="dropdown-item" ng-class="{'active': comp.id === selectedFinalizationRenderCandidate.id}" ng-repeat="comp in finalizationRenderCandidates track by $index" ng-click="setSelectedFinalizationRenderCandidate(comp)">{{comp.name}}</a>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-secondary flexfixed" ng-click="addToRenderQueue(selectedFinalizationRenderCandidate)">Add '{{shortenString(selectedFinalizationRenderCandidate.name, 32)}}' to Render Queue</button>
                                <button type="button" class="btn btn-sm btn-secondary flexlixed" ng-click="queueInAme(selectedFinalizationRenderCandidate)">Queue in AME</button>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button ng-if="!finalizationFinished" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel Finalization</button>
                            <button ng-if="finalizationFinished" type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalLabelDataFields" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{modalLabelDataFieldsHeader}}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div ng-if="modalLabelDataFieldsShowProgressbar" class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            </div>
                        </div>
                        <div class="modal-body">
                            <div ng-show="modalLabelDataFieldsNoticeTop.length" style="margin-bottom: 5px;">
                                {{modalLabelDataFieldsNoticeTop}}
                            </div>
                            <div ng-repeat="dataField in selectedLabelTemplateDataFields track by $index" class="flexcontainer" style="margin:3px;">
                                <div ng-if="dataField.type === 'text'" class="flexplus1 flexcontainer">
                                    <div class="input-group-sm flexcontainer">
                                        <span style="min-width:100px" class="flexfixed inlinemargins">{{dataField.propertyName}}</span>
                                        <changetextbyclick class="flexplus1 flexshrink1" ng-model="dataField.value">
                                        </changetextbyclick>
                                    </div>
                                </div>
                                <div ng-if="dataField.type === 'footage'" class="flexplus1 flexcontainer">
                                    <span style="min-width:100px" class="flexfixed inlinemargins"><span ng-class="iconClasses.labelTemplateImage" aria-hidden="true"></span>
                                        {{dataField.propertyName}}</span>
                                    <changetextbyclick class="flexplus1 flexshrink1" ng-model="dataField.value">
                                    </changetextbyclick>
                                    <filepicker class="flexfixed" ng-model="dataField.value" prompt="Please choose a footage file."></filepicker>
                                </div>
                            </div>
                            <div style="margin-top: 15px;">
                                <small>{{modalLabelDataFieldsNotice}}</small>
                            </div>
                        </div>
                        <div class="modal-footer flexcontainer">
                            <label ng-show="modalLabelDataFieldsShowPrefsCheckbox" class="flexfixed silentbutton tooglebutton linemargins" ng-model="preferences.showPromptToCompleteFeatureDataForLabelTemplate" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferences.showPromptToCompleteFeatureDataForLabelTemplate)}}"></span>
                                Show Dialog</label>
                            <div class="flexplus1"></div>
                            <button type="button" class="btn btn-secondary flexfixed" data-dismiss="modal" ng-click="editLabelDataFieldsCancel()">{{modalLabelDataFieldsCancelBtnText}}</button>
                            <button type="button" class="btn btn-outline-primary flexfixed" data-dismiss="modal" ng-click="editLabelDataFieldsConfirm()">{{modalLabelDataFieldsConfirmBtnText}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalEditData" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{editDataTitle}}</h5>
                            <button type="button" class="close" ng-click="editDataCancel()" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="overflow: auto;">
                            <p ng-if="editDataQuestion.length">{{editDataQuestion}}</p>
                            <div ng-repeat="dataField in editDataPayloadAry track by $index" class="flexcontainer" style="margin:3px;">
                                <div ng-if="dataField.type === 'string'" class="flexplus1 flexcontainer">
                                    <div class="input-group-sm flexcontainer">
                                        <span style="min-width:70px;margin-bottom: -5px;" class="flexfixed inlinemargins">{{dataField.key}}</span>
                                        <changetextbyclick class="flexplus1 flexshrink1" onenterkey="editDataOK()" ng-model="dataField.val"></changetextbyclick>
                                    </div>
                                </div>
                                <div ng-if="dataField.type === 'number'" class="flexplus1 flexcontainer">
                                    <div class="input-group-sm flexcontainer">
                                        <span style="min-width:70px;margin-bottom: -5px;" class="flexfixed inlinemargins">{{dataField.key}}</span>
                                        <changevalbyclick class="flexplus1 flexshrink1" suffix="_" ng-model="dataField.val" min="-99999999999999" max="99999999999999">
                                        </changevalbyclick>
                                    </div>
                                </div>
                                <div ng-if="dataField.type === 'boolean'" class="flexplus1 flexcontainer">
                                    <div class="input-group-sm flexcontainer">
                                        <span style="min-width:70px" class="flexfixed inlinemargins"></span>
                                        <label class="silentbutton tooglebutton" ng-model="dataField.val" uib-btn-checkbox><span class="{{iconClasses.checkbox(dataField.val)}}"></span>
                                            {{dataField.key}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" ng-click="editDataCancel()" data-dismiss="modal">{{editDataCanceBtnText}}</button>
                            <button type="button" class="btn btn-outline-primary" ng-click="editDataOK()" data-dismiss="modal">{{editDataOKBtnText}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalEditSliderValue" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{editSliderValueTitle}}</h5>
                            <button type="button" class="close" ng-click="editSliderValueCancel()" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="overflow: auto;">
                            <p ng-if="editSliderValueQuestion.length">{{editSliderValueQuestion}}</p>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="editSliderValueValue" min="editSliderValueSMin" step="editSliderValueStep" max="editSliderValueSMax" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_s" ng-model="editSliderValueValue" min="editSliderValueMin" max="editSliderValueMax">
                                </changevalbyclick>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" ng-click="editSliderValueCancel()" data-dismiss="modal">{{editSliderValuecancelBtnText}}</button>
                            <button type="button" class="btn btn-outline-primary" ng-click="editSliderValueOK()" data-dismiss="modal">{{editSliderValueOKBtnText}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalCreate3DLandscape" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        
                        <div class="modal-header">
                            <h5 class="modal-title">Create 3D Landscape</h5>
                            <button type="button" class="close" ng-click="confirmCancel()" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group-sm flexcontainer">
                                <span style="min-width:100px" class="flexfixed inlinemargins">Name</span>
                                <changetextbyclick class="flexplus1 flexshrink1" ng-model="create3DLandscapeCompSpecs.name"></changetextbyclick>
                            </div>
                            <div class="flexcontainer">
                                <span style="min-width:100px" class="flexfixed inlinemargins">Size</span>
                                <changevalbyclick class="flexfixed inlinemargins" suffix="_px" ng-model="create3DLandscapeCompSpecs.width" min="4" step="1" max="10000">
                                </changevalbyclick>
                                <span class="flexfixed inlinemargins">x</span>
                                <changevalbyclick class="flexfixed" suffix="_px" ng-model="create3DLandscapeCompSpecs.height" min="4" step="1" max="10000">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer">
                                <span style="min-width:100px" class="flexfixed inlinemargins">Framerate</span>
                                <changevalbyclick class="flexfixed" suffix="_fps" ng-model="create3DLandscapeCompSpecs.frameRate" min="1" max="99">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer">
                                <span style="min-width:100px" class="flexfixed inlinemargins">Duration</span>
                                <changevalbyclick class="flexfixed" suffix="_seconds" min="1" max="10800" ng-model="create3DLandscapeCompSpecs.duration"></changevalbyclick>
                            </div>
                            <div class="flexcontainer">
                                <span style="min-width:100px;" class="flexfixed inlinemargins">Texture Size</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{create3DLandscapeTexturemapSize}} px</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a class="dropdown-item clickable" ng-click="create3DLandscapeTexturemapSize = 1024; create3DLandscapeHeightmapSize = 128; create3DLandscapeTextureSizesHaveBeenChangedManually = true;">1024
                                                px</a>
                                            <a class="dropdown-item clickable" ng-click="create3DLandscapeTexturemapSize = 2048; create3DLandscapeHeightmapSize = 256; create3DLandscapeTextureSizesHaveBeenChangedManually = true;">2048
                                                px</a>
                                            <a class="dropdown-item clickable" ng-click="create3DLandscapeTexturemapSize = 4096; create3DLandscapeHeightmapSize = 512; create3DLandscapeTextureSizesHaveBeenChangedManually = true;">4096
                                                px</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flexcontainer">
                                <span style="min-width:100px;" class="flexfixed inlinemargins">Heightmap Size</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{create3DLandscapeHeightmapSize}} px</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a class="dropdown-item clickable" ng-click="create3DLandscapeHeightmapSize = 128; create3DLandscapeTextureSizesHaveBeenChangedManually = true;">128
                                                px</a>
                                            <a class="dropdown-item clickable" ng-click="create3DLandscapeHeightmapSize = 256; create3DLandscapeTextureSizesHaveBeenChangedManually = true;">256
                                                px</a>
                                            <a class="dropdown-item clickable" ng-click="create3DLandscapeHeightmapSize = 512; create3DLandscapeTextureSizesHaveBeenChangedManually = true;">512
                                                px</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <p>There are multiple Plugins that can be used to render the 3D Landscape. Please choose one:</p>
                            <div class="card border-secondary">
                                <button ng-repeat="actionoption in create3DLandscapeActionoptionsAry track by $index" type="button" class="btn btn-sm {{actionoption.class || 'btn-secondary'}} linemargins" data-dismiss="modal" ng-click="actionoptionsUnbindCloseCallback();actionoption.do()" style="display:block;"><span ng-if="actionoption.icon" class="{{iconClasses[actionoption.icon]}}"></span>{{actionoption.name}}</button>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalActionoptions" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{actionoptionsTitle}}</h5>
                            <button type="button" class="close" ng-click="confirmCancel()" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>{{actionoptionsQuestion}}</p>
                            <div class="card border-secondary">
                                <button ng-repeat="actionoption in actionoptionsAry track by $index" type="button" class="btn btn-sm {{actionoption.class || 'btn-secondary'}} linemargins" data-dismiss="modal" ng-click="actionoptionsUnbindCloseCallback();actionoption.do()" style="display:block;"><span ng-if="actionoption.icon" class="{{iconClasses[actionoption.icon]}}"></span>{{actionoption.name}}</button>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalAttributionInfo" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Attribution Info</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div ng-if="attributionInfoIsGeolayersMapdata" class="modal-body">
                            <p>{{attributionInfoText1}}
                                <input ng-if="attributionInfoStyleInterfaceCredit && attributionInfoStyleInterfaceCredit.length" type="text" class="form-control flexplus1" id="attributionInfoTextInput" ng-model="attributionInfoStyleInterfaceCredit" readonly="readonly">
                                {{attributionInfoText2}}
                            </p>
                        </div>
                        <div ng-if="!attributionInfoIsGeolayersMapdata && attributionInfoStyleInterfaceCredit.length" class="modal-body">
                            <p><span ng-if="attributionInfoText1">{{attributionInfoText1}}</span><span ng-if="!attributionInfoText1">The credit:</span>
                                <input type="text" class="form-control flexplus1" id="attributionInfoTextInput" ng-model="attributionInfoStyleInterfaceCredit" readonly="readonly">
                                <span ng-if="attributionInfoText2">{{attributionInfoText2}}</span><span ng-if="!attributionInfoText2">should appear in the corner of the map in a readable
                                    size
                                    for the whole duration of your animation.
                            </span></p>
                            <p>The terms of use of the map service providers apply. Content must be attributed unless
                                otherwise agreed with the map service provider.</p>
                        </div>
                        <div ng-if="!attributionInfoIsGeolayersMapdata && !attributionInfoStyleInterfaceCredit.length" class="modal-body">
                            <p ng-if="!attributionInfoText1">The terms of use of the map service providers apply.
                                Content
                                must be attributed unless otherwise agreed with the map service provider.</p>
                            <p ng-if="attributionInfoText1">{{attributionInfoText1}}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Got it</button>
                            <button ng-if="attributionInfoLearnMoreLink" type="button" class="btn btn-outline-primary" ng-click="openInDefaultBrowser(attributionInfoLearnMoreLink)" data-dismiss="modal">Learn
                                more</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalColorpicker" data-backdrop="static" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Pick a color</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div style="height:22px;" ng-style="{'background-color':'rgb(' + colorpickerColor.r + ',' + colorpickerColor.g + ',' + colorpickerColor.b + ')'}">
                        </div>
                        <div class="modal-body">
                            <div class="flexfixed inlinemargins">
                                <input onenterkey="colorpickerApply()" type="text" id="colorpicker">
                            </div>
                            <div class="flexplus1 flexcontainer">
                                <div class="input-group-sm flexplus1 flexcontainer">
                                    <span style="min-width:20px;margin-bottom: -5px;" class="flexfixed inlinemargins">R</span>
                                    <changevalbyclick class="flexplus1 flexshrink1" suffix="_" ng-change="colorpickerApplyFromRGB()" ng-model="colorpickerColor.r" min="0" step="1" max="255"></changevalbyclick>
                                </div>
                                <div class="input-group-sm flexplus1 flexcontainer">
                                    <span style="min-width:20px;margin-bottom: -5px;" class="flexfixed inlinemargins">G</span>
                                    <changevalbyclick class="flexplus1 flexshrink1" suffix="_" ng-change="colorpickerApplyFromRGB()" ng-model="colorpickerColor.g" min="0" step="1" max="255"></changevalbyclick>
                                </div>
                                <div class="input-group-sm flexplus1 flexcontainer">
                                    <span style="min-width:20px;margin-bottom: -5px;" class="flexfixed inlinemargins">B</span>
                                    <changevalbyclick class="flexplus1 flexshrink1" suffix="_" ng-change="colorpickerApplyFromRGB()" ng-model="colorpickerColor.b" min="0" step="1" max="255"></changevalbyclick>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-outline-primary" ng-click="colorpickerApply()" data-dismiss="modal">Apply</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalPurchaseMaptiler" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Data not licensed</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <img src="./support_files/maptiler-logo-light.svg" alt="MapTiler Logo" width="50%" height="80" ng-click="purchaseMaptilerPurchase()">
                            <p>In order to use this Imagery you'll need to license mapdata powered by MapTiler.</p>
                            <ol>
                                <li>Click the "License Data" button below</li>
                                <li>Check your browser and sign up for a FLEX plan</li>
                                <li>Copy your MapTiler API Key and paste it right here: <changetextbyclick ng-model="purchaseMaptilerData.apiKey"></changetextbyclick>
                                </li>
                                <li>Hit Apply and restart GEOlayers</li>
                            </ol>
                            <p ng-if="!(purchaseMaptilerData.initialApiKey === purchaseMaptilerData.apiKey || !purchaseMaptilerData.apiKey)">
                                You can also change the MapTiler API Key in the preferences.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button ng-if="purchaseMaptilerData.initialApiKey === purchaseMaptilerData.apiKey || !purchaseMaptilerData.apiKey" type="button" class="btn btn-outline-primary" ng-click="purchaseMaptilerPurchase()">License Data</button>
                            <button ng-if="!(purchaseMaptilerData.initialApiKey === purchaseMaptilerData.apiKey || !purchaseMaptilerData.apiKey)" type="button" class="btn btn-outline-primary" ng-click="purchaseMaptilerConfirm()">Apply
                                and Restart</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalConfirm" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{confirmTitle}}</h5>
                            <button type="button" class="close" ng-click="confirmCancel()" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p ng-repeat="confirmQuestion in confirmQuestions">{{confirmQuestion}}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" ng-click="confirmCancel()" data-dismiss="modal">{{confirmCanceBtnText}}</button>
                            <button type="button" class="btn btn-outline-primary" ng-click="confirmOK()" data-dismiss="modal">{{confirmOKBtnText}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modalSimpleAlert" class="modal fade">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"><span ng-show="simpleAlertIsHint" class="{{iconClasses.learn}}"></span>{{simpleAlertIsHint?"
                                "+simpleAlertTitle:simpleAlertTitle}}
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>{{simpleAlertMessage}}</p>
                        </div>
                        <div class="modal-footer flexcontainer">
                            <label ng-show="simpleAlertIsHint" class="flexfixed silentbutton tooglebutton linemargins" ng-model="preferences.allowHints" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferences.allowHints)}}"></span> Show Hints</label>
                            <div class="flexplus1"></div>
                            <button type="button" class="flexfixed btn btn-secondary" ng-if="simpleAlertIsHint" ng-click="openHelp()">Open Help</button>
                            <button type="button" class="flexfixed btn btn-secondary" ng-if="simpleAlertIsHintShuffleable" ng-click="simpleAlertShuffleHint()">Next
                                Hint</button>
                            <button type="button" class="flexfixed btn btn-secondary" data-dismiss="modal">Got
                                it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.busy || 0}}">

            <div ng-if="windowLayoutState.busy" style="margin:auto">
                <div ng-if="preferences.lottieAnimations" style="height:100px;width:100px;margin:auto;">
                    <lottie path="support_files/lottie/busy1.json|support_files/lottie/busy2.json|support_files/lottie/busy3.json|support_files/lottie/busy4.json|support_files/lottie/busy5.json|support_files/lottie/busy6.json|support_files/lottie/busy7.json" loop="2" autoplay></lottie>
                </div>
                <div>
                    <div style="margin-bottom:2px;">{{busyTitle}}</div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" ng-class="{'bg-success': busyColorType == 1,'bg-danger': busyColorType == 2}" role="progressbar" aria-valuenow="{{busyPercentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{busyPercentage}}%"></div>
                    </div>
                    <p><small>{{busyDescription}}</small></p>
                </div>
                <div style="height:80px;"></div>
                
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.watcher || 0}}">
            <div style="margin:auto">
                <div class="card mb-3" style="min-width:150px;">
                    <div class="card-header"><span class="{{iconClasses.folder}}"></span> Watching...</div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: {{busyPercentage}}%">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.preferencesheader || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <h5 ng-click="toggleHiddenPrefs($event)" class="modal-title">Preferences</h5>
                    </div>
                    <div class="flexfixed" style="margin:auto">
                        <a class="silentbutton flexfixed" ng-click="resetPreferences(preferencesToEdit)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Reset Preferences"><span class="{{iconClasses.reset}}"></span></a>
                        <a class="silentbutton flexfixed" ng-click="importPreferences($event, preferencesToEdit)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Import Preferences"><span class="{{iconClasses.importFile}}"></span></a>
                        <a class="silentbutton flexfixed" ng-click="exportPreferences(preferencesToEdit)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Export Preferences"><span class="{{iconClasses.exportFile}}"></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.createmapcompheader || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <h5 class="modal-title">Create Mapcomp</h5>
                    </div>
                    <div ng-if="windowLayoutState.createmapcomp2" class="flexfixed" style="margin:auto">
                        <a class="silentbutton flexfixed" ng-click="setNewMapcompWrapperStyleInterfaceFromActiveComp()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Create Style based on selected Composition"><span class="{{iconClasses.magic}}"></span></a>
                        <a class="silentbutton flexfixed" ng-click="setNewMapcompWrapperStyleInterfaceFromFile($event)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Import Mapcomp Imagery Style or Colors"><span class="{{iconClasses.importFile}}"></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.diagramsheader || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <h5 class="modal-title">Diagrams</h5>
                    </div>
                    <div class="flexfixed" style="margin:auto">
                        <a class="silentbutton flexfixed" ng-click="setCurDiagramDataFromFile($event)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Import CSV File"><span class="{{iconClasses.importFile}}"></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.labelAndDrawingOptionsMapcompBlacklistsheader || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <h5 class="modal-title">{{labelAndDrawingOptionsMapcompBlacklistsTitle}}</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.editstyleinterfaceheader || 0}}">
            <div class="modal-content">
                <div class="modal-header flexcontainer">
                    <div class="flexplus1">
                        <h5 class="modal-title">Mapcomp Imagery</h5>
                    </div>
                    <div class="flexfixed" style="margin:auto">
                        <a class="silentbutton flexfixed" ng-if="modalEditStyleInterfaceShowOptions.save" ng-show="setupStyleInterfaceChanged" ng-click="saveSetupStyleInterfaceToCustomStyleInterfaces()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Save Style"><span class="{{iconClasses.save}}"></span></a>
                        <a class="silentbutton flexfixed" ng-if="modalEditStyleInterfaceShowOptions.remove" ng-show="setupStyleInterface.sourceFilePath" ng-click="removeCustomStyleInterface(setupStyleInterface);cancelStyleInterfaceSettings()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Remove Style"><span class="{{iconClasses.remove}}"></span></a>
                        <a class="silentbutton flexfixed" ng-show="canStyleInterfaceUpdateFromSrcUrl(setupStyleInterface)" ng-click="updateSetupStyleInterfaceFromSrcUrl()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Update Style"><span class="{{iconClasses.update}}"></span></a>
                        <a class="silentbutton flexfixed" ng-if="modalEditStyleInterfaceShowOptions.import" ng-click="setSetupStyleInterfaceFromFile($event)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Import Style or Colors"><span class="{{iconClasses.importFile}}"></span></a>
                        <a class="silentbutton flexfixed" ng-if="modalEditStyleInterfaceShowOptions.export" ng-click="exportStyleInterface(setupStyleInterface)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Export Style"><span class="{{iconClasses.exportFile}}"></span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.setupmapcompheader || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Mapcomp Settings</h5>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.editlabelinterfaceheader || 0}}">
            <div class="modal-content">
                <div class="modal-header flexcontainer">
                    <div class="flexplus1">
                        <h5 class="modal-title">Mapcomp Labels</h5>
                    </div>
                    <div class="flexfixed" style="margin:auto">
                        <a class="silentbutton flexfixed" ng-click="createTemplateLabelsFromMapcompLabels(setupMapcompWrapper)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Create Template Labels"><span class="{{iconClasses.labels}}"></span></a>
                    </div>
                </div>

            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.selectdownloadfeaturesetheader || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Download Features</h5>
                </div>
            </div>
        </div>

        
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.mapcompbar || 0}}">
            <div class="btn-group flexplus1 flexcontainer">
                <button ng-if="!windowLayoutState.mapcompbarShowOnlyName" type="button" class="btn btn-sm btn-secondary flexfixed" ng-class="{'aniOpacityLoop':isMapcompWrapperSelected() && highlightMapcompListIcon > 0}" ng-click="toggleWindowLayoutState(['selectmapcomp','default']);decHighlightMapcompListIcon()"><span class="{{iconClasses.mapcompList}}"></span></button>
                <button ng-if="windowLayoutState.mapcompbarShowOnlyName?isMapcompWrapperSelected():true" type="button" ng-click="isMapcompWrapperSelected() ? revealMapcomp(selectedMapcompWrapper) : modalCreateMapcomp()" class="btn btn-sm btn-secondary flexplus1 nowrapellipsis" ng-class="{'aniOpacityLoop':!isMapcompWrapperSelected(),'aniOpacityBlink':highlightSelectedMapcompActive}" style="overflow:hidden">{{selectedMapcompWrapper.comp.name || 'Create Mapcomp'}}</button>
                <button ng-if="isMapcompWrapperSelected() && !windowLayoutState.mapcompbarShowOnlyName" ng-click="finalize(undefined, $event)" type="button" class="btn btn-sm btn-outline-primary flexfixed">
                    <span class="{{iconClasses.finalize}}"></span> Finalize
                </button>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.mapcomps || 0}}">
            <div ng-if="mapcomplistShowProgressbar" class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                </div>
            </div>
            <div class="mapcomplist">
                <div ng-repeat="mapcompWrapper in mapcompWrappers track by $index" ng-show="!mapcompWrapper.collapseHide">
                    <div ng-if="preferences.sortMapcompsType === 'layerorder' && ($index === 0 || (mapcompWrappers[$index-1].containingComp.id != mapcompWrapper.containingComp.id))" class="mapcomplistcontainingcomp nowrapellipsis">{{mapcompWrapper.containingComp.name}}:</div>
                    <div class="flexcontainer mapcomplistitemcomplete">
                        <div class="flexfixed posrel" style="width:20px;" ng-repeat="iconByLinkageDepth in mapcompWrapper.iconByLinkageDepths track by $index" ng-if="$index > 0 && preferences.sortMapcompsType === 'linked'">
                            <div ng-if="iconByLinkageDepth === 'E' || iconByLinkageDepth === 'I'" class="posabs" style="bottom:0;right:1px;width:50%;height:50%;border-left:1px solid rgba(255,255,255,0.2);">
                            </div>
                            <div ng-if="iconByLinkageDepth" class="posabs" style="top:0;right:1px;width:50%;height:50%;border-left:1px solid rgba(255,255,255,0.2);">
                            </div>
                            <div ng-if="iconByLinkageDepth === 'L' || iconByLinkageDepth === 'E'" class="posabs" style="top:0;right:0;width:50%;height:50%;border-bottom:1px solid rgba(255,255,255,0.2);">
                            </div>
                        </div>
                        <div ng-if="preferences.sortMapcompsType === 'linked'" ng-show="mapcompWrapper.canCollapse || mapcompWrapper.linkageDepth > 0" class="flexfixed posrel silentbutton2" style="width:20px;" ng-click="toggleCollapseMapcomp(mapcompWrapper)">
                            <div ng-if="mapcompWrapper.canCollapse" class="posabs" style="bottom:0;right:0px;width:85%;height:63%;">
                                <span class="{{mapcompWrapper.data.isCollapsed ? iconClasses.isCollapsed : iconClasses.isExpanded}}"></span>
                            </div>
                            <div ng-if="mapcompWrapper.canCollapse && !mapcompWrapper.data.isCollapsed" class="posabs" style="bottom:0;right:1px;width:50%;height:35%;border-left:1px solid rgba(255,255,255,0.2);">
                            </div>
                            <div ng-if="!mapcompWrapper.canCollapse" class="posabs" style="top:0;right:0;width:100%;height:50%;border-bottom:1px solid rgba(255,255,255,0.2);">
                            </div>
                        </div>
                        <div style="min-height:54px;" class="listitemborder outermapcomplistitem silentbutton flexcontainer flexplus1" ng-class="{active: (mapcompWrapper.comp.id===selectedMapcompWrapper.comp.id),related: (mapcompWrapper.comp.id!=selectedMapcompWrapper.comp.id && mapcompHelpers.isMapcompLinkRelated(mapcompWrapper,selectedMapcompWrapper,mapcompWrappers))}" ng-click="selectMapcompWrapper(mapcompWrapper, true);toggleWindowLayoutState(['selectmapcomp','default']);">
                            <mapcompthumbnail ng-click="styleInterfacePreAction(mapcompWrapper.styleInterface)" class="flexfixed" size="56" ng-model="mapcompWrapper"></mapcompthumbnail>
                            <div class="flexplus1 flexcontainer mapcomplistitem posrel" style="flex-flow: row wrap;">
                                <div class="flexplus1 flexcontainer" style="page-break-after: always;break-after: always;">
                                    <div class="nowrapellipsis flexshrink1" style="margin-right:5px;">
                                        {{mapcompWrapper.comp.name}}</div>
                                    <div class="flexfixed">
                                        <span ng-if="preferences.sortMapcompsType != 'linked' && mapcompWrapper.data.linkMapcompId" class="{{iconClasses.mapcompLink}}" data-toggle-tooltip data-placement="top" title="" data-original-title="linked: {{mapcompHelpers.getLinkRefMapcomp(mapcompWrapper, mapcompWrappers).comp.name}}"></span>
                                        <label ng-if="!mapcompWrapper.data.locked" class="tooglebutton" ng-model="mapcompWrapper.data.imagery" ng-click="toggleMapcompFinalizationImagery(mapcompWrapper, $event)" uib-btn-checkbox><span class="{{iconClasses.mapcompImagery}}"></span></label>
                                        <label ng-if="!mapcompWrapper.data.locked" class="tooglebutton" ng-model="mapcompWrapper.data.mapcompLabels" ng-click="toggleMapcompFinalizationMapcompLabels(mapcompWrapper, $event)" uib-btn-checkbox><span class="{{iconClasses.mapcompLabels}}"></span></label>
                                        <span ng-show="mapcompHelpers.isControllerMapcomp(mapcompWrapper)" class="badge badge-secondary badge-pill">Controller</span>
                                        <span ng-show="!mapcompHelpers.isControllerMapcomp(mapcompWrapper)&&mapcompWrapper.status.id === -1" class="badge badge-secondary badge-pill">Previewing...</span>
                                        <span ng-show="!mapcompHelpers.isControllerMapcomp(mapcompWrapper)&&mapcompWrapper.status.id === 0" class="badge badge-secondary badge-pill">Preview</span>
                                        <span ng-show="!mapcompHelpers.isControllerMapcomp(mapcompWrapper)&&mapcompWrapper.status.id === 1" class="badge badge-primary badge-pill">Finalizing...</span>
                                        <span ng-show="!mapcompHelpers.isControllerMapcomp(mapcompWrapper)&&mapcompWrapper.status.id === 2" class="badge badge-success badge-pill" data-toggle-tooltip data-placement="top" title="" data-original-title="{{mapcompWrapper.status.megapixelStr}} Mpx, {{mapcompWrapper.status.labelsNr}} labels"><span class="{{iconClasses.finalize}}"></span> Finalized</span>
                                        <span ng-show="!mapcompHelpers.isControllerMapcomp(mapcompWrapper)&&mapcompWrapper.status.id === 3" class="badge badge-danger badge-pill" data-toggle-tooltip data-placement="top" title="" data-original-title="{{mapcompWrapper.status.message}}"><span class="{{iconClasses.error}}"></span> Error</span>
                                    </div>
                                    <div class="flexplus1"></div>
                                    <label class="tooglebutton flexfixed" style="margin-left:3px;" ng-model="mapcompWrapper.data.locked" ng-class="{mapcompsettingslock:mapcompWrapper.data.locked}" ng-click="lockMapcompClicked(mapcompWrapper, $event)" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Lock Settings"><span class="{{iconClasses.lock(mapcompWrapper.data.locked)}}"></span></label>
                                </div>
                                <div ng-show="!mapcompWrapper.data.locked" class="mapcomplistitemhoverinside posabs" style="bottom:7px;left:5px;">
                                    <a ng-click="modalSetupMapcomp(mapcompWrapper, $event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Settings"><span class="{{iconClasses.mapcompSettings}}"></span></a>
                                    <a ng-click="duplicateMapcompDialog(mapcompWrapper, $event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Duplicate"><span class="{{iconClasses.duplicate}}"></span></a>
                                    <a ng-click="confirmAndRemoveMapcomp(mapcompWrapper, $event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Remove"><span class="{{iconClasses.remove}}"></span></a>
                                    <a ng-click="finalize(mapcompWrapper, $event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Finalize"><span class="{{iconClasses.finalize}}"></span></a>
                                </div>
                                <div ng-show="!mapcompWrapper.data.locked" class="posabs" ng-if="mapcompHelpers.getAllRelatedLinkedMapcomps(mapcompWrapper,mapcompWrappers).length > 1" style="bottom:7px;right:5px;">
                                    <label ng-if="preferences.labelingGlobalUseLinkedMaster" class="tooglebutton" ng-model="mapcompWrapper.data.linkedMasterLabel" ng-click="updateLinkedMaster('label', mapcompWrapper, $event)" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Prefer for Template Labels">
                                        <span style="margin-right:-1px;margin-bottom:5px;" class="{{iconClasses.heart(mapcompWrapper.data.linkedMasterLabel)}} fa-xs"></span>
                                        <span style="margin-left:-4px;margin-bottom:-5px;" class="{{iconClasses.label}} fa-xs fa-rotate-90"></span>
                                    </label>
                                    <label ng-if="preferences.drawingGlobalUseLinkedMaster" class="tooglebutton" ng-model="mapcompWrapper.data.linkedMasterDraw" ng-click="updateLinkedMaster('draw', mapcompWrapper, $event)" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Prefer for Drawing Features">
                                        <span style="margin-right:-1px;margin-bottom:5px;" class="{{iconClasses.heart(mapcompWrapper.data.linkedMasterDraw)}} fa-xs"></span>
                                        <span style="margin-left:-4px;margin-bottom:-5px;" class="{{iconClasses.draw}} fa-xs"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-if="mapcompWrappers.length" ng-click="modalCreateMapcomp()" class="listitemborder silentbutton hoverinside flexcontainer">
                <div style="margin:16px;margin-left:22px;"><span class="{{iconClasses.plus}}"></span> Create new Mapcomp
                </div>
            </div>
            <div class="quickstart" ng-if="!mapcompWrappers.length">
                <p>There is no Mapcomp in your project yet. Let's get started!</p>
                <div ng-click="modalCreateMapcomp()" class="quickstartbtn clickable">
                    <span class="{{iconClasses.plus}}"></span>
                    <span>Create Mapcomp</span>
                </div>
                <div ng-if="preferences.recentProjects.length" ng-click="showRecentProjects()" class="quickstartbtn clickable">
                    <span class="{{iconClasses.recentProject}}"></span>
                    <span>Open recent Project</span>
                </div>
                <div ng-if="getLink('vimeoLearn')" ng-click="openInDefaultBrowser(getLink('vimeoLearn'))" class="quickstartbtn clickable">
                    <span class="{{iconClasses.learn}}"></span>
                    <span>Watch Tutorials</span>
                </div>
                <div ng-if="sampleProjects.length" ng-click="showDownloadableSampleProjects()" class="quickstartbtn clickable">
                    <span class="{{iconClasses.download}}"></span>
                    <span>Download Sample Projects</span>
                </div>
                <div ng-click="openHelp()" class="quickstartbtn clickable">
                    <span class="{{iconClasses.question}}"></span>
                    <span>Open Help</span>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.toolbar || 0}} flexcontainer">
            <div class="flexcontainer flexplus1" style="margin-top: 2px;">
                <a ng-if="isMapcompWrapperSelected()" ng-click="snapSelectedLayersToMap(selectedMapcompWrapper)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Pin selected Layers to Map"><span class="{{iconClasses.snapLayer}}"></span></a>
                <a ng-click="createControllerMapcomp()" class="silentbutton flexfixed" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Create Controller Mapcomp"><span class="{{iconClasses.controllerMapcomp}}"></span></a>
                <a ng-if="isMapcompWrapperSelected()&&licensingOptions.advancedData" ng-click="createLinkedWaterMaskMapcomp(selectedMapcompWrapper)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Create Water Mask Mapcomp"><span class="{{iconClasses.waterMask}}"></span></a>
                <a ng-if="isMapcompWrapperSelected()&&licensingOptions.advancedData" ng-click="draw3DBuildings(selectedMapcompWrapper, selectedDrawingOption)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Draw 3D Buildings"><span class="{{iconClasses.threeDBuilding}}"></span></a>
                <a ng-click="create3DLandscape()" class="silentbutton flexfixed" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Create 3D Landscape"><span class="{{iconClasses.ThreeDLandscape}}"></span></a>

                <a ng-click="createDiagramFromFile($event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Draw Diagram"><span class="{{iconClasses.charts}}"></span></a>
                <a ng-show="!(preferences.jsxFilePaths.length || preferences.includeJsxFilesInProjectDir)" class="silentbutton flexfixed" ng-click="selectAndRunJsxFile()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Run script file"><span class="{{iconClasses.script}}"></span></a>
                <div ng-show="preferences.jsxFilePaths.length || preferences.includeJsxFilesInProjectDir" class="btn-group flexfixed" role="group">
                    <a class="silentbutton flexfixed" ng-click="updateJsxFiles()" data-toggle="dropdown" aria-expanded="false" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Run script file"><span class="{{iconClasses.script}}"></span></a>
                    
                    <div style="-webkit-filter: blur(0px);" class="dropdown-menu dropdown-menu-right">
                        <input ng-show="jsxFiles.length" class="searchbar form-control mr-sm-2 flexplus1" type="search" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (jsxFilefilterStr.length > 0)}" ng-model="jsxFilefilterStr" id="jsxFilesFilterInput">
                        <div style="max-height:250px;min-width:200px;overflow-y: auto">
                            <a ng-repeat="jsxFile in jsxFiles | filter:{name:jsxFilefilterStr}" class="dropdown-item clickable" ng-click="jsxFileClicked(jsxFile, $event)">{{jsxFile.name}}</a>
                        </div>
                        <div class="dropdown-divider"></div>
                        <a ng-click="selectAndRunJsxFile()" class="keep-open silentbutton dropdownmenueitempadding flexfixed"><span class="{{iconClasses.script}}"></span> Run Script File</a>
                    </div>
                </div>
                <div class="flexplus1" style="border-left: 1px rgba(0,0,0,0.2) solid; min-width:3px;"></div>
                <div ng-if="isMapcompWrapperSelected()" class="btn-group flexcontainer flexshrink1" role="group">
                    
                    <a class="silentbutton flexfixed" ng-click="createManualLabel()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Add Template Label">
                        
                        <span style="font-size:0.6em" class="fa-stack fa-fw">
                            <i class="{{iconClasses.currentView}} fa-stack-2x"></i>
                            <i class="{{iconClasses.labelSolid}} fa-stack-1x"></i>
                        </span>
                        
                    </a>
                    <a style="margin-left: 1px; margin-right: 1px; min-height:15px;" class="silentbutton flexshrink1 flexcontainer" id="labelTemplatesDrop1" ng-click="labelTemplatesDropClicked()" data-toggle="dropdown" aria-expanded="false"><span class="flexshrink1 nowrapellipsis">{{selectedLabelTemplate.comp.name}}</span><span class="{{iconClasses.dropdown}} flexfixed"></span></a>
                    
                    <div style="-webkit-filter: blur(0px);" class="dropdown-menu dropdown-menu-right">
                        <div class="flexcontainer posrel">
                            <input class="searchbar form-control mr-sm-2 flexplus1" type="search" id="labelTemplatesFilterInput" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (labelTemplatefilterStr.length > 0)}" ng-model="labelTemplatefilterStr" ng-right-click="updateAndEditLabelAndDrawingOptionsMapcompBlacklists('label')">
                            <a ng-if="mapcompWrappers.length > 1 && labelTemplatefilterStr.length === 0" ng-click="updateAndEditLabelAndDrawingOptionsMapcompBlacklists('label')" class="keep-open silentbutton flexfixed posabs" style="right:5px;" data-toggle-tooltip data-placement="top" data-original-title="Filter by Mapcomp"><span class="{{iconClasses.filterByMapcomp}}"></span></a>
                        </div>

                        <div style="max-height:230px;min-width:200px;overflow-y: auto">
                            <a ng-repeat="labelTemplate in labelTemplates | filter:{comp:{name:labelTemplatefilterStr}} | filter:labelMapcompBlacklistFilter" ng-class="{'active':labelTemplate.id==selectedLabelTemplate.id}" class="dropdown-item clickable" ng-click="setSelectedLabelTemplate(labelTemplate, $event)">{{labelTemplate.comp.name}}</a>
                            <div ng-show="labelTemplates.length" class="dropdown-divider"></div>
                            <a ng-class="{'active':0==selectedLabelTemplate.id}" class="dropdown-item clickable" ng-click="setSelectedLabelTemplate()">Null Layer</a>
                        </div>
                        
                        <a ng-click="swapSelectedLabels(selectedMapcompWrapper, selectedLabelTemplate)" class="keep-open silentbutton dropdownmenueitempadding flexfixed"><span class="{{iconClasses.swapLabel}}"></span> Swap Template</a>
                        <div class="dropdown-divider"></div>
                        <a ng-click="addLabelTemplate()" class="keep-open silentbutton dropdownmenueitempadding flexfixed"><span class="{{iconClasses.plus}}"></span> Add Template</a>
                        <a ng-click="addLabelTemplateProject()" class="keep-open silentbutton dropdownmenueitempadding flexfixed"><span class="{{iconClasses.importFile}}"></span> Import Templates</a>
                        <a ng-click="showDownloadableLabelTemplateProjects()" class="keep-open silentbutton dropdownmenueitempadding flexfixed"><span class="{{iconClasses.download}}"></span> Download Templates</a>
                        <div ng-if="mapcompHelpers.isAnyMapcompLinked(mapcompWrappers)">
                            <div class="dropdown-divider"></div>
                            <label style="padding: 0rem 1.0rem;" class="keep-open silentbutton tooglebutton" ng-model="preferences.labelingGlobalUseLinkedMaster" uib-btn-checkbox><span class="{{iconClasses.heart(preferences.labelingGlobalUseLinkedMaster)}}"></span>
                                Label on preferred Mapcomp</label>
                        </div>
                    </div>
                    <a class="silentbutton flexfixed" ng-click="swapSelectedLabels(selectedMapcompWrapper, selectedLabelTemplate)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Swap Label Template">
                        <span class="{{iconClasses.swapLabel}}"></span>

                    </a>
                </div>
                <div class="flexplus1" style="border-left: 1px rgba(0,0,0,0.2) solid; min-width:3px;"></div>
                <a ng-if="isMapcompWrapperSelected()" ng-click="addArrowLayer(selectedMapcompWrapper)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Draw Arrow"><span class="{{iconClasses.arrow}}"></span></a>
                <a ng-if="isMapcompWrapperSelected()" class="silentbutton flexfixed" ng-click="addCanvasShapeLayer(selectedMapcompWrapper)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Create Shape Layer to draw on">
                    
                    <span style="font-size:0.6em" class="fa-stack fa-fw">
                        <i class="{{iconClasses.currentView}} fa-stack-2x"></i>
                        <i class="{{iconClasses.draw}} fa-stack-1x"></i>
                    </span>
                </a>
                <div class="btn-group flexfixed" style="margin-right: 2px;" role="group">
                    
                    <drawingoptionthumbnail class="clickable" drawingoption="selectedDrawingOption" bordervalues="drawingOptionsThumbBorderValues" ng-click="drawingOptionsDropClicked()" data-toggle="dropdown" aria-expanded="false"></drawingoptionthumbnail>
                    <div class="dropdown-menu dropdown-menu-right" id="drawingOptionsDropDown">
                        <div class="flexcontainer posrel">
                            <input class="searchbar form-control mr-sm-2 flexplus1" type="search" id="drawingOptionsFilterInput" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (drawingOptionsfilterStr.length > 0)}" ng-model="drawingOptionsfilterStr" ng-change="updateTooltips(true)" ng-right-click="updateAndEditLabelAndDrawingOptionsMapcompBlacklists('drawingOption')">
                            <a ng-if="mapcompWrappers.length > 1 && drawingOptionsfilterStr.length === 0" ng-click="updateAndEditLabelAndDrawingOptionsMapcompBlacklists('drawingOption')" class="keep-open silentbutton flexfixed posabs" style="right:5px;" data-toggle-tooltip data-placement="top" data-original-title="Filter by Mapcomp"><span class="{{iconClasses.filterByMapcomp}}"></span></a>
                        </div>
                        <div style="padding: 0rem 1.0rem;max-height: 200px;min-width:235px;overflow: auto" class="drawingoptionsgrid">
                            <drawingoptionthumbnail ng-class="{'styleThumbnailSelected':drawingOption.id==selectedDrawingOption.id}" class="clickable" ng-repeat="drawingOption in drawingOptions | filter:{name:drawingOptionsfilterStr}  | filter:drawingOptionsMapcompBlacklistFilter" ng-click="setSelectedDrawingOption(drawingOption, $event)" drawingoption="drawingOption" bordervalues="drawingOptionsThumbBorderValues" data-toggle-tooltip data-placement="top" title="" data-original-title="{{shortenString(drawingOption.name, 16)}}">
                            </drawingoptionthumbnail>
                            <a class="silentbutton adddrawingoptionsthumb" ng-click="editDrawingOptions('new');" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Style"><span class="{{iconClasses.add}}"></span></a>
                        </div>
                        <div ng-show="drawingOptions.length" style="padding: 0rem 1.0rem;"><a ng-click="applyDrawingOptionToSelectedLayers(selectedDrawingOption)" class="keep-open silentbutton flexfixed"><span class="{{iconClasses.swapFeatureStyle}}"></span>
                                Swap Layer&#39;s Style</a></div>
                        <div ng-show="drawingOptions.length" class="dropdown-divider"></div>
                        <div style="padding: 0rem 1.0rem;"><a ng-click="editDrawingOptions()" class="silentbutton flexfixed"><span class="{{iconClasses.styleDrawingOptions}}"></span>
                                Edit Styles</a></div>
                        <div class="dropdown-divider"></div>
                        
                        <label style="padding: 0rem 1.0rem;" class="keep-open silentbutton tooglebutton" ng-class="{'active': preferences.drawingGlobalSimplify}" ng-click="toggleSimplifyGeometry()">
                            <span class="{{iconClasses.checkbox(preferences.drawingGlobalSimplify)}}"></span>
                            Simplify Geometry{{preferences.drawingGlobalSimplify ?
                            preferences.drawingGlobalSimplifyByZoomRange ?' (Max Zoom)' : ' (Current Zoom)' :
                            ''}}</label>
                        <label style="padding: 0rem 1.0rem;" class="keep-open silentbutton tooglebutton" ng-model="preferences.drawingGlobalAutoStrokeWidth" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferences.drawingGlobalAutoStrokeWidth)}}"></span>
                            Auto Stroke Width</label>
                        <label style="padding: 0rem 1.0rem;" class="keep-open silentbutton tooglebutton" ng-model="preferences.drawingGlobalIndividualLayers" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferences.drawingGlobalIndividualLayers)}}"></span>
                            Individual Layers</label>
                        <label style="padding: 0rem 1.0rem;" class="keep-open silentbutton tooglebutton" ng-model="preferences.drawingGlobalDrawInsideMapcomp" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferences.drawingGlobalDrawInsideMapcomp)}}"></span>
                            Inside Mapcomp</label>
                        <label ng-if="mapcompHelpers.isAnyMapcompLinked(mapcompWrappers)" style="padding: 0rem 1.0rem;" class="keep-open silentbutton tooglebutton" ng-model="preferences.drawingGlobalUseLinkedMaster" uib-btn-checkbox><span class="{{iconClasses.heart(preferences.drawingGlobalUseLinkedMaster)}}"></span>
                            Draw on preferred Mapcomp</label>
                    </div>
                </div>
                <a class="silentbutton flexfixed" ng-click="applyDrawingOptionToSelectedLayers(selectedDrawingOption)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Swap Shape Layer Style">
                    <span class="{{iconClasses.swapFeatureStyle}}"></span>
                    
                </a>
            </div>
            
        </div>
        <div class="windowlayoutstate{{windowLayoutState.searchbar || 0}}">
            <div class="flexcontainer">
                <div class="flexplus1">
                    <input class="searchbar form-control mr-sm-2" type="search" placeholder="&#xF002; Search..." style="width:100%" ng-class="{onlinesearchactive: (onlineSearchString.length > 0)}" onenterkey="onlineSearchResultsOnEnter()" ng-model="onlineSearchString">
                    <div ng-if="onlineSearchPending" class="progress">
                        <div class="progress-bar progress-bar-striped" ng-class="{'progress-bar-animated': onlineSearchPendingColorType == 0, 'bg-success': onlineSearchPendingColorType == 1,'bg-danger': onlineSearchPendingColorType == 2}" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%"></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.searchresults || 0}}" style="overflow: auto">
            <div class="listitemborder mapcomplistitem" ng-if="onlineSearchResults.length < 1 && !onlineSearchPending && onlineSearchString.length > 0">
                No Features found
            </div>
            <div class="listitemborder mapcomplistitem itemhover flexcontainer" ng-repeat="feature in onlineSearchResults track by $index">
                <div ng-if="feature.type!='separator'" class="silentbutton flexplus1" ng-mouseenter="searchResultMouseEnter(feature, $event)" ng-mouseleave="searchResultMouseLeave($event)" ng-click="onlineSearchResultClicked(feature, undefined, $event)">
                    <div>
                        <span ng-if="feature.properties.osm_type == 'node'" class="{{iconClasses.point}}"></span>
                        <span ng-if="feature.properties.osm_type == 'way'" class="{{iconClasses.osmrelation}}"></span>
                        <span ng-if="feature.properties.osm_type == 'relation'" class="{{iconClasses.osmrelation}}"></span>
                        <span ng-if="feature.properties.osm_type == undefined" ng-class="getFeatureIconClass(feature)"></span>
                        {{feature.properties.GEOlayersDisplayName}}
                        <span class="itemhoverinside" ng-if="!feature.disableActionOptions && showOnlineSearchResultsAddOptions">
                            <a style="margin-left:5px;" ng-if="isMapcompWrapperSelected()" ng-click="onlineSearchResultClicked(feature, 'setView', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Fit View">
                                <span class="{{iconClasses.currentView}}"></span>
                            </a>
                            <a ng-if="isMapcompWrapperSelected()" ng-click="onlineSearchResultClicked(feature, 'label', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Label">
                                <span class="{{iconClasses.label}}"></span>
                            </a>
                            <a ng-click="onlineSearchResultClicked(feature, 'draw', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Draw">
                                <span class="{{iconClasses.draw}}"></span>
                            </a>
                            <a ng-click="onlineSearchResultClicked(feature, 'download', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Add to Browser">
                                <span class="{{iconClasses.download}}"></span>
                            </a>
                        </span>
                    </div>
                    <div style="opacity:0.6;margin-top: 3px;margin-bottom: 1px;" class="flexcontainer"><small class="flexshrink1">{{shortenString(feature.properties.GEOlayersDisplayName2, 200)}}</small>
                    </div>
                </div>
                <div ng-if="feature.type=='separator'" class="searchresultseparator">
                    <span ng-if="feature.icon" class="{{iconClasses[feature.icon]}}"></span>
                    {{feature.name}}
                </div>
            </div>
            <div ng-if="onlineSearchResults.length" class="listitemborder mapcomplistitem">
                <small style="opacity:0.4">{{activeOnlineSearchApis().attribution}}</small>
            </div>

        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.editstyleinterfacecolorbar || 0}}">
            <div class="modal-content">
                <div style="margin-bottom: -1px;" ng-show="setupStyleInterface.baseColors.length" class="flexcontainer linemargins">
                    <colorpicker style="flex-grow: 1" ng-repeat="baseColor in setupStyleInterface.baseColors" ng-model="baseColor.color" ng-change="" data-toggle-tooltip data-placement="top" title="" data-original-title="{{baseColor.name}}"></colorpicker>
                    <div style="height:22px;" ng-if="setupStyleInterface.baseColorPresets && setupStyleInterface.baseColorPresets.length" class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right scrollable-menu">
                            <colorpresetthumbnail ng-repeat="baseColorPreset in setupStyleInterface.baseColorPresets track by $index" class="opacityhover clickable" ng-click="applyBaseColorPresetToStyleInterface(setupStyleInterface, baseColorPreset);" ng-model="baseColorPreset"></colorpresetthumbnail>
                        </div>
                    </div>

                </div>
                
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.createmapcomp2colorbar || 0}}">
            <div class="modal-content">
                <div style="margin-bottom: -1px;" ng-if="newMapcompWrapper.styleInterface.baseColors.length" class="flexcontainer linemargins">
                    <colorpicker style="flex-grow: 1;flex-shrink: 1;min-width:0px;width:10px;" ng-repeat="baseColor in newMapcompWrapper.styleInterface.baseColors" ng-model="baseColor.color" ng-change="refreshStyleInterfaceId(newMapcompWrapper.styleInterface);applyStyleInterfaceToNewMapcompWrapper(newMapcompWrapper.styleInterface)" data-toggle-tooltip data-placement="top" title="" data-original-title="{{baseColor.name}}">
                    </colorpicker>
                    <div style="height:22px;" ng-if="newMapcompWrapper.styleInterface.baseColorPresets && newMapcompWrapper.styleInterface.baseColorPresets.length" class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
                        <div class="dropdown-menu dropdown-menu-right scrollable-menu">
                            <colorpresetthumbnail ng-repeat="baseColorPreset in newMapcompWrapper.styleInterface.baseColorPresets track by $index" class="opacityhover clickable" ng-click="applyBaseColorPresetToStyleInterface(newMapcompWrapper.styleInterface, baseColorPreset);applyStyleInterfaceToNewMapcompWrapper(newMapcompWrapper.styleInterface)" ng-model="baseColorPreset"></colorpresetthumbnail>
                        </div>
                        <button type="button" class="btn btn-sm btn-secondary" ng-click="applyNextBaseColorPreset(newMapcompWrapper.styleInterface);applyStyleInterfaceToNewMapcompWrapper(newMapcompWrapper.styleInterface)"><span style="font-size:10px;" class="{{iconClasses.loop}}"></span></button>
                    </div>

                </div>
                <div style="margin-bottom: -1px;" ng-if="!newMapcompWrapper.styleInterface.baseColors.length" class="flexcontainer linemargins">
                    <span class="flexcontainer flexplus1 linemargins" ng-if="newMapcompWrapper.styleInterface.indexedVars[0].prominent">
                        <div ng-if="newMapcompWrapper.styleInterface.indexedVars[0].type == 'string'" class="flexcontainer flexplus1">
                            <div ng-if="newMapcompWrapper.styleInterface.indexedVars[0].options.length" class="btn-group flexcontainer flexplus1" role="group">
                                <div class="btn-group flexcontainer flexplus1" role="group">
                                    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle flexplus1" data-toggle="dropdown" aria-expanded="false">{{newMapcompWrapper.styleInterface.indexedVars[0].value}}</button>
                                    <div style="width:100%" class="dropdown-menu scrollable-menu">
                                        <a ng-repeat="option in newMapcompWrapper.styleInterface.indexedVars[0].options.split(',')" class="dropdown-item clickable" ng-click="newMapcompWrapper.styleInterface.indexedVars[0].value = option;refreshStyleInterfaceId(newMapcompWrapper.styleInterface);applyStyleInterfaceToNewMapcompWrapper(newMapcompWrapper.styleInterface)">{{option}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </div>
        </div>
        <div ng-controller="mapcompNavController" id="mapcompNavController" style="overflow: hidden" class="flexcontainervertical windowlayoutstate{{windowLayoutState.mainUiMap || 0}} posrel">
            <div class="flexplus1 opactitybg" style="min-height: 200px;" id="mainUiMap"></div>
            <span ng-if="windowLayoutState.searchbar" class="uiMapControlsTopLeft" style="padding-left:3px;padding-right:3px;">
                <a class="silentbutton flexfixed" style="margin-left:0px;margin-right:0px;" ng-click="reverseGeocodeMainUiMapCenter()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Find Features at Coordinate">
                    <span class="{{iconClasses.reverseGeocodeMarker}}"></span>
                </a>
            </span>
            <span class="uiMapControlsTopRight" style="padding-left:3px;padding-right:3px;">
                <label ng-if="selectedMapcompWrapper.comp.id && windowLayoutState.mainUiMapControlsMapcomp" style="margin-right:0px;" class="silentbutton tooglebutton" ng-model="preferences.showSelectedMapcompViewInMainUIMap" data-toggle-tooltip data-placement="top" title="" data-original-title="Show Mapcomp View" uib-btn-checkbox><span class="{{iconClasses.toggleMapcompView}}"></span></label>
                <a ng-if="windowLayoutState.name=='default' && selectedMapcompWrapper.comp.id" ng-click="mainUiMapHelpers.toggleDefaultStyle()" style="margin-left:0px;margin-top:3px;" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Change Preview Map Imagery">
                    <span class="{{iconClasses.previewMapImagery}}"></span>
                </a>
            </span>
            <div class="flexcontainer uiMapControls">
                <a ng-show="selectedMapcompWrapper.comp.id && windowLayoutState.mainUiMapControlsMapcomp" style="margin-left:3px;margin-right:3px;" ng-click="setViewKeyframes()" class="silentbutton flexfixed" ng-class="{'aniOpacityLoop':highlightSetViewKeyframes}" data-toggle-tooltip data-placement="top" title="" data-original-title="Keyframe">
                    <span class="{{iconClasses.keyframe}}"></span>
                </a>
                <label ng-if="preferences.syncMapviewGlobally" ng-show="selectedMapcompWrapper.comp.id && windowLayoutState.mainUiMapControlsMapcomp" class="silentbutton tooglebutton" ng-model="helper.mapcompSyncGlobally" ng-click="setMapcompSyncsGlobally(helper.mapcompSyncGlobally)" data-toggle-tooltip data-placement="top" title="" data-original-title="Link Mapcomp View" uib-btn-checkbox><span ng-show="!selectedMapcompWrapper.data.syncRotation || !showUpdateMapcompViewSpinner" class="{{helper.mapcompSyncGlobally?iconClasses.syncMapcompView:iconClasses.syncMapcompViewDisabled}}"></span><span ng-show="selectedMapcompWrapper.data.syncRotation && showUpdateMapcompViewSpinner" class="{{iconClasses.spinner}}"></span></label>
                <label ng-if="!preferences.syncMapviewGlobally" ng-show="selectedMapcompWrapper.comp.id && windowLayoutState.mainUiMapControlsMapcomp" class="silentbutton tooglebutton" ng-model="selectedMapcompWrapper.data.syncGeo" ng-click="updateMapPivotUiMapFromMapcomp(selectedMapcompWrapper.data.syncGeo)" data-toggle-tooltip data-placement="top" title="" data-original-title="Sync Location" uib-btn-checkbox><span ng-show="!selectedMapcompWrapper.data.syncGeo || !showUpdateMapcompViewSpinner" class="{{iconClasses.syncGeo}}"></span><span ng-show="selectedMapcompWrapper.data.syncGeo && showUpdateMapcompViewSpinner" class="{{iconClasses.spinner}}"></span></label>
                <label ng-if="!preferences.syncMapviewGlobally" ng-show="selectedMapcompWrapper.comp.id && windowLayoutState.mainUiMapControlsMapcomp" class="silentbutton tooglebutton" ng-model="selectedMapcompWrapper.data.syncZoom" ng-click="updateMapPivotUiMapFromMapcomp(selectedMapcompWrapper.data.syncZoom)" data-toggle-tooltip data-placement="top" title="" data-original-title="Sync Zoom" uib-btn-checkbox><span ng-show="!selectedMapcompWrapper.data.syncZoom || !showUpdateMapcompViewSpinner" class="{{iconClasses.syncZoom}}"></span><span ng-show="selectedMapcompWrapper.data.syncZoom && showUpdateMapcompViewSpinner" class="{{iconClasses.spinner}}"></span></label>
                <a ng-show="selectedMapcompWrapper.comp.id && windowLayoutState.mainUiMapControlsMapcomp && !selectedMapcompWrapper.data.syncGeo && !selectedMapcompWrapper.data.syncZoom && !selectedMapcompWrapper.data.syncRotation" style="margin-right:0px;" ng-click="setSelectedMapcompViewToMainUiMap()" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Set Mapcomp View">
                    <span class="{{iconClasses.currentView}}"></span>
                </a>
                <a style="margin-right:15px;margin-left:5px;" ng-click="setMainUiMapZoom(-1, false, $event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Zoom out">
                    <span class="{{iconClasses.zoomOut}}"></span>
                </a>
                <slider class="flexplus1" ng-model="zoomVal2" min="0" step="0.01" max="0.99" ng-change="setMainUiMapZoom(0,true,$event)" tooltip="hide"></slider>
                <a style="margin-left:5px;margin-right:2px;" ng-click="setMainUiMapZoom(1, false, $event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Zoom in">
                    <span class="{{iconClasses.zoomIn}}"></span>
                </a>
                <a style="margin-right:5px;" ng-click="resetRotation()" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Reset rotation">
                    <span class="{{iconClasses.resetRotation}}"></span>
                </a>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.reversegeocoderesults || 0}}" style="overflow: auto">
            <div ng-if="reverseGeocodePending" class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%"></div>
            </div>
            <div class="listitemborder silentbutton mapcomplistitem" style="width:100%" ng-if="reverseGeocodeResults.length < 1 && !reverseGeocodePending">
                no Features found
            </div>
            <div class="listitemborder mapcomplistitem itemhover flexcontainer" style="width:100%" ng-repeat="feature in reverseGeocodeResults track by $index">
                <div ng-if="feature.type!='separator'" class="silentbutton flexplus1" ng-mouseenter="searchResultMouseEnter(feature, $event)" ng-mouseleave="searchResultMouseLeave($event)" ng-click="onlineSearchResultClicked(feature)">
                    <div>
                        <span ng-if="feature.properties.osm_type == 'node'" class="{{iconClasses.point}}"></span>
                        <span ng-if="feature.properties.osm_type == 'way'" class="{{iconClasses.osmrelation}}"></span>
                        <span ng-if="feature.properties.osm_type == 'relation'" class="{{iconClasses.osmrelation}}"></span>
                        <span ng-if="feature.properties.osm_type == undefined" ng-class="getFeatureIconClass(feature)"></span>
                        {{feature.properties.GEOlayersDisplayName}}
                        <span class="itemhoverinside" ng-if="!feature.disableActionOptions && showOnlineSearchResultsAddOptions">
                            <a style="margin-left:5px;" ng-if="isMapcompWrapperSelected()" ng-click="onlineSearchResultClicked(feature, 'setView', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Fit View">
                                <span class="{{iconClasses.currentView}}"></span>
                            </a>
                            <a ng-if="isMapcompWrapperSelected()" ng-click="onlineSearchResultClicked(feature, 'label', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Label">
                                <span class="{{iconClasses.label}}"></span>
                            </a>
                            <a ng-click="onlineSearchResultClicked(feature, 'draw', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Draw">
                                <span class="{{iconClasses.draw}}"></span>
                            </a>
                            <a ng-click="onlineSearchResultClicked(feature, 'download', $event)" class="silentbutton flexfixed hoverinside" data-toggle-tooltip data-placement="top" title="" data-original-title="Add to Browser">
                                <span class="{{iconClasses.download}}"></span>
                            </a>
                        </span>
                    </div>
                    <div style="opacity:0.6;margin-top: 3px;margin-bottom: 1px;" class="flexcontainer"><small class="flexshrink1">{{shortenString(feature.properties.GEOlayersDisplayName2, 200)}}</small>
                    </div>
                </div>
                <div ng-if="feature.type=='separator'" class="searchresultseparator">
                    <span ng-if="feature.icon" class="{{iconClasses[feature.icon]}}"></span>
                    {{feature.name}}
                </div>
            </div>
            <div ng-if="reverseGeocodeResults.length" class="listitemborder mapcomplistitem">
                <small style="opacity:0.4">{{activeOnlineSearchApis().attribution}}</small>
            </div>
        </div>
        <div ng-controller="browserController" id="browserController" class="flexcontainervertical windowlayoutstate{{windowLayoutState.browser || 0}}" style="flex-basis: 150px;">
            <div class="flexcontainer flexfixed" style="margin-top:3px;">
                <div class="flexfixed">
                    <div class="btn-group btn-group-sm dropright" role="group">
                        <a class="silentbutton" data-toggle="dropdown" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Features to Browser"><span class="{{iconClasses.plus}}"></span></a>
                        <div class="dropdown-menu scrollable-menu">
                            
                            
                            
                            
                            <a class="silentbutton dropdownmenueitempadding clickable" ng-click="setWindowLayoutState('selectdownloadfeatureset')"><span class="{{iconClasses.download}}"></span> Download Features</a>
                            <a class="silentbutton dropdownmenueitempadding clickable" ng-click="importGeoJsonFromFile($event)"><span class="{{iconClasses.importFile}}"></span> Import File</a>
                            <a class="silentbutton dropdownmenueitempadding clickable" ng-click="addCurrentView()"><span class="{{iconClasses.currentView}}"></span> Mapcomp View</a>
                            
                            <a class="silentbutton dropdownmenueitempadding clickable" ng-click="addSelectedLayerFeaturesToBrowser()"><span class="{{iconClasses.featureFromLayer}}"></span>
                                Feature from Layer</a>
                            <a class="silentbutton dropdownmenueitempadding clickable" ng-click="addFeatureCollection()"><span class="{{iconClasses.featureCollection}}"></span>
                                Feature Collection</a>
                        </div>
                    </div>
                </div>
                <input class="searchbar form-control mr-sm-2 flexplus1" type="search" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (filterStr.length > 0)}" ng-model="filterStr" ng-change="timeoutAndUpdateFilter()">
                <div class="flexfixed" style="margin-left: 5px;">
                    <label class="tooglebutton" ng-model="filterToggles.pointFeatures" ng-click="updateFilter()" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Filter Points"><span class="{{iconClasses.point}}"></span></label>
                    <label class="tooglebutton" ng-model="filterToggles.lineFeatures" ng-click="updateFilter()" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Filter Lines"><span class="{{iconClasses.line}}"></span></label>
                    <label class="tooglebutton" ng-model="filterToggles.polygonFeatures" ng-click="updateFilter()" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Filter Polygons"><span class="{{iconClasses.polygon}}"></span></label>
                    <label class="tooglebutton" ng-model="filterToggles.inView" ng-click="updateFilter()" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Filter View"><span class="{{iconClasses.currentView}}"></span></label>
                    <label style="margin-left: 6px;margin-right: 5px;" class="tooglebutton" ng-click="previewFeaturesInMainUiMap()" ng-model="showSelectionInMainUIMap" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Preview selection in map"><span class="{{iconClasses.showSelectionInMainUIMap}}"></span></label>
                    
                </div>
            </div>
            <div class="dndlist flexplus1 flexcontainer" ng-click="clickedBrowserSomewhere($event)" style="min-height:100px;line-height:1.5;">
                <ul tabindex="1" onremovekey="removeBtnClick($event)" onenterkey="renameFeatures()" style="max-height:1000px;min-height:100px;overflow-x:hidden;" class="listfield dndlist stylescrollbar flexplus1 nofocusoutline" vs-repeat dnd-list="items" dnd-drop="dndDropFeature2(items, item, index)" id="featureBrowserScrollContainer">
                    <li ng-style="{'margin-left':((getFeatureDepthIndex(item)+1)*15+3)+'px'}" ng-class="{'silentlistitem':(item.type.toUpperCase() === 'FEATURECOLLECTION' && displayItemsFilter),'isfeaturecollection':(item.type.toUpperCase() === 'FEATURECOLLECTION')}" dnd-draggable="{}" dnd-effect-allowed="move" dnd-dragstart="dndDragstartFeature(item, event);" dnd-dragend="dndDragendFeature(item, {});" dnd-canceled="dndDragcancelFeature();" ng-repeat="item in items track by $index" class="listitem" ng-enabled="!item.GEOlayersPendingFeature">
                        <div dnd-nodrag ng-if="!item.GEOlayersPendingFeature" style="position:absolute;left:-17px;top:0px;width:10px;" ng-show="(geojsonHelpers.isFeaturecollection(item) && !displayItemsFilter)" class="silentbutton clickable" ng-click="toggleExpandFeatureCollection(item);">

                            <span ng-class="getExpandFeatureIconClass(item)"></span>
                        </div>
                        <div dnd-nodrag ng-if="item.GEOlayersPendingFeature && item.cancelJob" style="position:absolute;left:-17px;top:0px;width:10px;" class="silentbutton clickable" ng-click="item.cancelJob($event);">
                            <span class="{{iconClasses.x}}"></span>
                        </div>
                        
                        <div style="display:inline-block;white-space:nowrap;max-width:100%;" class="clickable listitemselectionpadding posrel" ng-class="getIsSelectedClass(item)" ng-click="clickedFeature(item, $event)" ng-dblclick="dblClickedFeature()" ng-right-click="toggleExpandFeatureCollection(item);">
                            <span ng-class="getFeatureIconClass(item)"></span>
                            {{geojsonHelpers.getFeatureName(item,
                            (selectedMapcompWrapper.data?selectedMapcompWrapper.data.language:undefined))}}

                            <div ng-show="item.GEOlayersPendingFeature" class="overlay flexcontainervertical">
                                <div class="flexplus1"></div>
                                <div class="progress flexfixed" style="height:3px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width:{{item.percentage}}%"></div>
                                </div>
                            </div>
                        </div>
                        <div dnd-nodrag ng-if="canUpdateFromSrcUrl(item)" class="silentbutton clickable flexfixed" ng-click="updateFeatureFromSrcUrl(item)">
                            <span class="{{iconClasses.update}}"></span>
                        </div>
                        <span class="styleThumbnail clickable" ng-if="item.type.toUpperCase() !== 'FEATURECOLLECTION'" style="position:absolute;top:0;right:0;">
                            <div class="hostBgd">

                                <drawingoptionthumbnail drawingoption="getTransformedDrawingOptionOfFeatureOrSelected(item)" bordervalues="drawingOptionsThumbBorderValues" ng-class="{'featurehasdrawingoption':hasFeatureDrawingOption(item),'featurehasnodrawingoption':!hasFeatureDrawingOption(item)}" class="clickable" data-toggle="dropdown" aria-expanded="false" ng-click="updateTooltips(true)"></drawingoptionthumbnail>
                                <div class="dropdown-menu scrollable-menu" style="min-width:220px;">
                                    <input class="searchbar form-control mr-sm-2 flexplus1" type="search" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (drawingOptionsfilterStr.length > 0)}" ng-model="drawingOptionsfilterStr" ng-change="updateTooltips(true)">
                                    <div style="padding: 0rem 1.0rem;max-height:140px;overflow-x:auto;" class="drawingoptionsgrid">
                                        <drawingoptionthumbnail ng-class="{'styleThumbnailSelected':drawingOption.id==item.properties.GEOlayersDrawingOption.id}" class="clickable" ng-repeat="drawingOption in drawingOptions | filter:{name:drawingOptionsfilterStr}" ng-click="setDrawingOptionOfSelectedFeatures(drawingOption, item)" drawingoption="drawingOption" bordervalues="drawingOptionsThumbBorderValues" data-toggle-tooltip data-placement="top" title="" data-original-title="{{shortenString(drawingOption.name, 16)}}">
                                        </drawingoptionthumbnail>
                                        <a class="silentbutton adddrawingoptionsthumb" ng-click="editDrawingOptions('new');" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Style"><span class="{{iconClasses.add}}"></span></a>
                                    </div>
                                    <div ng-show="hasFeatureDrawingOption(item)" style="padding: 0rem 1.0rem;"><a ng-click="removeDrawingOptionOfSelectedFeatures(item)" class="silentbutton flexfixed"><span class="{{iconClasses.remove}}"></span>
                                            Remove Custom Style</a></div>

                                </div>
                            </div>
                        </span>
                    </li>
                </ul>
            </div>



            
            <div ng-show="selectedFeatures.length > 0" class="flexcontainer flexfixed" style="margin-left: 5px; margin-right: 5px; margin-bottom: 2px; flex-wrap: wrap;">
                <div ng-show="isMapcompWrapperSelected()" class="btn-group" role="group">
                    <a class="silentbutton" data-toggle="dropdown" ng-click="removeOpenTooltips()" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Fit View to Feature"><span class="{{iconClasses.currentView}}"></span></a>
                    <div class="dropdown-menu" style="min-width:220px;">
                        <a ng-click="fitMapcompView(selectedMapcompWrapper, selectedFeatures)" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.currentView}}"></span></span>
                            Fit View to Feature{{selectedFeatures.length == 1?"":"s"}}</a>
                        <a ng-click="changeFeatureAnimationDurationModalAnd(animateViewAlongFeature, [selectedMapcompWrapper, selectedFeatures])" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.currentView}}"></span><span class="{{iconClasses.movingAdd}}"></span></span> Animate View along
                            Feature{{selectedFeatures.length == 1?"":"s"}}</a>
                        <a ng-click="changeFeatureAnimationDurationModalAnd(animateViewToFeature, [selectedMapcompWrapper, selectedFeatures])" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.currentView}}"></span><span class="{{iconClasses.movingAdd}}"></span></span> Animate View to
                            Feature{{selectedFeatures.length == 1?"":"s"}}</a>
                        <a ng-if="selectedFeatures.length > 1" ng-click="changeFeatureAnimationDurationModalAnd(animateViewBetweenFeatures, [selectedMapcompWrapper, selectedFeatures])" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.currentView}}"></span><span class="{{iconClasses.movingAdd}}"></span></span> Animate View between
                            Feature{{selectedFeatures.length == 1?"":"s"}}</a>
                    </div>
                </div>
                <div ng-show="isMapcompWrapperSelected()" class="btn-group" role="group">
                    <a class="silentbutton" data-toggle="dropdown" ng-click="removeOpenTooltips()" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Pin Layer to Feature"><span class="{{iconClasses.snapLayer}}"></span></a>
                    <div class="dropdown-menu" style="min-width:220px;">
                        <a ng-click="snapSelectedLayersBrowserSelection(selectedMapcompWrapper)" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.snapLayer}}"></span></span>
                            Pin Layers to Feature{{selectedFeatures.length == 1?"":"s"}}</a>
                        <a ng-click="changeFeatureAnimationDurationModalAnd(snapSelectedLayersBrowserSelection, [selectedMapcompWrapper, true])" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.snapLayer}}"></span><span class="{{iconClasses.movingAdd}}"></span></span> Animate Layers along
                            Feature{{selectedFeatures.length == 1?"":"s"}}</a>
                    </div>
                </div>
                <div ng-show="isMapcompWrapperSelected()" class="btn-group" role="group">
                    <a class="silentbutton" data-toggle="dropdown" ng-click="removeOpenTooltips()" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Label Features"><span class="{{iconClasses.label}}"></span></a>
                    <div class="dropdown-menu" style="min-width:220px;">
                        <a ng-click="addLabelsToBrowserSelection(selectedMapcompWrapper, selectedLabelTemplate)" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.label}}"></span></span>
                            Add {{selectedLabelTemplate.id?'Label':'Null'}}{{selectedFeatures.length == 1?"":"s"}}</a>
                        <a ng-click="changeFeatureAnimationDurationModalAnd(addLabelsToBrowserSelection, [selectedMapcompWrapper, selectedLabelTemplate, true])" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.label}}"></span><span class="{{iconClasses.movingAdd}}"></span></span> Animate
                            {{selectedLabelTemplate.id?'Label':'Null'}}{{selectedFeatures.length == 1?" along
                            Feature":"s along Features"}}</a>
                        <a ng-if="selectedFeatures.length > 1" ng-click="changeFeatureAnimationDurationModalAnd(addLabelsToBrowserSelection, [selectedMapcompWrapper, selectedLabelTemplate, false, true])" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.label}}"></span><span ng-show="geojsonHelpers.getTimingProp(selectedFeatures[0])" class="{{iconClasses.timeOffsetAdd}}"></span>
                            </span> Add Labels with Time Offset</a>
                    </div>
                </div>
                <div class="btn-group" role="group">
                    <a class="silentbutton" data-toggle="dropdown" ng-click="removeOpenTooltips()" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Draw Features"><span class="{{iconClasses.draw}}"></span></a>
                    <div class="dropdown-menu" style="min-width:220px;">
                        <a ng-click="drawFeaturesToSelectedOrNewMapcomp(selectedFeatures, selectedDrawingOption)" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.draw}}"></span></span>
                            Draw Feature{{selectedFeatures.length == 1?"":"s"}}</a>
                        <a ng-click="changeFeatureAnimationDurationModalAnd(drawFeaturesToSelectedOrNewMapcomp,[selectedFeatures, selectedDrawingOption, true])" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.draw}}"></span><span class="{{iconClasses.movingAdd}}"></span></span> Animate Feature
                            Path{{selectedFeatures.length == 1?"":"s"}}</a>
                        <a ng-show="getSelectedFeatures().length > 1" ng-click="changeFeatureAnimationDurationModalAnd(drawFeaturesToSelectedOrNewMapcomp,[selectedFeatures, selectedDrawingOption, false, true]);" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.draw}}"></span><span ng-if="geojsonHelpers.getTimingProp(selectedFeatures[0])" class="{{iconClasses.timeOffsetAdd}}"></span></span> Draw with Time Offset</a>
                    </div>
                </div>
                <a ng-click="addFeatureCollectionFromSelection()" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Feature Collection"><span class="{{iconClasses.featureCollection}}"></span></a>
                <a ng-click="selectedFeatureProperties()" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Feature Properties"><span class="{{iconClasses.featureProperties}}"></span></a>

                <div class="btn-group" role="group">
                    <a class="silentbutton" data-toggle="dropdown" ng-click="removeOpenTooltips()" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Connect Features"><span class="{{iconClasses.connectFeatures}}"></span></a>
                    <div class="dropdown-menu" style="min-width:220px;">
                        <a ng-click="createFeatureMeshFromSelection()" class="silentbutton dropdownmenueitempadding"><span class="{{iconClasses.straightRoute}}"></span> Straight Line Mesh</a>
                        <a ng-click="createFeatureMeshFromSelection(true)" class="silentbutton dropdownmenueitempadding"><span class="{{iconClasses.planeRoute}}"></span>
                            Plane Route Mesh</a>
                        <a ng-click="createConnectionLineString()" class="silentbutton dropdownmenueitempadding"><span class="{{iconClasses.straightRoute}}"></span> Straight Line</a>
                        <a ng-click="createConnectionLineString(true)" class="silentbutton dropdownmenueitempadding"><span class="{{iconClasses.planeRoute}}"></span>
                            Plane Route</a>
                        <div class="dropdown-divider"></div>
                        <a ng-repeat="profile in activeOnlineRoutingApi().profiles" ng-click="getRouteFromSelection(profile)" class="silentbutton dropdownmenueitempadding"><span class="{{iconClasses[profile.iconClassName]}}"></span> {{profile.name}}</a>
                        <div class="dropdownmenueitempadding" style="opacity:0.4;padding-top:0;padding-bottom:0;">
                            <small>{{activeOnlineRoutingApi().attribution}}</small>
                        </div>
                    </div>
                </div>
                <a ng-click="meshFromSelectedFeatures()" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Lines from Polygons"><span class="{{iconClasses.polygonMesh}}"></span></a>
                <a ng-show="!(selectedFeatures.length == 1 && geojsonHelpers.isFeaturecollection(selectedFeatures[0]))" ng-click="mergeSelectedFeatures()" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Merge Features"><span class="{{iconClasses.mergeFeatures}}"></span></a>

                <div ng-show="selectedFeatures.length == 1 && geojsonHelpers.isFeaturecollection(selectedFeatures[0])" class="btn-group" role="group">
                    <a class="silentbutton" data-toggle="dropdown" ng-click="removeOpenTooltips()" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Merge Features"><span class="{{iconClasses.mergeFeatures}}"></span></a>
                    <div class="dropdown-menu" style="min-width:250px;">
                        <a ng-click="mergeSelectedFeatures()" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.mergeFeatures}}"></span></span>
                            Merge Feature</a>
                        <a ng-click="mergeSelectedFeaturesByName()" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.mergeFeatures}}"></span></span>
                            Merge Features with same name</a>
                    </div>
                </div>
                <a ng-show="selectedFeatures.length == 2" ng-click="subtractSelectedFeature()" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Subtract lower Feature"><span class="{{iconClasses.subtractFeature}}"></span></a>
                <a ng-show="selectedFeatures.length == 1 && geojsonHelpers.isFeatureExplodable(selectedFeatures[0])" ng-click="explodeSelectedFeature()" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Split Feature"><span class="{{iconClasses.explodeFeature}}"></span></a>

                <div class="btn-group" role="group">
                    <a class="silentbutton" data-toggle="dropdown" ng-click="removeOpenTooltips()" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Points inside Polygons"><span class="{{iconClasses.injectPointProperties}}"></span></a>
                    <div class="dropdown-menu" style="min-width:250px;">
                        <a ng-click="pointsInPolygonsSelection()" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.injectPointProperties}}"></span></span>
                            Points inside Polygons</a>
                        <a ng-click="injectPointPropertiesToPolygonsSelection()" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.injectPointProperties}}"></span></span>
                            Inject Point Properties to Polygons</a>
                        <a ng-click="convertToPointSelection()" class="silentbutton dropdownmenueitempadding"><span style="display: inline-block;min-width:22px"><span class="{{iconClasses.point}}"></span></span>
                            Convert Polygons to Points</a>
                    </div>
                </div>
                <a ng-click="propertyChartFromSelectedFeature()" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Draw Property Charts"><span class="{{iconClasses.charts}}"></span></a>
                <a ng-click="exportBtnClick($event)" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Export Features"><span class="{{iconClasses.exportFile}}"></span></a>
                <a ng-click="removeBtnClick($event)" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="Remove Features"><span class="{{iconClasses.remove}}"></span></a>
            </div>
            
        </div>

        
        <div ng-if="windowLayoutState.preferences" class="flexcontainer windowlayoutstate{{windowLayoutState.preferences || 0}}">
            <div class="modal-content">
                <div class="modal-body">

                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            General
                        </div>
                        <div class="card-body">
                            <div class="linemargins">

                                <div><span>Default Composition Settings:</span></div>
                                <div class="flexcontainer">
                                    <span style="width:70px" class="flexfixed inlinemargins">Size</span>
                                    <changevalbyclick class="flexfixed inlinemargins" suffix="_px" ng-model="preferencesToEdit.defaultMapcompWidth" min="4" step="1" max="10000">
                                    </changevalbyclick>
                                    <span class="flexfixed inlinemargins">x</span>
                                    <changevalbyclick class="flexfixed" suffix="_px" ng-model="preferencesToEdit.defaultMapcompHeight" min="4" step="1" max="10000">
                                    </changevalbyclick>
                                </div>
                                <div class="flexcontainer">
                                    <span style="width:70px" class="flexfixed inlinemargins">Framerate</span>
                                    <changevalbyclick class="flexfixed" suffix="_fps" ng-model="preferencesToEdit.defaultMapcompFrameRate" min="1" max="99">
                                    </changevalbyclick>
                                </div>
                                <div class="flexcontainer">
                                    <span style="width:70px" class="flexfixed inlinemargins">Duration</span>
                                    <changevalbyclick class="flexfixed" suffix="_seconds" min="1" max="10800" ng-model="preferencesToEdit.defaultMapcompDuration"></changevalbyclick>
                                </div>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span class="flexfixed inlinemargins">Default Language</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{preferencesToEdit.defaultLanguage.name}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a ng-repeat="language in languages" class="dropdown-item clickable" ng-click="preferencesToEdit.defaultLanguage = language">{{language.name}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="linemargins">
                                <label class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.smoothenView" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.smoothenView)}}"></span>
                                    Smoothen
                                    View Animations</label>
                            </div>
                            <div ng-if="preferencesToEdit.smoothenView" class="linemargins">
                                <div style="margin-bottom:-4px;"><span>Ease In:</span></div>
                                <div class="flexcontainer">
                                    <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.smoothenViewEaseIn" min="0" step="1" max="100" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_%" ng-model="preferencesToEdit.smoothenViewEaseIn" min="1" max="100">
                                    </changevalbyclick>
                                </div>
                                <div style="margin-bottom:-4px;"><span>Ease Out:</span></div>
                                <div class="flexcontainer">
                                    <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.smoothenViewEaseOut" min="0" step="1" max="100" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_%" ng-model="preferencesToEdit.smoothenViewEaseOut" min="1" max="100">
                                    </changevalbyclick>
                                </div>

                            </div>
                            <div style="margin-bottom:-4px;"><span>Default Animation Duration:</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.featureAnimationDuration" min="0.1" step="0.1" max="30" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_s" ng-model="preferencesToEdit.featureAnimationDuration" min="0.1" max="10800">
                                </changevalbyclick>
                            </div>
                            <div>
                                <label class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.promptFeatureAnimationDurationBeforeAction" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.promptFeatureAnimationDurationBeforeAction)}}"></span>
                                    Show Prompt for Animation Duration</label>
                            </div>
                            <div>
                                <label class="silentbutton tooglebutton linemargins" ng-change="removeOpenTooltips();disposeAllTooltips()" ng-model="preferencesToEdit.showTooltips" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.showTooltips)}}"></span> Show
                                    Tooltips</label>
                            </div>
                            <div>
                                <label ng-if="showHiddenPrefs" class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.lottieAnimations" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.lottieAnimations)}}"></span> UI
                                    animations</label>
                            </div>
                            <div>
                                <label ng-if="showHiddenPrefs" class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.allwaysPurgeUndoCache" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.allwaysPurgeUndoCache)}}"></span> Allways purge Undo Cache</label>
                            </div>
                            <div>
                                <label class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.allowHints" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.allowHints)}}"></span> Show
                                    Hints</label>
                            </div>
                            <div>
                                <label class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.useSystemColorPicker" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.useSystemColorPicker)}}"></span>
                                    Use
                                    System Color Picker</label>
                                
                            </div>
                            <div>
                                <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.finalizeOnlyWorkArea" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.finalizeOnlyWorkArea)}}"></span>
                                    Finalize only containing comps work area</label>
                            </div>
                            <div>
                                <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.showBboxOnPreviewMap" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.showBboxOnPreviewMap)}}"></span>
                                    Show Bounding Box of previewed Features</label>
                            </div>
                        </div>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Feature Search
                        </div>
                        <div class="card-body">
                            <p>The Feature Search can include multiple sources. Each source can be used for the search
                                by name, coordinate or both. Note that some sources only support search by name.</p>
                            <div class="dndlist flexcontainer">
                                <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="preferencesToEdit.activeOnlineSearchApis">
                                    <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="apiPref in preferencesToEdit.activeOnlineSearchApis" dnd-draggable="apiPref" dnd-moved="preferencesToEdit.activeOnlineSearchApis.splice($index, 1)" dnd-effect-allowed="move">
                                        <div style="margin:0px;" class="flexcontainer flexplus1">
                                            <div style="margin-top:6px;" class="flexfixed inlinemargins" ng-class="iconClasses.dragable"></div>
                                            <div dnd-nodrag class="flexplus1 inlinemargins clickable" style="padding-bottom: 5px;">
                                                <div class="flexcontainer linemargins">
                                                    <div class="btn-group flexfixed inlinemargins" role="group">
                                                        <div class="btn-group" role="group">
                                                            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{onlineSearchApis[apiPref.name]().displayName
                                                                || key + " (Not available)"}}</button>
                                                            <div class="dropdown-menu scrollable-menu">
                                                                <a ng-repeat="(key, value) in onlineSearchApis" class="dropdown-item clickable" ng-click="apiPref.name = key">{{value()['displayName']
                                                                    || key + " (Not available)"}}</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="flexplus1 flexcontainer inlinemargins">
                                                        
                                                        <div ng-if="apiPref.name == 'nominatim'" class="flexcontainer flexplus1">
                                                            <input type="text" class="form-control flexplus1" ng-model="apiPref.options.host" placeholder="https://nominatim.openstreetmap.org">
                                                        </div>
                                                        <div ng-if="apiPref.name == 'gitHub'" class="flexcontainer flexplus1">
                                                            <input type="text" class="form-control flexplus1" ng-model="apiPref.options.url" placeholder="https://github.com/username/repo">
                                                            <input type="text" class="form-control flexfixed" style="width:60px;" ng-model="apiPref.options.branch" placeholder="main">
                                                        </div>
                                                        <div ng-if="apiPref.name == 'file'" class="flexcontainer flexplus1">
                                                            <input type="text" class="form-control flexplus1" ng-model="apiPref.options.fileName" placeholder="local file path or url">
                                                            <filepicker class="flexfixed" ng-model="apiPref.options.fileName" prompt="Please choose a geospatial file." filter="geojson,json,kml,shp,gpx,csv,tsv,zip"></filepicker>
                                                        </div>
                                                        <div ng-if="apiPref.name == 'folder'" class="flexcontainer flexplus1">
                                                            <input type="text" class="form-control flexplus1" ng-model="apiPref.options.folderName" readonly="readonly" placeholder="pick a directory">
                                                            <folderpicker class="flexfixed" ng-model="apiPref.options.folderName" prompt="Please choose a folder containing geospatial files.">
                                                            </folderpicker>
                                                        </div>
                                                    </div>

                                                    <label ng-show="onlineSearchApis[apiPref.name]().getFeaturesByAddress?true:false" class="silentbutton tooglebutton linemargins" ng-model="apiPref.options.geocode" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Seach by Name"><span class="{{iconClasses.search}}"></span></label>
                                                    <label ng-show="onlineSearchApis[apiPref.name]().getFeaturesByLatLon?true:false" class="silentbutton tooglebutton linemargins" ng-model="apiPref.options.reverse" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Seach by Coordinate"><span class="{{iconClasses.reverseGeocodeMarker}}"></span></label>
                                                    <label ng-show="onlineSearchApis[apiPref.name]().getFeaturesByLatLon?false:true" style="opacity: 0.2;margin:2px;" class="linemargins">
                                                        <span class="{{iconClasses.reverseGeocodeMarker}}"></span>
                                                    </label>
                                                </div>

                                                <div class="flexcontainer">
                                                    <div class="inlinemargins"><span>Max Results</span></div>
                                                    <slider class="inlineslider flexplus1" ng-model="apiPref.options.maxSearchResults" min="1" step="1" max="10" tooltip="hide"></slider>
                                                    <changevalbyclick class="flexfixed" style="width:25px" suffix="" ng-model="apiPref.options.maxSearchResults" min="1" step="1" max="100">
                                                    </changevalbyclick>
                                                </div>
                                                <label ng-show="apiPref.name === 'naturalEarth'" class="silentbutton tooglebutton linemargins" ng-model="apiPref.options.innerBoundsFeature" uib-btn-checkbox><span class="{{iconClasses.checkbox(apiPref.options.innerBoundsFeature)}}"></span>
                                                    Inner Boundaries Feature</label>
                                                <label ng-show="apiPref.name === 'naturalEarth'" class="silentbutton tooglebutton linemargins" ng-model="apiPref.options.innerStatesFeature" uib-btn-checkbox><span class="{{iconClasses.checkbox(apiPref.options.innerStatesFeature)}}"></span>
                                                    All States of Country</label>
                                                <label ng-show="apiPref.name === 'naturalEarth'" class="silentbutton tooglebutton linemargins" ng-model="apiPref.options.disputedAreas" uib-btn-checkbox><span class="{{iconClasses.checkbox(apiPref.options.disputedAreas)}}"></span>
                                                    Disputed Areas of Country</label>
                                                <label ng-show="apiPref.name === 'browser'" class="silentbutton tooglebutton linemargins" ng-model="apiPref.options.onlyFavorites" uib-btn-checkbox><span class="{{iconClasses.checkbox(apiPref.options.onlyFavorites)}}"></span>
                                                    Only Favorites</label>
                                            </div>
                                            <div>
                                                <a ng-if="preferencesToEdit.activeOnlineSearchApis.length > 1" ng-click="preferencesToEdit.activeOnlineSearchApis.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <a ng-click="preferencesToEdit.activeOnlineSearchApis.push(activeOnlineSearchApis().newApiPref)" class="silentbutton linemargins"><span ng-class="iconClasses.add"></span></a>
                            <div>
                                <label class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.showSearchFeaturesOnHover" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.showSearchFeaturesOnHover)}}"></span>
                                    Preview Features in map</label>
                                <label ng-if="showHiddenPrefs" class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.preloadSearchFeatures" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.preloadSearchFeatures)}}"></span>
                                    Preload Features</label>
                            </div>
                            <div ng-if="showHiddenPrefs">
                                <div style="margin-bottom:-4px;"><span>Max Overpass elements to process:</span></div>
                                <div class="flexcontainer linemargins">
                                    <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.overpassMaxElementNrToParse" min="100000" step="1" max="1000000" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" suffix="" ng-model="preferencesToEdit.overpassMaxElementNrToParse" min="1" step="1" max="5000000">
                                    </changevalbyclick>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Mapcomp Imagery
                        </div>
                        <div class="card-body">
                            <div style="margin-bottom:-2px;"><span>Render directory:</span></div>
                            <div class="flexcontainer">
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.tilesPath" readonly="readonly">
                                <folderpicker class="flexfixed" ng-model="preferencesToEdit.tilesPath" prompt="Please choose a directory to store your rendered map imagery.">
                                </folderpicker>
                            </div>
                            <label class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.saveTilesInProjectDirectory" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.saveTilesInProjectDirectory)}}"></span>
                                Render to project directory</label>
                            <div ng-if="defaultStyleInterfaces.length" style="margin-top:10px;"><span>Default
                                    Imagery:</span></div>
                            <div class="input-group-sm flexplus1 flexcontainer" ng-repeat="defaultStyleInterface in defaultStyleInterfaces track by $index">
                                <styleinterfacethumbnail class="flexfixed inlinemargins" size="20" ng-model="defaultStyleInterface"></styleinterfacethumbnail>
                                <div class="flexplus1">{{defaultStyleInterface.name}}</div>
                                <a ng-click="toggleHideDefaultStyleInterfacesId(defaultStyleInterface)" class="silentbutton tooglebutton flexfixed" ng-class="{'active':!isDefaultStyleInterfacesHidden(defaultStyleInterface, preferencesToEdit)}"><span ng-class="iconClasses.show(!isDefaultStyleInterfacesHidden(defaultStyleInterface, preferencesToEdit))"></span></a>
                            </div>
                            <div class="flexcontainer" style="margin-top:10px;">
                                <div class="flexfixed">Custom Imagery:</div>
                                <div class="flexplus1"></div>
                                <div class="flexfixed">
                                    <a ng-click="importCustomStyleInterfaces($event)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Import Styles"><span ng-class="iconClasses.importFile"></span></a>
                                    <a ng-show="customStyleInterfaces.length" ng-click="exportCustomStyleInterfaces()" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Export All Styles"><span ng-class="iconClasses.exportFile"></span></a>
                                    <a ng-show="customStyleInterfaces.length" ng-click="confirmAndRemoveAllCustomStyleInterfaces()" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Remove all Styles"><span ng-class="iconClasses.remove"></span></a>
                                </div>
                            </div>
                            <div class="input-group-sm flexplus1 flexcontainer" ng-repeat="customStyleInterface in customStyleInterfaces track by $index">
                                <styleinterfacethumbnail class="flexfixed inlinemargins" size="20" ng-model="customStyleInterface"></styleinterfacethumbnail>
                                <div class="flexplus1">{{customStyleInterface.name}}</div>
                                <a ng-click="editAndSaveCustomStyleInterface(customStyleInterface)" class="silentbutton flexfixed"><span ng-class="iconClasses.styleImagery"></span></a>
                                <a ng-click="confirmAndRemoveCustomStyleInterface(customStyleInterface)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                            </div>
                            <div ng-click="addNewCustomStyleInterface()" class="silentbutton"><span class="{{iconClasses.plus}}"></span></div>
                            <div ng-if="showHiddenPrefs" style="margin-bottom:-2px;"><span>Load additional Imagery
                                    Styles
                                    from Directory:</span></div>
                            <div ng-if="showHiddenPrefs" class="flexcontainer">
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.additionalCustomStyleInterfacesPath" readonly="readonly">
                                <folderpicker class="flexfixed" ng-model="preferencesToEdit.additionalCustomStyleInterfacesPath" prompt="Please choose a directory to load custom imagery styles from.">
                                </folderpicker>
                                <a ng-click="preferencesToEdit.additionalCustomStyleInterfacesPath = ''" class="silentbutton flexfixed"><span ng-class="iconClasses.x"></span></a>
                            </div>
                            <div ng-if="showHiddenPrefs" style="margin-bottom:-2px;"><span>Load additional Imagery
                                    Styles
                                    from File:</span></div>
                            <div ng-if="showHiddenPrefs" class="flexcontainer">
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.additionalCustomStyleInterfacesFilePath" placeholder="local file or url">
                                <filepicker class="flexfixed" ng-model="preferencesToEdit.additionalCustomStyleInterfacesFilePath" prompt="Please choose a file to load custom imagery styles from."></filepicker>
                                <a ng-click="preferencesToEdit.additionalCustomStyleInterfacesFilePath = ''" class="silentbutton flexfixed"><span ng-class="iconClasses.x"></span></a>
                            </div>
                            <label ng-if="showHiddenPrefs" class="silentbutton tooglebutton" ng-model="preferencesToEdit.removeSymbolLayersOfMapboxStylesOnImport" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.removeSymbolLayersOfMapboxStylesOnImport)}}"></span>
                                remove symbol layers of mapbox styles</label>

                        </div>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Labels
                        </div>
                        <div class="card-body">
                            <label class="silentbutton tooglebutton linemargins" ng-model="preferencesToEdit.useCustomDefaultLabels" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.useCustomDefaultLabels)}}"></span>
                                Custom Label Template Project</label>
                            <div ng-show="preferencesToEdit.useCustomDefaultLabels" class="flexcontainer linemargins">
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.customDefaultLabelTemplatesPath" readonly="readonly">
                                <filepicker class="flexfixed" ng-model="preferencesToEdit.customDefaultLabelTemplatesPath" filter="aep,aet" prompt="Please choose an After Effects project that contains Label Template Compositions.">
                                </filepicker>
                            </div>
                            <div class="linemargins">
                                <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.showPromptToCompleteFeatureDataForLabelTemplate" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.showPromptToCompleteFeatureDataForLabelTemplate)}}"></span>
                                    Ask for missing data before adding Template Label</label>
                            </div>
                            <div class="flexcontainer" style="margin-top:2px;">
                                <div class="flexfixed inlinemargins">Label Renaming:</div>
                                <div class="flexplus1"></div>
                                <div class="flexfixed">
                                    <a ng-show="showHiddenPrefs && preferencesToEdit.mapcompLabelNameSubstitutions.length" ng-click="exportMapcompLabelNameSubstitutions(preferencesToEdit.mapcompLabelNameSubstitutions)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Export Dictionary"><span ng-class="iconClasses.exportFile"></span></a>
                                </div>
                            </div>
                            <div class="dndlist flexcontainer">
                                <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="preferencesToEdit.mapcompLabelNameSubstitutions">
                                    <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="mapcompLabelNameSubstitution in preferencesToEdit.mapcompLabelNameSubstitutions" dnd-draggable="mapcompLabelNameSubstitution" dnd-moved="preferencesToEdit.mapcompLabelNameSubstitutions.splice($index, 1)" dnd-effect-allowed="move">
                                        <div style="margin:0px;" class="flexcontainer flexplus1">
                                            <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                            <div dnd-nodrag class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Name..." ng-model="mapcompLabelNameSubstitution.inV">
                                            </div>
                                            :
                                            <div dnd-nodrag class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Rename..." ng-model="mapcompLabelNameSubstitution.outV">
                                            </div>
                                            <a ng-click="preferencesToEdit.mapcompLabelNameSubstitutions.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div style="margin-top:0px; min-height:0px;">
                                <a ng-click="preferencesToEdit.mapcompLabelNameSubstitutions.push(mapcompLabelHelper.mapcompLabelNameSubstitutionFactory())" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                            </div>
                            <div ng-if="showHiddenPrefs" class="linemargins">
                                <div style="margin-bottom:-4px;"><span>Remote Dictionaries:</span></div>
                                <div class="flexcontainer" ng-repeat="additionalMapcompLabelNameSubstitutionsFile in preferencesToEdit.additionalMapcompLabelNameSubstitutionsFiles track by $index">
                                    <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.additionalMapcompLabelNameSubstitutionsFiles[$index]" readonly="readonly">
                                    <filepicker class="flexfixed" ng-model="preferencesToEdit.additionalMapcompLabelNameSubstitutionsFiles[$index]" prompt="Please choose a Dictionary file." filter="json,csv,tsv"></filepicker>
                                    <a ng-click="preferencesToEdit.additionalMapcompLabelNameSubstitutionsFiles.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                </div>
                                <div style="margin-top:0px; min-height:0px;">
                                    <a ng-click="preferencesToEdit.additionalMapcompLabelNameSubstitutionsFiles.push('')" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>




                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Shape Layer drawing
                        </div>
                        <div class="card-body">
                            <div class="linemargins">
                                <div>
                                    <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.drawingGlobalAutoChangeRenderer" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.drawingGlobalAutoChangeRenderer)}}"></span>
                                        Change Renderer for extruded Layers</label>
                                </div>
                                <div>
                                    <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.drawingMaterialOptionCastsShadows" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.drawingMaterialOptionCastsShadows)}}"></span>
                                        Layers cast Shadows</label>
                                </div>
                                <div>
                                    <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.drawingMaterialOptionAcceptsShadows" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.drawingMaterialOptionAcceptsShadows)}}"></span>
                                        Layers accept Shadows</label>
                                </div>
                                <div>
                                    <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.drawingGlobalLockLayerTransforms" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.drawingGlobalLockLayerTransforms)}}"></span>
                                        Lock Layer Transform Properties</label>
                                </div>
                                <div>
                                    <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.drawingGlobalDateBorderCopy" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.drawingGlobalDateBorderCopy)}}"></span>
                                        Duplicate Layers across Date Line</label>
                                </div>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Dash Zoom Threshold:</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.drawingDashThreshold" min="0" step="0.1" max="2" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" ng-model="preferencesToEdit.drawingDashThreshold" suffix="" min="0" step="0.1" max="10"></changevalbyclick>
                            </div>
                            <div class="linemargins">
                                <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.useTopoSimplificationIfPossible" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.useTopoSimplificationIfPossible)}}"></span>
                                    Accurate Topology Simplification (slower)</label>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Simplification Detail (Zoom Offset):</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.simplificationZoomOffset" min="0" step="0.1" max="4" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" ng-model="preferencesToEdit.simplificationZoomOffset" suffix="" min="-10" step="0.1" max="10"></changevalbyclick>
                            </div>
                            <div ng-if="showHiddenPrefs" style="margin-bottom:-4px;"><span>Max Bezier Detail (Points per Curve):</span></div>
                            <div ng-if="showHiddenPrefs" class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.pickupShapeLayerFeaturesBezierQuality" min="0" step="1" max="100" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:60px" ng-model="preferencesToEdit.pickupShapeLayerFeaturesBezierQuality" suffix="_Points" min="0" step="1" max="500"></changevalbyclick>
                            </div>
                        </div>
                    </div>
                    <div ng-if="showHiddenPrefs" class="card border-secondary linemargins">
                        <div class="card-header">
                            Finalization
                        </div>
                        <div class="card-body">
                            <div style="margin-bottom:-4px;"><span>Max tiles for finalized Mapcomp:</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.maxTilesForFinalization" min="100" step="1" max="1000" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" ng-model="preferencesToEdit.maxTilesForFinalization" suffix="" min="1" step="1" max="2000"></changevalbyclick>
                            </div>
                        </div>
                        <div class="card-body">
                            <div style="margin-bottom:-4px;"><span>Base sample rate (saved in ae project):</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.finalizationBaseSampleRate" min="1" step="1" max="10" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_f" ng-model="preferencesToEdit.finalizationBaseSampleRate" min="1" step="1" max="50">
                                </changevalbyclick>
                            </div>

                        </div>
                        <div class="card-header">
                            Mapcomp Label Engine
                        </div>
                        <div class="card-body">
                            <p>These are default settings. You can set them up in the Mapcomp Settings Dialog for each
                                individual Mapcomp. Note that you'll need to have hidden settings switched on.</p>
                            <div style="margin-bottom:-4px;"><span>Title safe area (relative to comp size):</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.mapcompLabelsSaveFrameBuffer" min="0" step="0.01" max="0.2" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_x" ng-model="preferencesToEdit.mapcompLabelsSaveFrameBuffer" min="-0.5" max="0.5">
                                </changevalbyclick>
                                <small ng-if="isMapcompWrapperSelected()">({{Math.floor(Math.min(selectedMapcompWrapper.comp.width,
                                    selectedMapcompWrapper.comp.height)*preferencesToEdit.mapcompLabelsSaveFrameBuffer)}}px)</small>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Label buffer (relative to comp size):</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.mapcompLabelsLabelBuffer" min="0" step="0.01" max="0.2" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_x" ng-model="preferencesToEdit.mapcompLabelsLabelBuffer" min="0" max="0.5">
                                </changevalbyclick>
                                <small ng-if="isMapcompWrapperSelected()">({{Math.floor(Math.min(selectedMapcompWrapper.comp.width,
                                    selectedMapcompWrapper.comp.height)*preferencesToEdit.mapcompLabelsLabelBuffer)}}px)</small>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Min appearance time:</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.mapcompLabelsBlendoutDurationThrashhold" min="0" step="0.01" max="5" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_s" ng-model="preferencesToEdit.mapcompLabelsBlendoutDurationThrashhold" min="0" max="10">
                                </changevalbyclick>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Collision sample rate:</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.mapcompLabelsSampleRateDur" min="0.1" step="0.01" max="2" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_s" ng-model="preferencesToEdit.mapcompLabelsSampleRateDur" min="0.1" max="10">
                                </changevalbyclick>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Max Labels to sample per view:</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.mapcompLabelsMaxMapcompLabelsToAdd" min="1" step="1" max="100" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="" ng-model="preferencesToEdit.mapcompLabelsMaxMapcompLabelsToAdd" min="1" step="1" max="100"></changevalbyclick>
                            </div>
                            <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.lockMapcompLabelLayers" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.lockMapcompLabelLayers)}}"></span>
                                lock Mapcomp Lables</label>

                        </div>
                    </div>
                    <div ng-if="showHiddenPrefs" class="card border-secondary linemargins">
                        <div class="card-header">
                            Snapped Layers
                        </div>
                        <div class="card-body">
                            <div style="margin-bottom:-4px;"><span>Rotate along path smoothing:</span></div>
                            <div class="flexcontainer linemargins">
                                <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.rotateAlongPathSmoothing" min="0" step="0.01" max="1" tooltip="hide"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="" ng-model="preferencesToEdit.rotateAlongPathSmoothing" min="0" max="1">
                                </changevalbyclick>
                            </div>
                        </div>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Feature Browser
                        </div>
                        <div class="card-body">
                            <div class="linemargins">
                                <div style="margin-bottom:-4px;"><span>Default Features:</span></div>
                                <div class="flexcontainer" ng-repeat="geojsonFilePath in preferencesToEdit.geojsonFilePaths track by $index">
                                    <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.geojsonFilePaths[$index]" placeholder="local file path or url">
                                    <filepicker class="flexfixed" ng-model="preferencesToEdit.geojsonFilePaths[$index]" prompt="Please choose a geospatial file to be loaded when you launch the extension." filter="geojson,json,kml,shp,gpx,csv,tsv"></filepicker>
                                    <a ng-click="preferencesToEdit.geojsonFilePaths.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                </div>
                                <div style="margin-top:0px; min-height:0px;">
                                    <a ng-click="preferencesToEdit.geojsonFilePaths.push('')" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                </div>
                            </div>
                            <div ng-if="showHiddenPrefs" class="linemargins">
                                <div style="margin-bottom:-4px;"><span>Max Array Length to display in Feature
                                        Properties:</span></div>
                                <div class="flexcontainer linemargins">
                                    <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.maxArrayLenghtToDisplayInFeatureProperties" min="10" step="1" max="1000" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="" ng-model="preferencesToEdit.maxArrayLenghtToDisplayInFeatureProperties" min="10" max="100000">
                                    </changevalbyclick>
                                </div>
                            </div>
                            <div class="linemargins">
                                <div style="margin-bottom:-4px;"><span>Max geojsons to import from project directory
                                        automatically:</span></div>
                                <div class="flexcontainer linemargins">
                                    <slider class="inlineslider flexplus1" ng-model="preferencesToEdit.maxGeojsonFilesToLoadOnOpeningProject" min="0" step="1" max="10" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="" ng-model="preferencesToEdit.maxGeojsonFilesToLoadOnOpeningProject" min="0" max="100">
                                    </changevalbyclick>
                                </div>
                            </div>
                            <div class="linemargins">
                                <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.routingIncludeManeuverPoints" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.routingIncludeManeuverPoints)}}"></span>
                                    include Maneuver Point Features in Routes</label>
                            </div>
                        </div>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Scripts
                        </div>
                        <div class="card-body">
                            <div class="linemargins">
                                <div style="margin-bottom:-4px;"><span>Script folders:</span></div>
                                <div class="flexcontainer" ng-repeat="jsxFilePath in preferencesToEdit.jsxFilePaths track by $index">
                                    <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.jsxFilePaths[$index]" readonly="readonly">
                                    <folderpicker class="flexfixed" ng-model="preferencesToEdit.jsxFilePaths[$index]" prompt="Please choose a folder that contains script files."></folderpicker>
                                    <a ng-click="preferencesToEdit.jsxFilePaths.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                </div>
                                <div style="margin-top:0px; min-height:0px;">
                                    <a ng-click="preferencesToEdit.jsxFilePaths.push('')" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                </div>
                            </div>
                            <div class="linemargins">
                                <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.includeJsxFilesInProjectDir" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.includeJsxFilesInProjectDir)}}"></span>
                                    detect script files in project directory</label>
                            </div>
                        </div>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Render Queue
                        </div>
                        <div class="card-body">
                            <div class="flexcontainer linemargins">
                                <span style="width:100px" class="flexfixed inlinemargins">Render Directory</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{preferencesToEdit.renderPathMode.displayName}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a ng-repeat="renderPathMode in renderPathModes" class="dropdown-item clickable" ng-click="preferencesToEdit.renderPathMode = renderPathMode">{{renderPathMode.displayName}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div ng-show="preferencesToEdit.renderPathMode.name === 'relative'" class="flexcontainer linemargins">
                                <div style="width:100px" class="flexfixed inlinemargins"><span>Relative Path</span></div>
                                <changetextbyclick class="flexplus1" ng-model="preferencesToEdit.relativeRenderPath">
                                </changetextbyclick>
                            </div>
                            <div ng-show="preferencesToEdit.renderPathMode.name === 'absolute'" class="flexcontainer">
                                <div style="width:100px" class="flexfixed inlinemargins"><span>Absolute Path</span></div>
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.absoluteRenderPath" readonly="readonly">
                                <folderpicker class="flexfixed" ng-model="preferencesToEdit.absoluteRenderPath" prompt="Please choose a folder where your rendered files will be placed in."></folderpicker>
                            </div>
                            <div class="linemargins">
                                <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.createRelativeRenderPath" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.createRelativeRenderPath)}}"></span>
                                    create Directory if not existing</label>
                            </div>
                        </div>
                    </div>
                    <div ng-if="showHiddenPrefs" class="card border-secondary linemargins">
                        <div class="card-header">
                            Cache Directories
                        </div>
                        <div class="card-body">
                            <div style="margin-bottom:-4px;"><span>Overpass Features:</span></div>
                            <div class="flexcontainer">
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.overpassCachePath" readonly="readonly">
                                <folderpicker class="flexfixed" ng-model="preferencesToEdit.overpassCachePath" prompt="Please choose a folder to store geojson data."></folderpicker>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Overpass Places Tiles:</span></div>
                            <div class="flexcontainer">
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.overpassPlaceTilesCachePath" readonly="readonly">
                                <folderpicker class="flexfixed" ng-model="preferencesToEdit.overpassPlaceTilesCachePath" prompt="Please choose a folder to store place data for mapcomp labels.">
                                </folderpicker>
                            </div>
                            <div style="margin-bottom:-4px;"><span>Natural Earth Shapefiles:</span></div>
                            <div class="flexcontainer">
                                <input type="text" class="form-control flexplus1" ng-model="preferencesToEdit.naturalEarthShpCachePath" readonly="readonly">
                                <folderpicker class="flexfixed" ng-model="preferencesToEdit.naturalEarthShpCachePath" prompt="Please choose a folder to store place data for mapcomp labels.">
                                </folderpicker>
                            </div>
                        </div>
                    </div>
                    <div ng-if="showHiddenPrefs" class="card border-secondary linemargins">
                        <div class="card-header">
                            Logging
                        </div>
                        <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.useDebugout" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.useDebugout)}}"></span>
                            Enable Logging</label>
                        <button ng-if="preferencesToEdit.useDebugout" type="button" class="btn btn-sm btn-secondary" ng-click="createLogFile()">Export Log File</button>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Mapdata powered by MapTiler
                            <span ng-if="licensingOptions.advancedData" class="badge badge-success badge-pill clickable" ng-click="setSubscriptionData()"><span class="{{iconClasses.finalize}}"></span>
                                licensed</span>
                            <span ng-if="!licensingOptions.advancedData" class="badge badge-danger badge-pill clickable" ng-click="subsInit()"><span class="{{iconClasses.x}}"></span> not licensed</span>
                            <a ng-click="openInDefaultBrowser(getLink('purchaseMaptilerMapdata'))" class="silentbutton" data-toggle-tooltip data-placement="top" title="" data-original-title="What is this?"><span class="{{iconClasses.question}}"></span></a>
                        </div>
                        <div class="card-body">

                            <div>MapTiler API Key:</div>
                            <div class="flexcontainer">
                                <changetextbyclick class="flexplus1" ng-model="preferencesToEdit.maptilerApiKey">
                                </changetextbyclick>
                                <button type="button" class="btn btn-secondary flexfixed" ng-click="openInDefaultBrowser(getLink('purchaseMaptilerMapdata'))">Get API
                                    Key</button>
                            </div>
                        </div>
                    </div>

                    <div ng-if="showHiddenPrefs" class="card border-secondary linemargins">
                        <div class="card-header">
                            Data Wildcard
                        </div>
                        <div class="card-body">
                            <changetextbyclick ng-model="preferencesToEdit.backendWildcard"></changetextbyclick>
                        </div>
                        <label class="silentbutton tooglebutton" ng-model="preferencesToEdit.checkForMapdataSubscription" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferencesToEdit.checkForMapdataSubscription)}}"></span>
                            check Mapdata Subscription on launch</label>
                    </div>

                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.projects || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <a class="silentbutton margin0" ng-click="newProject()">
                            <h5 class="modal-title silentbutton margin0"><span class="{{iconClasses.plus}}"></span> New
                                Project</h5>
                        </a>
                    </div>
                    <div class="flexfixed" style="margin:auto">

                    </div>
                </div>
            </div>
            <div class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <a class="silentbutton margin0" ng-click="importProject()">
                            <h5 class="modal-title silentbutton margin0"><span class="{{iconClasses.importFile}}"></span>
                                Import Project</h5>
                        </a>
                    </div>
                    <div class="flexfixed" style="margin:auto">

                    </div>
                </div>
            </div>
            <div class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <a class="silentbutton margin0" ng-click="openProject()">
                            <h5 class="modal-title silentbutton margin0"><span class="{{iconClasses.file}}"></span> Open
                                Project</h5>
                        </a>
                    </div>
                    <div class="flexfixed" style="margin:auto">

                    </div>
                </div>
            </div>
            <div ng-if="windowLayoutState.projects && preferences.recentProjects.length" class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <a class="silentbutton margin0" ng-click="collapseVars.isRecentProjectsCollapsed = !collapseVars.isRecentProjectsCollapsed">
                            <h5 class="modal-title silentbutton margin0"><span class="{{iconClasses.recentProject}}"></span>
                                Recent Projects<span class="{{iconClasses.dropdown}}"></span></h5>
                        </a>
                    </div>
                    <div class="flexfixed" style="margin:auto">

                    </div>
                </div>
            </div>
            <div ng-if="windowLayoutState.projects && preferences.recentProjects.length" class="modal-content">
                <div id="recentProjectsCollapseDiv" uib-collapse="collapseVars.isRecentProjectsCollapsed">
                    <recentproject style="margin-bottom:0px" ng-repeat="project in preferences.recentProjects track by $index" project="{{project}}">
                    </recentproject>
                </div>
            </div>
            <div ng-if="sampleProjects.length" class="modal-content">
                <div class="modal-header">
                    <div class="flexplus1">
                        <a class="silentbutton margin0" ng-click="collapseVars.isDownloadProjectsCollapsed = !collapseVars.isDownloadProjectsCollapsed">
                            <h5 class="modal-title silentbutton margin0"><span class="{{iconClasses.download}}"></span>
                                Sample Projects<span class="{{iconClasses.dropdown}}"></span></h5>
                        </a>
                    </div>
                    <div class="flexfixed" style="margin:auto">

                    </div>
                </div>
            </div>
            <div ng-if="windowLayoutState.projects && sampleProjects.length" class="modal-content">
                <div id="sampleProjectsCollapseDiv" uib-collapse="collapseVars.isDownloadProjectsCollapsed">
                    <input class="searchbar form-control mr-sm-2 flexplus1" type="search" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (projectsFilterStr.length > 0)}" ng-model="projectsFilterStr">
                    <onlinesampleproject ng-repeat="sampleProject in sampleProjects | filter:projectsFilterStr | limitTo:sampleProjectsViewLimit" project="{{sampleProject}}"></onlinesampleproject>
                    <h5 ng-show="sampleProjectsViewLimit < sampleProjects.length" class="modal-title silentbutton clickable" ng-click="increaseSampleProjectsViewLimit()" style="margin-left:10px;padding-bottom:20px;">
                        load more...
                    </h5>
                </div>
            </div>
        </div>
        <div ng-if="windowLayoutState.duplicatemapcomp" class="windowlayoutstate{{windowLayoutState.duplicatemapcomp || 0}}">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Duplicate Mapcomp</h5>
                </div>
                <div class="modal-body">
                    
                    <a ng-click="duplicateMapcompOptions.duplicateMode = 0" class="silentbutton tooglebutton" ng-class="{'active':duplicateMapcompOptions.duplicateMode==0}"><span class="{{iconClasses.radio(duplicateMapcompOptions.duplicateMode==0)}}"></span>
                        Duplicate containing Comp</a>
                    <div style="margin-bottom:20px;margin-left:25px;" ng-class="{opacity50: duplicateMapcompOptions.duplicateMode != 0}">
                        <div>New containing comp Name:</div>
                        <changetextbyclick ng-model="duplicateMapcompOptions.containingCompName"></changetextbyclick>
                        <div style="height:5px;"></div>
                        <div ng-if="duplicateMapcompOptions.newNames.length === 1">New Mapcomp Name:</div>
                        <div ng-if="duplicateMapcompOptions.newNames.length > 1">New Mapcomp Names:</div>
                        <div style="margin-bottom:3px;" class="input-group-sm flexplus1 flexcontainer" ng-repeat="duplicateMapcomp in duplicateMapcompOptions.mapcompWrappers track by $index">
                            <mapcompthumbnail class="flexfixed inlinemargins" size="20" ng-model="duplicateMapcomp">
                            </mapcompthumbnail>
                            <changetextbyclick class="flexplus1 flexshrink1" ng-model="duplicateMapcompOptions.newNames[$index].name"></changetextbyclick>
                        </div>
                    </div>
                    
                    <a ng-click="duplicateMapcompOptions.duplicateMode = 1" class="silentbutton tooglebutton" ng-class="{'active':duplicateMapcompOptions.duplicateMode==1}"><span class="{{iconClasses.radio(duplicateMapcompOptions.duplicateMode==1)}}"></span>
                        Duplicate '{{duplicateMapcompOptions.mapcompWrapper.comp.name}}'</a>
                    <div style="margin-bottom:20px;margin-left:25px;" ng-class="{opacity50: duplicateMapcompOptions.duplicateMode != 1}">
                        <div>New Mapcomp Name:</div>
                        <div class="input-group-sm flexplus1 flexcontainer">
                            <label class="tooglebutton" ng-model="duplicateMapcompOptions.linkMapcomp" uib-btn-checkbox data-toggle-tooltip data-placement="top" title="" data-original-title="Link View"><span class="{{iconClasses.linkView(duplicateMapcompOptions.linkMapcomp)}}"></span></label>
                            <mapcompthumbnail class="flexfixed inlinemargins" size="20" ng-model="duplicateMapcompOptions.mapcompWrapper"></mapcompthumbnail>
                            <changetextbyclick class="flexplus1 flexshrink1" ng-model="duplicateMapcompOptions.newName">
                            </changetextbyclick>
                        </div>
                    </div>

                    <a ng-click="duplicateMapcompOptions.duplicateMode = 2" class="silentbutton tooglebutton" ng-class="{'active':duplicateMapcompOptions.duplicateMode==2}"><span class="{{iconClasses.radio(duplicateMapcompOptions.duplicateMode==2)}}"></span>
                        Split Imagery and Labels</a>
                    <div style="margin-left:25px;" ng-class="{opacity50: duplicateMapcompOptions.duplicateMode != 2}">
                        <div>Label Mapcomp Name:</div>
                        <div class="input-group-sm flexplus1 flexcontainer">
                            <mapcompthumbnail class="flexfixed inlinemargins" size="20" ng-model="duplicateMapcompOptions.mapcompWrapper"></mapcompthumbnail>
                            <changetextbyclick class="flexplus1 flexshrink1" ng-model="duplicateMapcompOptions.newSplitName"></changetextbyclick>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div ng-controller="drawingOptionsController" id="drawingOptionsController" class="flexcontainervertical windowlayoutstate{{windowLayoutState.editdrawingoptions && 3 || 0}}">
            <div class="windowlayoutstate{{windowLayoutState.editdrawingoptionsheader || 0}}">
                <div class="modal-content">
                    <div class="modal-header flexcontainer">
                        <div class="flexplus1">
                            <h5 class="modal-title">Shape Layer Styles</h5>
                        </div>
                        <div class="flexfixed" style="margin:auto">
                            <a class="silentbutton flexfixed" ng-click="applyDrawingOptionsToEdit([defaultDrawingOptions[0]])" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Remove Styles"><span class="{{iconClasses.remove}}"></span></a>
                            <a class="silentbutton flexfixed" ng-click="applyDrawingOptionsToEdit(defaultDrawingOptions)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Reset Styles"><span class="{{iconClasses.reset}}"></span></a>
                            <a class="silentbutton flexfixed" ng-click="createDrawingOptionsSetFromMapcomp(selectedMapcompWrapper)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Create Styles based on Mapcomp"><span class="{{iconClasses.magic}}"></span></a>
                            <a class="silentbutton flexfixed" ng-click="setDrawingOptionsToEditFromFile($event)" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Import Styles"><span class="{{iconClasses.importFile}}"></span></a>
                            <a class="silentbutton flexfixed" ng-click="exportDrawingOptionsToEdit()" data-toggle-tooltip data-placement="bottom" title="" data-original-title="Export Styles"><span class="{{iconClasses.exportFile}}"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="windowlayoutstate{{windowLayoutState.editdrawingoptions || 0}}">
                <div class="modal-content">

                    <div class="modal-body">
                        <div class="drawingoptionsgrid" dnd-list="drawingOptionsToEdit" dnd-horizontal-list="true">
                            <drawingoptionthumbnail ng-class="{'styleThumbnailSelected':drawingOption.id==selectedDrawingOptionToEdit.id}" class="clickable" style="cursor: -webkit-grab !important;" ng-repeat="drawingOption in drawingOptionsToEdit" ng-click="setSelectedDrawingOptionToEdit(drawingOption)" drawingoption="drawingOption" bordervalues="drawingOptionsToEditThumbBorderValues" data-toggle-tooltip data-placement="top" title="" data-original-title="{{shortenString(drawingOption.name, 16)}}" dnd-draggable="drawingOption" dnd-moved="drawingOptionsToEdit.splice($index, 1)" dnd-effect-allowed="move" dnd-dragstart="removeOpenTooltips()" dnd-dragend="updateTooltips(100);updateSelectedDrawingOptionToEdit()">
                            </drawingoptionthumbnail>
                            <a class="silentbutton adddrawingoptionsthumb" ng-click="addDrawingOption()" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Style"><span class="{{iconClasses.add}}"></span></a>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="input-group-sm flexcontainer linemargins" style="line-height: 1.2;">
                            <drawingoptionthumbnail class="flexfixed inlinemargins" drawingoption="selectedDrawingOptionToEdit" bordervalues="drawingOptionsToEditThumbBorderValues"></drawingoptionthumbnail>
                            <changetextbyclick class="flexplus1 flexshrink1 inlinemargins" ng-model="selectedDrawingOptionToEdit.name"></changetextbyclick>
                            <a class="silentbutton flexfixed" ng-click="applyDrawingOptionToSelectedLayers(selectedDrawingOptionToEdit, 'editdrawingoptions')" data-toggle-tooltip data-placement="top" title="" data-original-title="Swap Layer's Style"><span class="{{iconClasses.swapFeatureStyle}}"></span></a>
                            <a class="silentbutton flexfixed" ng-click="duplicateDrawingOption(selectedDrawingOptionToEdit)" data-toggle-tooltip data-placement="top" title="" data-original-title="Duplicate Style"><span class="{{iconClasses.duplicate}}"></span></a>
                            <a class="silentbutton flexfixed" ng-click="newDrawingOptionPickedFromLayer()" data-toggle-tooltip data-placement="top" title="" data-original-title="Pick Style from Layer"><span class="{{iconClasses.eyeDropper}}"></span></a>
                            
                            <a ng-show="drawingOptionsToEdit.length>1" class="silentbutton flexfixed" ng-click="removeDrawingOption(selectedDrawingOptionToEdit)" data-toggle-tooltip data-placement="top" title="" data-original-title="Remove Style"><span class="{{iconClasses.remove}}"></span></a>
                        </div>
                        <div class="card border-secondary linemargins">
                            <div class="card-header">
                                <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.fill.addFill" uib-btn-checkbox><span class="{{iconClasses.fill}}"></span> Fill</label>
                            </div>
                            <div uib-collapse="!selectedDrawingOptionToEdit.fill.addFill" class="card-body">
                                <div class="flexcontainer">
                                    <div ng-show="!selectedDrawingOptionToEdit.fill.randomizeColors" class="flexfixed inlinemargins">
                                        <span class="flexfixed inlinemargins" style="min-width:45px;display:inline-block;">Color</span>
                                        <colorpicker ng-model="selectedDrawingOptionToEdit.fill.fillColor">
                                        </colorpicker>
                                    </div>
                                    <div class="checkbox flexplus1 inlinemargins">
                                        
                                        <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.fill.randomizeColors" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.fill.randomizeColors)}}"></span>
                                            random
                                            color</label>
                                    </div>
                                    <a ng-click="toggleDataTransformer('fillColor')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.fillColor.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.fillColor.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.fillColor" role="alert">Data-driven
                                    Fill Color deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.fillColor.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.fillColor.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.fillColor.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.fillColor.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Color by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.fillColor.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Color randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.fillColor.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.fillColor.propName">
                                            </div>
                                            
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <datatransformgradient ng-model="selectedDrawingOptionToEdit.dataTransformers.fillColor">
                                        </datatransformgradient>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.fillColor.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.fillColor.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.fillColor.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexplus1 flexcontainer inlinemargins" style="width:50px;">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <colorpicker dnd-nodrag class="flexfixed inlinemargins" ng-model="stop.outV"></colorpicker>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.fillColor.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.fillColor.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.fillColor.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="flexcontainer">
                                    <span class="flexfixed" style="min-width:45px;">Opacity </span>
                                    <slider class="inlineslider flexplus1" ng-model="selectedDrawingOptionToEdit.fill.opacity" min="0" step="1" max="100" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="%" ng-model="selectedDrawingOptionToEdit.fill.opacity" min="0" step="1" max="100">
                                    </changevalbyclick>
                                    <a ng-click="toggleDataTransformer('fillOpacity')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.fillOpacity.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.fillOpacity.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.fillOpacity" role="alert">
                                    Data-driven
                                    Fill Opacity deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.fillOpacity.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.fillOpacity.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Opacity by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Opacity randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.fillOpacity.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.propName">
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.fillOpacity.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexfixed flexcontainer inlinemargins" style="width:50px;">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <slider dnd-nodrag class="inlineslider flexplus1" ng-model="stop.outV" min="0" step="1" max="100" tooltip="hide">
                                                        </slider>
                                                        <changevalbyclick dnd-nodrag class="flexfixed" style="width:40px" suffix="%" ng-model="stop.outV" min="0" step="1" max="100">
                                                        </changevalbyclick>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.fillOpacity.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.fillOpacity.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card border-secondary linemargins">
                            <div class="card-header">
                                <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.stroke.addStroke" uib-btn-checkbox><span class="{{iconClasses.stroke}}"></span> Stroke / Point</label>
                            </div>
                            <div uib-collapse="!selectedDrawingOptionToEdit.stroke.addStroke" class="card-body">
                                <div class="flexcontainer">
                                    <div ng-show="!selectedDrawingOptionToEdit.stroke.sameColorAsFill" class="flexfixed inlinemargins">
                                        <span class="flexfixed inlinemargins" style="min-width:45px;display:inline-block;">Color</span>
                                        <colorpicker class="flexfixed inlinemargins" ng-model="selectedDrawingOptionToEdit.stroke.strokeColor"></colorpicker>
                                    </div>
                                    <div class="checkbox flexplus1 inlinemargins">
                                        
                                        <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.stroke.sameColorAsFill" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.stroke.sameColorAsFill)}}"></span>
                                            use
                                            Fill Color</label>
                                    </div>
                                    <a ng-click="toggleDataTransformer('strokeColor')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeColor.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeColor.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeColor" role="alert">
                                    Data-driven
                                    Stroke Color deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeColor.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeColor.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeColor.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeColor.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Color by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeColor.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Color randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeColor.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeColor.propName">
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <datatransformgradient ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeColor">
                                        </datatransformgradient>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeColor.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeColor.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeColor.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexplus1 flexcontainer inlinemargins" style="width:50px">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <colorpicker dnd-nodrag class="flexfixed inlinemargins" ng-model="stop.outV"></colorpicker>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeColor.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeColor.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeColor.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="flexcontainer">
                                    <span class="flexfixed" style="min-width:45px;">Opacity </span>
                                    <slider class="inlineslider flexplus1" ng-model="selectedDrawingOptionToEdit.stroke.opacity" min="0" step="1" max="100" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="%" ng-model="selectedDrawingOptionToEdit.stroke.opacity" min="0" step="1" max="100">
                                    </changevalbyclick>
                                    <a ng-click="toggleDataTransformer('strokeOpacity')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeOpacity" role="alert">
                                    Data-driven
                                    Stroke Opacity deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Opacity by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Opacity randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.propName">
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexfixed flexcontainer inlinemargins" style="width:50px">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <slider dnd-nodrag class="inlineslider flexplus1" ng-model="stop.outV" min="0" step="1" max="100" tooltip="hide">
                                                        </slider>
                                                        <changevalbyclick dnd-nodrag class="flexfixed" style="width:40px" suffix="%" ng-model="stop.outV" min="0" step="1" max="100">
                                                        </changevalbyclick>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeOpacity.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="flexcontainer">
                                    <span class="flexfixed" style="min-width:45px;">Width </span>
                                    <slider class="inlineslider flexplus1" ng-model="selectedDrawingOptionToEdit.stroke.strokeWidth" ng-change="updateBorderValues()" min="1" step="1" max="30" tooltip="hide">
                                    </slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_px" ng-model="selectedDrawingOptionToEdit.stroke.strokeWidth" ng-change="updateBorderValues()" min="1" step="1" max="1000"></changevalbyclick>
                                    <a ng-click="toggleDataTransformer('strokeWidth')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeWidth.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeWidth.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeWidth" role="alert">
                                    Data-driven
                                    Stroke Width deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeWidth.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeWidth.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Width by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Width randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeWidth.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.propName">
                                            </div>
                                            <div class="flexcontainer linemargins">
                                                <div class="btn-group flexfixed" role="group">
                                                    <div class="btn-group" role="group">
                                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{drawingOptionHelpers.curveFunctions[selectedDrawingOptionToEdit.dataTransformers.strokeWidth.curveFunctionName].displayName
                                                            || 'Linear'}}</button>
                                                        <div class="dropdown-menu scrollable-menu">
                                                            <a ng-repeat="(key, value) in drawingOptionHelpers.curveFunctions" class="dropdown-item clickable" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.curveFunctionName = value.name">{{value.displayName}}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeWidth.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexfixed flexcontainer inlinemargins" style="width:50px">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <slider dnd-nodrag class="inlineslider flexplus1" ng-model="stop.outV" min="0" step="1" max="30" tooltip="hide">
                                                        </slider>
                                                        <changevalbyclick dnd-nodrag class="flexfixed" style="width:40px" suffix="_px" ng-model="stop.outV" min="0" step="1" max="1000">
                                                        </changevalbyclick>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeWidth.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeWidth.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="flexcontainer">
                                    <span class="flexfixed" style="min-width:45px;">Outline </span>
                                    <slider class="inlineslider flexplus1" ng-model="selectedDrawingOptionToEdit.stroke.strokeOutlineWidth" min="0" step="1" max="15" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_px" ng-model="selectedDrawingOptionToEdit.stroke.strokeOutlineWidth" min="0" step="1" max="1000"></changevalbyclick>
                                    <a ng-click="toggleDataTransformer('strokeOutlineWidth')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeOutlineWidth" role="alert">
                                    Data-driven Outline deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Outline by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Outline randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.propName">
                                            </div>
                                            <div class="flexcontainer linemargins">
                                                <div class="btn-group flexfixed" role="group">
                                                    <div class="btn-group" role="group">
                                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{drawingOptionHelpers.curveFunctions[selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.curveFunctionName].displayName
                                                            || 'Linear'}}</button>
                                                        <div class="dropdown-menu scrollable-menu">
                                                            <a ng-repeat="(key, value) in drawingOptionHelpers.curveFunctions" class="dropdown-item clickable" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.curveFunctionName = value.name">{{value.displayName}}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexfixed flexcontainer inlinemargins" style="width:50px">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <slider dnd-nodrag class="inlineslider flexplus1" ng-model="stop.outV" min="0" step="1" max="30" tooltip="hide">
                                                        </slider>
                                                        <changevalbyclick dnd-nodrag class="flexfixed" style="width:40px" suffix="_px" ng-model="stop.outV" min="0" step="1" max="1000">
                                                        </changevalbyclick>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>
                                <div ng-show="selectedDrawingOptionToEdit.stroke.strokeOutlineWidth || selectedDrawingOptionToEdit.dataTransformers.strokeOutlineWidth.active">
                                    <div class="flexcontainer">
                                        <div class="flexfixed inlinemargins">
                                            <span class="flexfixed inlinemargins" style="min-width:45px;display:inline-block;">Outline Color</span>
                                            <colorpicker class="flexfixed inlinemargins" ng-model="selectedDrawingOptionToEdit.stroke.strokeOutlineColor">
                                            </colorpicker>
                                        </div>
                                        <div class="flexplus1"></div>
                                        <a ng-click="toggleDataTransformer('strokeOutlineColor')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                    </div>
                                    <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeOutlineColor" role="alert">
                                        Data-driven Outline Color deactivated</div>
                                    <div ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.active" class="card border-primary">
                                        <div class="card-body">
                                            <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                                
                                                <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.randomize)}}"></span>
                                                    random</label>
                                            </div>
                                            <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.randomize" class="flexcontainer">
                                                <div class="flexfixed inlinemargins">Outline Color by Feature Property
                                                </div>
                                            </div>
                                            <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.randomize" class="flexcontainer">
                                                <div class="flexfixed inlinemargins">Outline Color randomly</div>
                                            </div>
                                            <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.randomize" class="flexcontainer">
                                                <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                    <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.propName">
                                                </div>
                                            </div>
                                            <div class="flexcontainer" style="margin-top:2px;">
                                                <div class="flexfixed inlinemargins">Value Range</div>
                                            </div>
                                            <datatransformgradient ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor">
                                            </datatransformgradient>
                                            <div class="dndlist flexcontainer">
                                                <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.stops">
                                                    <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                        <div style="margin:0px;" class="flexcontainer flexplus1">
                                                            <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                            <div dnd-nodrag class="input-group-sm flexplus1 flexcontainer inlinemargins" style="width:50px">
                                                                <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                            </div>
                                                            <colorpicker dnd-nodrag class="flexfixed inlinemargins" ng-model="stop.outV"></colorpicker>
                                                            <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div style="margin-top:0px; min-height:0px;">
                                                <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeOutlineColor.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flexcontainer">
                                    <span class="flexfixed" style="width:95px;">{{getDashDescription(selectedDrawingOptionToEdit.stroke.dashVal)}}</span>
                                    <slider class="inlineslider flexplus1" ng-model="selectedDrawingOptionToEdit.stroke.dashVal" min="0" step="0.001" max="1" tooltip="hide"></slider>
                                    <a ng-click="toggleDataTransformer('strokeDashVal')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeDashVal" role="alert">
                                    Data-driven
                                    Stroke Dashes deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Dashes by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Dashes randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.propName">
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexfixed flexcontainer inlinemargins" style="width:50px">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <span class="flexfixed" style="min-width:95px;">{{getDashDescription(stop.outV)}}</span>
                                                        <slider class="inlineslider flexplus1" ng-model="stop.outV" min="0" step="0.001" max="1" tooltip="hide"></slider>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeDashVal.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>



                                <div ng-show="selectedDrawingOptionToEdit.stroke.dashVal" class="flexcontainer">
                                    <span class="flexfixed" style="width:70px;">Dash Speed</span>
                                    <slider class="inlineslider flexplus1" ng-model="selectedDrawingOptionToEdit.stroke.dashSpeed" min="-100" step="1" max="100" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:50px" suffix="_px/s" ng-model="selectedDrawingOptionToEdit.stroke.dashSpeed" min="-1000" step="1" max="1000"></changevalbyclick>
                                    <a ng-click="toggleDataTransformer('strokeDashSpeed')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeDashSpeed" role="alert">
                                    Data-driven
                                    Dash Speed deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Dash Speed by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Dash Speed randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.propName">
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexfixed flexcontainer inlinemargins" style="width:50px">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <slider class="inlineslider flexplus1" ng-model="stop.outV" min="-100" step="1" max="100" tooltip="hide"></slider>
                                                        <changevalbyclick class="flexfixed" style="width:50px" suffix="_px/s" ng-model="stop.outV" min="-1000" step="1" max="1000"></changevalbyclick>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeDashSpeed.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>


                                <div ng-show="selectedDrawingOptionToEdit.stroke.dashVal>0" class="flexcontainer">
                                    <span class="flexfixed" style="width:85px;"></span>
                                    <div class="checkbox flexfixed inlinemargins">
                                        <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.stroke.dashRoundCaps" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.stroke.dashRoundCaps)}}"></span>
                                            Round Caps</label>
                                    </div>
                                </div>
                                <div ng-show="selectedDrawingOptionToEdit.stroke.dashVal>0" class="flexcontainer">
                                    <span class="flexfixed" style="width:85px;"></span>
                                    <div class="checkbox flexfixed inlinemargins">
                                        <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.stroke.fillGaps" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.stroke.fillGaps)}}"></span>
                                            Fill Gaps</label>
                                    </div>
                                    <colorpicker ng-show="selectedDrawingOptionToEdit.stroke.fillGaps" class="flexfixed inlinemargins" ng-model="selectedDrawingOptionToEdit.stroke.strokeGapColor"></colorpicker>
                                    <div class="flexplus1"></div>
                                    <a ng-show="selectedDrawingOptionToEdit.stroke.fillGaps" ng-click="toggleDataTransformer('strokeGapColor')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                                </div>
                                <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.strokeGapColor" role="alert">
                                    Data-driven Stroke Gap Color deactivated</div>
                                <div ng-if="selectedDrawingOptionToEdit.stroke.fillGaps && selectedDrawingOptionToEdit.stroke.dashVal>0 && selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.active" class="card border-primary">
                                    <div class="card-body">
                                        <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                            
                                            <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.randomize)}}"></span>
                                                random</label>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Color Gaps by Feature Property</div>
                                        </div>
                                        <div ng-show="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.randomize" class="flexcontainer">
                                            <div class="flexfixed inlinemargins">Color Gaps randomly</div>
                                        </div>
                                        <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.randomize" class="flexcontainer">
                                            <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                                <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.propName">
                                            </div>
                                        </div>
                                        <div class="flexcontainer" style="margin-top:2px;">
                                            <div class="flexfixed inlinemargins">Value Range</div>
                                        </div>
                                        <datatransformgradient ng-model="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor">
                                        </datatransformgradient>
                                        <div class="dndlist flexcontainer">
                                            <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.stops">
                                                <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.stops.splice($index, 1)" dnd-effect-allowed="move">
                                                    <div style="margin:0px;" class="flexcontainer flexplus1">
                                                        <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                        <div dnd-nodrag class="input-group-sm flexplus1 flexcontainer inlinemargins" style="width:50px">
                                                            <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                        </div>
                                                        <colorpicker dnd-nodrag class="flexfixed inlinemargins" ng-model="stop.outV"></colorpicker>
                                                        <a ng-if="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="margin-top:0px; min-height:0px;">
                                            <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.strokeGapColor.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flexcontainer" style="padding-top:5px;">
                            <span class="flexfixed">Extrusion </span>
                            <slider class="inlineslider flexplus1" ng-model="selectedDrawingOptionToEdit.extrusion" min="0" step="1" max="1000" tooltip="hide"></slider>
                            <changevalbyclick class="flexfixed" style="width:45px" suffix="_px" ng-model="selectedDrawingOptionToEdit.extrusion" min="0" step="1" max="1000">
                            </changevalbyclick>
                            <a ng-click="toggleDataTransformer('extrusion')" class="silentbutton tooglebutton flexfixed" ng-class="{activecolor: selectedDrawingOptionToEdit.dataTransformers.extrusion.active}"><span ng-class="{'fa-spin':selectedDrawingOptionToEdit.dataTransformers.extrusion.active}" class="{{iconClasses.dataTransformer}}"></span></a>
                        </div>
                        <div class="alert alert-primary" ng-if="dataTransformerDeactivationNoticesDisplay.extrusion" role="alert">Data-driven Extrusion deactivated</div>
                        <div ng-if="selectedDrawingOptionToEdit.dataTransformers.extrusion.active" class="card border-primary">
                            <div class="card-body">
                                <div class="checkbox" style="float:right;margin-bottom:-3px;">
                                    
                                    <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.dataTransformers.extrusion.randomize" uib-btn-checkbox><span class="{{iconClasses.checkbox(selectedDrawingOptionToEdit.dataTransformers.extrusion.randomize)}}"></span>
                                        random</label>
                                </div>
                                <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.extrusion.randomize" class="flexcontainer">
                                    <div class="flexfixed inlinemargins">Extrude by Feature Property</div>
                                </div>
                                <div ng-show="selectedDrawingOptionToEdit.dataTransformers.extrusion.randomize" class="flexcontainer">
                                    <div class="flexfixed inlinemargins">Extrude randomly</div>
                                </div>
                                <div ng-show="!selectedDrawingOptionToEdit.dataTransformers.extrusion.randomize" class="flexcontainer">
                                    <div class="input-group-sm flexplus1 flexcontainer inlinemargins">
                                        <input type="text" class="form-control flexplus1" placeholder="Property Name..." ng-model="selectedDrawingOptionToEdit.dataTransformers.extrusion.propName">
                                    </div>
                                </div>
                                <div class="flexcontainer" style="margin-top:2px;">
                                    <div class="flexfixed inlinemargins">Value Range</div>
                                </div>
                                <div class="dndlist flexcontainer">
                                    <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="selectedDrawingOptionToEdit.dataTransformers.extrusion.stops">
                                        <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="stop in selectedDrawingOptionToEdit.dataTransformers.extrusion.stops" dnd-draggable="stop" dnd-moved="selectedDrawingOptionToEdit.dataTransformers.extrusion.stops.splice($index, 1)" dnd-effect-allowed="move">
                                            <div style="margin:0px;" class="flexcontainer flexplus1">
                                                <span style="margin-top:6px;" class="flexfixed" ng-class="iconClasses.dragable"></span>
                                                <div dnd-nodrag class="input-group-sm flexfixed flexcontainer inlinemargins" style="width:50px">
                                                    <input type="text" class="form-control flexplus1" placeholder="Property Value..." ng-model="stop.inV">
                                                </div>
                                                <slider dnd-nodrag class="inlineslider flexplus1" ng-model="stop.outV" min="0" step="1" max="1000" tooltip="hide"></slider>
                                                <changevalbyclick dnd-nodrag class="flexfixed" style="width:45px" suffix="_px" ng-model="stop.outV" min="0" step="1" max="1000">
                                                </changevalbyclick>
                                                <a ng-if="selectedDrawingOptionToEdit.dataTransformers.extrusion.stops.length > 1" ng-click="selectedDrawingOptionToEdit.dataTransformers.extrusion.stops.splice($index, 1)" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div style="margin-top:0px; min-height:0px;">
                                    <a ng-click="addStop(selectedDrawingOptionToEdit.dataTransformers.extrusion.stops)" class="silentbutton"><span ng-class="iconClasses.add"></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="flexcontainer" style="padding-top:5px;">
                            <span class="flexfixed inlinemargins">Layer Blending Mode</span>
                            <div class="btn-group flexfixed" role="group">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{getBlendingModeByName(selectedDrawingOptionToEdit.blendingModeName).displayName}}</button>
                                    <div class="dropdown-menu scrollable-menu">
                                        <a ng-repeat="blendingMode in gl.blendingModes" class="dropdown-item clickable" ng-class="{'active': blendingMode.name === selectedDrawingOptionToEdit.blendingModeName}" ng-click="selectedDrawingOptionToEdit.blendingModeName = blendingMode.name">{{blendingMode.displayName}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <label class="tooglebutton" ng-model="selectedDrawingOptionToEdit.preserveTransparency" uib-btn-checkbox><span class="{{iconClasses.transparency(selectedDrawingOptionToEdit.preserveTransparency)}}"></span>
                            Preserve Transparency</label>
                    </div>
                </div>
            </div>
            <div class="flexcontainer windowlayoutstate{{windowLayoutState.editdrawingoptionsfooter || 0}}">
                <div class="modal-content">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" ng-click="cancelEditDrawingOptions();">Cancel</button>
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal" ng-click="applyEditDrawingOptions();">Apply</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.createmapcomp || 0}}">
            <div class="modal-content">
                
                <div class="modal-body">
                    <div class="input-group-sm flexcontainer">
                        <span style="width:70px" class="flexfixed inlinemargins">Name</span>
                        <changetextbyclick class="flexplus1 flexshrink1" ng-model="newMapcompWrapper.comp.name">
                        </changetextbyclick>
                    </div>
                    <div class="flexcontainer">
                        <span style="width:70px" class="flexfixed inlinemargins">Size</span>
                        <changevalbyclick class="flexfixed inlinemargins" suffix="_px" ng-model="newMapcompWrapper.comp.width" min="4" step="1" max="10000"></changevalbyclick>
                        <span class="flexfixed inlinemargins">x</span>
                        <changevalbyclick class="flexfixed" suffix="_px" ng-model="newMapcompWrapper.comp.height" min="4" step="1" max="10000"></changevalbyclick>
                    </div>
                    <div class="flexcontainer">
                        <span style="width:70px" class="flexfixed inlinemargins">Framerate</span>
                        <changevalbyclick class="flexfixed" suffix="_fps" ng-model="newMapcompWrapper.comp.frameRate" min="1" max="99"></changevalbyclick>
                    </div>
                    <div class="flexcontainer">
                        <span style="width:70px" class="flexfixed inlinemargins">Duration</span>
                        <changevalbyclick class="flexfixed" suffix="_seconds" min="1" max="10800" ng-model="newMapcompWrapper.comp.duration"></changevalbyclick>
                    </div>
                    <div ng-if="mapcompWrappers.length > 0" class="flexcontainer">
                        <span style="width:70px" class="flexfixed inlinemargins">Link View</span>
                        <div class="btn-group flexfixed" role="group">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{mapcompHelpers.getLinkRefMapcomp(newMapcompWrapper,
                                    mapcompWrappers).comp.name || "not linked"}}</button>
                                <div class="dropdown-menu scrollable-menu">
                                    <a class="dropdown-item clickable" ng-click="mapcompHelpers.setRefLinkMapcomp(newMapcompWrapper,null);">not
                                        linked</a>
                                    <div class="dropdown-divider"></div>
                                    <a ng-repeat="mapcompWrapper in mapcompWrappers" ng-show="mapcompWrapper.comp.id != newMapcompWrapper.comp.id" class="dropdown-item clickable" ng-click="mapcompHelpers.setRefLinkMapcomp(newMapcompWrapper,mapcompWrapper);mainUiMapHelpers.setViewToMapcomp(mapcompWrapper)">{{mapcompWrapper.comp.name}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="flexcontainer windowlayoutstate{{windowLayoutState.createmapcomp2 || 0}}">
            <div style="max-height: 200px;" class="modal-content">
                <div ng-if="windowLayoutState.createmapcomp2" class="flexcontainer" style="flex-wrap:wrap">
                    <styleinterfacethumbnail ng-class="{active: (styleInterface.id == newMapcompWrapper.styleInterface.id)}" ng-repeat="styleInterface in customStyleInterfaces track by $index" class="flexfixed opacityhover clickable" size="56" activeicon="styleImageryL" ng-click="newMapcompWrapperStyleInterfaceClicked(styleInterface)" ng-model="styleInterface" data-toggle-tooltip data-placement="top" title="" data-original-title="{{styleInterface.name + (styleInterface.errorMsg&&' ('+styleInterface.errorMsg+')'||'')}}">
                    </styleinterfacethumbnail>
                    <styleinterfacethumbnail ng-class="{active: (styleInterface.id == newMapcompWrapper.styleInterface.id)}" ng-repeat="styleInterface in defaultStyleInterfaces track by $index" ng-if="!isDefaultStyleInterfacesHidden(styleInterface)" class="flexfixed opacityhover clickable" size="56" activeicon="styleImageryL" ng-click="newMapcompWrapperStyleInterfaceClicked(styleInterface)" ng-model="styleInterface" data-toggle-tooltip data-placement="top" title="" data-original-title="{{styleInterface.name + (styleInterface.errorMsg&&' ('+styleInterface.errorMsg+')'||'')}}">
                    </styleinterfacethumbnail>
                    <styleinterfacethumbnail ng-if="!getItemById(customStyleInterfaces, newMapcompWrapper.styleInterface.id)&&!getItemById(defaultStyleInterfaces, newMapcompWrapper.styleInterface.id)" class="active flexfixed opacityhover clickable" size="56" activeicon="styleImageryL" ng-click="newMapcompWrapperStyleInterfaceClicked(newMapcompWrapper.styleInterface)" ng-model="newMapcompWrapper.styleInterface" data-toggle-tooltip data-placement="top" title="" data-original-title="{{newMapcompWrapper.styleInterface.name + (newMapcompWrapper.styleInterface.errorMsg&&' ('+newMapcompWrapper.styleInterface.errorMsg+')'||'')}}">
                    </styleinterfacethumbnail>
                    <div ng-click="addNewCustomStyleInterface(applyStyleInterfaceToNewMapcompWrapper, setMainUiMapStyleToNewMapcompWrapper)" class="silentbutton addstyleinterfacethumb"><span class="{{iconClasses.plus}}"></span></div>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.setupmapcomp || 0}}">
            <div class="modal-content">
                
                <div class="modal-body">
                    <div class="card border-secondary linemargins">
                        <div class="card-body">
                            <div class="input-group-sm flexcontainer">
                                <span style="width:70px" class="flexfixed inlinemargins">Name</span>
                                <changetextbyclick class="flexplus1 flexshrink1" ng-model="setupMapcompWrapper.comp.name">
                                </changetextbyclick>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:70px" class="flexfixed inlinemargins">Duration</span>
                                <changevalbyclick class="flexfixed" suffix="_seconds" min="1" max="10800" ng-model="setupMapcompWrapperNewDur"></changevalbyclick>
                            </div>
                            <div ng-if="mapcompWrappers.length > 1" class="flexcontainer linemargins">
                                <span style="width:70px" class="flexfixed inlinemargins">Link View</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button id="linkMapcompDrop1" type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{mapcompHelpers.getLinkRefMapcomp(setupMapcompWrapper,
                                            mapcompWrappers).comp.name || "not linked"}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a class="dropdown-item clickable" ng-click="mapcompHelpers.setRefLinkMapcomp(setupMapcompWrapper,null);applyMapcompSettings()">not
                                                linked</a>
                                            <div class="dropdown-divider"></div>
                                            <a ng-repeat="mapcompWrapper in mapcompWrappers" ng-show="mapcompWrapper.comp.id != setupMapcompWrapper.comp.id && !mapcompHelpers.isMapcompLinkRelated(mapcompWrapper,setupMapcompWrapper,mapcompWrappers)" class="dropdown-item clickable" ng-click="mapcompHelpers.setRefLinkMapcomp(setupMapcompWrapper,mapcompWrapper);applyMapcompSettings()">{{mapcompWrapper.comp.name}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:70px" class="flexfixed inlinemargins">Language</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button id="languageDrop1" type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{setupMapcompWrapper.data.language.name}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a ng-repeat="language in languages" class="dropdown-item clickable" ng-click="applyLanguage(setupMapcompWrapper, language)">{{language.name}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div ng-show="setupMapcompWrapper.data.maxZoom && !mapcompHelpers.getLinkRefMapcomp(setupMapcompWrapper, mapcompWrappers).comp.name" class="flexcontainer linemargins">
                                <span style="width:70px" class="flexfixed inlinemargins">Max Zoom</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="setupMapcompWrapper.data.maxZoom" min="1" step="1" max="23" tooltip="hide"></slider>
                                <changevalbyclick style="width:40px" class="flexfixed inlinemargins" suffix="_" ng-model="setupMapcompWrapper.data.maxZoom" min="1" step="1" max="23">
                                </changevalbyclick>
                            </div>
                            <div ng-show="!mapcompHelpers.getLinkRefMapcomp(setupMapcompWrapper, mapcompWrappers).comp.name" class="flexcontainer linemargins">
                                <span style="width:70px" class="flexfixed inlinemargins">Min Zoom</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="setupMapcompWrapper.data.minZoom" min="0" step="1" max="22" tooltip="hide"></slider>
                                <changevalbyclick style="width:40px" class="flexfixed inlinemargins" suffix="_" ng-model="setupMapcompWrapper.data.minZoom" min="0" step="1" max="22">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:70px" class="flexfixed inlinemargins">Attribution</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{setupMapcompWrapper.data.providerAttributionAlignment
                                            || "bottom left"}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a class="dropdown-item clickable" ng-click="setProviderattributionAlignment('bottom left')">bottom
                                                left</a>
                                            <a class="dropdown-item clickable" ng-click="setProviderattributionAlignment('bottom right')">bottom
                                                right</a>
                                            <a class="dropdown-item clickable" ng-click="setProviderattributionAlignment('top left')">top left</a>
                                            <a class="dropdown-item clickable" ng-click="setProviderattributionAlignment('top right')">top right</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item clickable" ng-click="setProviderattributionAlignment('none')">none</a>
                                        </div>
                                    </div>
                                </div>
                                <div ng-show="setupMapcompWrapper.data.providerAttributionAlignment != 'none'" class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <a class="silentbutton" data-toggle="dropdown" aria-expanded="false" data-toggle-tooltip data-placement="top" title="" data-original-title="Safe and Size"><span class="{{iconClasses.providerAttributionPosition}}"></span></a>
                                        <div class="dropdown-menu scrollable-menu">
                                            
                                            <div class="flexcontainer keep-open dropdownmenueitempadding">
                                                <span style="width:30px" class="flexfixed inlinemargins">Safe</span>
                                                <changevalbyclick class="flexfixed inlinemargins" suffix="_px" ng-change="refreshProviderattributionLayers()" ng-model="providerAttributionPixelSizes.safeX" min="1" step="1" max="2000"></changevalbyclick>
                                                <span class="flexfixed inlinemargins">x</span>
                                                <changevalbyclick class="flexfixed" suffix="_px" ng-change="refreshProviderattributionLayers()" ng-model="providerAttributionPixelSizes.safeY" min="1" step="1" max="2000"></changevalbyclick>
                                            </div>
                                            <div class="flexcontainer keep-open dropdownmenueitempadding">
                                                <span style="width:30px" class="flexfixed inlinemargins">Size</span>
                                                <changevalbyclick class="flexfixed" suffix="_px" ng-change="refreshProviderattributionLayers()" ng-model="providerAttributionPixelSizes.size" min="1" step="1" max="200"></changevalbyclick>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <a ng-show="setupMapcompWrapper.data.imagery" style="float:right" ng-click="attributionInfo(setupMapcompWrapper.styleInterface)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Attribution info">
                                    <span class="{{iconClasses.info}}"></span>
                                </a>
                            </div>

                        </div>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header" style="vertical-align:center">
                            <label class="tooglebutton" ng-model="setupMapcompWrapper.data.imagery" ng-click="toggleMapcompFinalizationImagery(setupMapcompWrapper, $event)" uib-btn-checkbox><span class="{{iconClasses.mapcompImagery}}"></span>
                                Imagery</label>

                            <a ng-show="setupMapcompWrapper.data.imagery" style="float:right" ng-click="editSetupMapcompStyleInterface(setupMapcompWrapper)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Edit Imagery">
                                <span class="{{iconClasses.styleLabels}}"></span>
                            </a>

                        </div>
                        <div uib-collapse="!setupMapcompWrapper.data.imagery" class="card-body">
                            <div ng-if="windowLayoutState.setupmapcomp" class="flexplus1 flexcontainer linemargins" style="flex-wrap:wrap">
                                <styleinterfacethumbnail ng-class="{active: (styleInterface.id == setupMapcompWrapper.styleInterface.id)}" ng-repeat="styleInterface in customStyleInterfaces track by $index" class="flexfixed opacityhover clickable" size="56" activeicon="styleImageryL" ng-click="styleInterfacePreAction(styleInterface)&&(styleInterface.id == setupMapcompWrapper.styleInterface.id)?editSetupMapcompStyleInterface(setupMapcompWrapper):applyStyleInterfaceToSetupMapcompWrapper(styleInterface)" ng-model="styleInterface" data-toggle-tooltip data-placement="top" title="" data-original-title="{{styleInterface.name + (styleInterface.errorMsg&&' ('+styleInterface.errorMsg+')'||'')}}">
                                </styleinterfacethumbnail>
                                <styleinterfacethumbnail ng-class="{active: (styleInterface.id == setupMapcompWrapper.styleInterface.id)}" ng-repeat="styleInterface in defaultStyleInterfaces track by $index" ng-if="!isDefaultStyleInterfacesHidden(styleInterface)" class="flexfixed opacityhover clickable" size="56" activeicon="styleImageryL" ng-click="styleInterfacePreAction(styleInterface)&&(styleInterface.id == setupMapcompWrapper.styleInterface.id)?editSetupMapcompStyleInterface(setupMapcompWrapper):applyStyleInterfaceToSetupMapcompWrapper(styleInterface)" ng-model="styleInterface" data-toggle-tooltip data-placement="top" title="" data-original-title="{{styleInterface.name + (styleInterface.errorMsg&&' ('+styleInterface.errorMsg+')'||'')}}">
                                </styleinterfacethumbnail>
                                <styleinterfacethumbnail ng-class="{active: (styleInterface.id == setupMapcompWrapper.styleInterface.id)}" ng-repeat="styleInterface in staticAdditionalMapcompStyleInterfaces track by $index" class="flexfixed opacityhover clickable" size="56" activeicon="styleImageryL" ng-click="styleInterfacePreAction(styleInterface)&&(styleInterface.id == setupMapcompWrapper.styleInterface.id)?editSetupMapcompStyleInterface(setupMapcompWrapper):applyStyleInterfaceToSetupMapcompWrapper(styleInterface)" ng-model="styleInterface" data-toggle-tooltip data-placement="top" title="" data-original-title="{{styleInterface.name + (styleInterface.errorMsg&&' ('+styleInterface.errorMsg+')'||'')}} (Mapcomp)">
                                </styleinterfacethumbnail>
                                <div ng-click="addNewCustomStyleInterface(applyStyleInterfaceToSetupMapcompWrapper)" class="silentbutton addstyleinterfacethumb"><span class="{{iconClasses.plus}}"></span>
                                </div>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:110px" class="flexfixed inlinemargins">Quality</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="setupMapcompWrapper.data.imgQuality" min="10" step="1" max="100" tooltip="hide"></slider>
                                <changevalbyclick style="width:40px" class="flexfixed inlinemargins" suffix="%" ng-model="setupMapcompWrapper.data.imgQuality" min="10" step="1" max="100">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:110px" class="flexfixed inlinemargins">Blend Duration</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="setupMapcompWrapper.data.imgBlendDur" min="0.01" step="0.01" max="2" tooltip="hide"></slider>
                                <changevalbyclick style="width:40px" class="flexfixed inlinemargins" suffix="_s" ng-model="setupMapcompWrapper.data.imgBlendDur" min="0.01" step="0.01" max="4">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer flexplus1">
                                <label class="tooglebutton" ng-model="setupMapcompWrapper.data.imgMotionBlur" ng-click="applyMapcompWrapperToHost(setupMapcompWrapper)" uib-btn-checkbox><span class="{{iconClasses.motionblur}}"></span> Imagery Motion Blur</label>
                            </div>
                        </div>
                    </div>
                    <div class="card border-secondary linemargins">
                        <div class="card-header" style="vertical-align:center">
                            <label class="tooglebutton" ng-model="setupMapcompWrapper.data.mapcompLabels" ng-click="toggleMapcompFinalizationMapcompLabels(setupMapcompWrapper, $event)" uib-btn-checkbox><span class="{{iconClasses.mapcompLabels}}"></span>
                                Mapcomp Labels</label>
                            <a ng-show="setupMapcompWrapper.data.mapcompLabels" style="float:right;" ng-click="editMapcompLabels(setupMapcompWrapper)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Edit Labels">
                                <span class="{{iconClasses.styleLabels}}"></span>
                            </a>
                        </div>
                        <div uib-collapse="!setupMapcompWrapper.data.mapcompLabels" class="card-body">
                            <div class="flexplus1 flexcontainer linemargins" style="flex-wrap:wrap">
                                
                                <mapcomplabelinterfacethumbnail ng-class="{active: (mapcomLabelInterface.id == setupMapcompWrapper.data.mapcompLabelInterface.id)}" ng-repeat="mapcomLabelInterface in matchingMapcompLabelInterfaces track by $index" ng-model="mapcomLabelInterface" class="flexfixed opacityhover clickable" size="56" activeicon="styleLabelsL" ng-click="(mapcomLabelInterface.id == setupMapcompWrapper.data.mapcompLabelInterface.id)?editMapcompLabels(setupMapcompWrapper):applyMapcompLabelInterfaceToSetupMapcompWrapper(mapcomLabelInterface)" data-toggle-tooltip data-placement="top" title="" data-original-title="{{mapcomLabelInterface.name}}">
                                </mapcomplabelinterfacethumbnail>
                                <mapcomplabelinterfacethumbnail ng-class="{active: (mapcomLabelInterface.id == setupMapcompWrapper.data.mapcompLabelInterface.id)}" ng-repeat="mapcomLabelInterface in staticAdditionalMapcompLabelInterfaces track by $index" ng-model="mapcomLabelInterface" class="flexfixed opacityhover clickable" size="56" activeicon="styleLabelsL" ng-click="(mapcomLabelInterface.id == setupMapcompWrapper.data.mapcompLabelInterface.id)?editMapcompLabels(setupMapcompWrapper):applyMapcompLabelInterfaceToSetupMapcompWrapper(mapcomLabelInterface)" data-toggle-tooltip data-placement="top" title="" data-original-title="{{mapcomLabelInterface.name}}">
                                </mapcomplabelinterfacethumbnail>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span ng-if="setupMapcompWrapper.data.labelDensity == 1" style="width:110px" class="flexfixed inlinemargins">low Density</span>
                                <span ng-if="setupMapcompWrapper.data.labelDensity == 2" style="width:110px" class="flexfixed inlinemargins">medium Density</span>
                                <span ng-if="setupMapcompWrapper.data.labelDensity == 3" style="width:110px" class="flexfixed inlinemargins">high Density</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="setupMapcompWrapper.data.labelDensity" min="1" step="1" max="3" tooltip="hide" ng-change="applyMapcompWrapperToHost(setupMapcompWrapper)"></slider>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:110px" class="flexfixed inlinemargins">Size</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="setupMapcompWrapper.data.mapcompLabelSize" min="0.5" step="0.01" max="3" tooltip="hide" ng-change="applyMapcompWrapperToHost(setupMapcompWrapper)"></slider>
                                <changevalbyclick style="width:40px" class="flexfixed inlinemargins" suffix="x" ng-model="setupMapcompWrapper.data.mapcompLabelSize" min="0.1" step="0.01" max="10" ng-change="applyMapcompWrapperToHost(setupMapcompWrapper)"></changevalbyclick>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:110px" class="flexfixed inlinemargins">Blend Duration</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="setupMapcompWrapper.data.labelBlendDur" min="0.01" step="0.01" max="2" tooltip="hide"></slider>
                                <changevalbyclick style="width:40px" class="flexfixed inlinemargins" suffix="_s" ng-model="setupMapcompWrapper.data.labelBlendDur" min="0.01" step="0.01" max="2">
                                </changevalbyclick>
                            </div>

                            <div class="flexcontainer flexplus1">
                                <label class="tooglebutton" ng-model="setupMapcompWrapper.data.labelMotionBlur" ng-click="applyMapcompWrapperToHost(setupMapcompWrapper)" uib-btn-checkbox><span class="{{iconClasses.motionblur}}"></span> Label Motion Blur</label>
                            </div>

                            <div ng-if="showHiddenPrefs">
                                <div style="margin-bottom:-4px;"><span>Title safe area (relative to comp size):</span>
                                </div>
                                <div class="flexcontainer linemargins">
                                    <slider class="inlineslider flexplus1" ng-model="setupMapcompWrapper.data.mapcompLabelsSaveFrameBuffer" min="0" step="0.01" max="0.2" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_x" ng-model="setupMapcompWrapper.data.mapcompLabelsSaveFrameBuffer" min="-0.5" max="0.5">
                                    </changevalbyclick>
                                    <small>({{Math.floor(Math.min(setupMapcompWrapper.comp.width,
                                        setupMapcompWrapper.comp.height)*setupMapcompWrapper.data.mapcompLabelsSaveFrameBuffer)}}px)</small>
                                </div>
                                <div style="margin-bottom:-4px;"><span>Label buffer (relative to comp size):</span>
                                </div>
                                <div class="flexcontainer linemargins">
                                    <slider class="inlineslider flexplus1" ng-model="setupMapcompWrapper.data.mapcompLabelsLabelBuffer" min="0" step="0.01" max="0.2" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_x" ng-model="setupMapcompWrapper.data.mapcompLabelsLabelBuffer" min="0" max="0.5">
                                    </changevalbyclick>
                                    <small>({{Math.floor(Math.min(setupMapcompWrapper.comp.width,
                                        setupMapcompWrapper.comp.height)*setupMapcompWrapper.data.mapcompLabelsLabelBuffer)}}px)</small>
                                </div>
                                <div style="margin-bottom:-4px;"><span>Min appearance time:</span></div>
                                <div class="flexcontainer linemargins">
                                    <slider class="inlineslider flexplus1" ng-model="setupMapcompWrapper.data.mapcompLabelsBlendoutDurationThrashhold" min="0" step="0.01" max="5" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_s" ng-model="setupMapcompWrapper.data.mapcompLabelsBlendoutDurationThrashhold" min="0" max="10">
                                    </changevalbyclick>
                                </div>
                                <div style="margin-bottom:-4px;"><span>Collision sample rate:</span></div>
                                <div class="flexcontainer linemargins">
                                    <slider class="inlineslider flexplus1" ng-model="setupMapcompWrapper.data.mapcompLabelsSampleRateDur" min="0.1" step="0.01" max="2" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:40px" suffix="_s" ng-model="setupMapcompWrapper.data.mapcompLabelsSampleRateDur" min="0.1" max="10">
                                    </changevalbyclick>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="card border-secondary">
                        <button type="button" class="btn btn-sm btn-secondary" ng-click="repairExpressions()">Repair
                            Expressions</button>
                        <button type="button" class="btn btn-sm btn-secondary" ng-click="purgeMapcompTileCache(setupMapcompWrapper)">Purge Imagery Cache</button>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.editstyleinterface || 0}}" style="flex-basis: 40%;">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="input-group-sm flexcontainer linemargins">
                        <span class="flexfixed inlinemargins">Name</span>
                        <changetextbyclick class="flexplus1 flexshrink1" ng-model="setupStyleInterface.name">
                        </changetextbyclick>
                    </div>
                    <span ng-if="setupStyleInterface.minZoomEditable" class="flexcontainer flexplus1 linemargins">
                        <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">Min Zoom</span>
                        <slider class="flexplus1" style="margin-left:10px;margin-right:15px;" ng-model="setupStyleInterface.minZoom" min="0" step="1" max="23" tooltip="hide"></slider>
                        <changevalbyclick class="flexfixed" style="width:30px;" ng-model="setupStyleInterface.minZoom" suffix="" min="0" step="1" max="23"></changevalbyclick>
                    </span>
                    <span ng-if="setupStyleInterface.maxZoomEditable" class="flexcontainer flexplus1 linemargins">
                        <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">Max Zoom</span>
                        <slider class="flexplus1" style="margin-left:10px;margin-right:15px;" ng-model="setupStyleInterface.maxZoom" min="0" step="1" max="23" tooltip="hide"></slider>
                        <changevalbyclick class="flexfixed" style="width:30px;" ng-model="setupStyleInterface.maxZoom" suffix="" min="0" step="1" max="23"></changevalbyclick>
                    </span>
                    <span ng-show="setupStyleInterface.indexedLineWidths.length" class="flexcontainer flexplus1 linemargins">
                        <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">Line Width</span>
                        <slider class="flexplus1" style="margin-left:10px;margin-right:15px;" ng-model="setupStyleInterface.lineWidthMult" min="0.1" step="0.1" max="5" tooltip="hide">
                        </slider>
                        <changevalbyclick class="flexfixed" style="width:30px;" ng-model="setupStyleInterface.lineWidthMult" suffix="_x" min="0.1" step="0.1" max="10">
                        </changevalbyclick>
                    </span>
                    <span ng-if="showHiddenPrefs" class="flexcontainer flexplus1 linemargins">
                        <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">Render
                            Buffer</span>
                        <slider class="flexplus1" style="margin-left:10px;margin-right:15px;" ng-model="setupStyleInterface.renderBuffer" min="0" step="1" max="64" tooltip="hide">
                        </slider>
                        <changevalbyclick class="flexfixed" style="width:40px;" ng-model="setupStyleInterface.renderBuffer" suffix="_px" min="0" step="1" max="256">
                        </changevalbyclick>
                    </span>
                    <span ng-if="showHiddenPrefs" class="flexcontainer flexplus1 linemargins">
                        <label class="tooglebutton" ng-model="setupStyleInterface.noParalelRender" uib-btn-checkbox><span class="{{iconClasses.checkbox(setupStyleInterface.noParalelRender)}}"></span> No paralel
                            tile render</label>
                    </span>
                    <span class="card border-secondary linemargins" ng-show="rasterInterface.show" ng-repeat="rasterInterface in setupStyleInterface.indexedRasterInterfaces">
                        <div class="card-header">
                            {{rasterInterface.name}}
                        </div>
                        <div class="card-body">
                            <div class="input-group-sm flexcontainer flexplus1">
                                <span class="flexfixed inlinemargins">URI</span>
                                <changetextbyclick class="flexplus1 flexshrink1" style="margin-right: 10px;" ng-model="rasterInterface.tileUri"></changetextbyclick>
                                <button type="button" class="btn btn-sm btn-secondary" data-toggle-tooltip data-placement="top" title="" data-original-title="pick local tile directory" ng-click="pickLocalUriMaskForRasterInterface(rasterInterface)">...</button>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{rasterInterface.scheme ||
                                            'xyz'}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a class="dropdown-item clickable" ng-click="rasterInterface.scheme = 'xyz'">xyz</a>
                                            <a class="dropdown-item clickable" ng-click="rasterInterface.scheme = 'tms'">tms</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flexcontainer flexplus1">
                                <span class="flexfixed inlinemargins">Min Zoom</span>
                                <changevalbyclick class="flexfixed" style="min-width:25px;margin-right: 10px;" ng-model="rasterInterface.minzoom" suffix="" min="0" step="1" max="23">
                                </changevalbyclick>
                                <span class="flexfixed inlinemargins">Max Zoom</span>
                                <changevalbyclick class="flexfixed" style="min-width:25px;margin-right: 10px;" ng-model="rasterInterface.maxzoom" suffix="" min="0" step="1" max="23">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer flexplus1">
                                <span class="flexfixed inlinemargins">Tile Size</span>
                                <changevalbyclick class="flexfixed" style="min-width:25px;margin-right: 10px;" ng-model="rasterInterface.tileSize" suffix="_px" min="256" step="1" max="4096">
                                </changevalbyclick>
                            </div>
                            <div ng-if="rasterInterface.bounds" class="flexcontainer flexplus1">
                                <span class="flexfixed inlinemargins">Bounds</span>
                                <changevalbyclick class="flexshrink1" style="min-width:25px;margin-right: 10px;" ng-model="rasterInterface.bounds[0]" suffix="°,_" min="-180" max="180">
                                </changevalbyclick>
                                <changevalbyclick class="flexshrink1" style="min-width:25px;margin-right: 10px;" ng-model="rasterInterface.bounds[1]" suffix="°,_" min="-90" max="90">
                                </changevalbyclick>
                                <changevalbyclick class="flexshrink1" style="min-width:25px;margin-right: 10px;" ng-model="rasterInterface.bounds[2]" suffix="°,_" min="-180" max="180">
                                </changevalbyclick>
                                <changevalbyclick class="flexshrink1" style="min-width:25px;margin-right: 10px;" ng-model="rasterInterface.bounds[3]" suffix="°" min="-90" max="90">
                                </changevalbyclick>
                            </div>
                        </div>
                    </span>


                    <span class="flexcontainer flexplus1 linemargins" ng-if="!indexedVar.groupId && indexedVar.type != 'eval'" ng-repeat="indexedVar in setupStyleInterface.indexedVars">
                        <div ng-if="indexedVar.type == 'number'" class="flexcontainer flexplus1">
                            <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">{{indexedVar.name}}</span>
                            <slider class="flexplus1" style="margin-left:10px;margin-right:15px;" ng-model="indexedVar.value" min="indexedVar.min" step="indexedVar.step" max="indexedVar.max" tooltip="hide"></slider>
                            <changevalbyclick class="flexfixed" style="width:30px;" ng-model="indexedVar.value" suffix="" min="{{indexedVar.min}}" step="{{indexedVar.step}}" max="{{indexedVar.max}}">
                            </changevalbyclick>
                        </div>
                        <div ng-if="indexedVar.type == 'string'" class="flexcontainer flexplus1">
                            <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">{{indexedVar.name}}</span>
                            <changetextbyclick ng-if="!indexedVar.options.length" class="flexplus1 flexshrink1" ng-model="indexedVar.value"></changetextbyclick>
                            <div ng-if="indexedVar.options.length" class="btn-group flexfixed" role="group">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{indexedVar.value}}</button>
                                    <div class="dropdown-menu scrollable-menu">
                                        <a ng-repeat="option in indexedVar.options.split(',')" class="dropdown-item clickable" ng-click="indexedVar.value = option">{{option}}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-if="indexedVar.type == 'uri'" class="flexcontainer flexplus1">
                            <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">{{indexedVar.name}}</span>
                            <changetextbyclick class="flexplus1 flexshrink1" ng-model="indexedVar.value">
                            </changetextbyclick>
                            <filepicker class="flexfixed" urinotation ng-model="indexedVar.value" filter="{{indexedVar.fileTypes?indexedVar.fileTypes:''}}" prompt="Please choose a .geojson file."></filepicker>
                        </div>
                        <div ng-if="indexedVar.type == 'bool'" class="flexcontainer flexplus1">
                            <label class="tooglebutton" ng-model="indexedVar.value" uib-btn-checkbox><span class="{{iconClasses.checkbox(indexedVar.value)}}"></span>
                                {{indexedVar.name}}</label>
                        </div>
                        <div ng-if="indexedVar.type == 'show'" class="flexcontainer flexplus1">
                            <label class="tooglebutton" ng-model="indexedVar.value" uib-btn-checkbox><span class="{{iconClasses.show(indexedVar.value)}}"></span> {{indexedVar.name}}</label>
                        </div>
                    </span>
                    <span class="card border-secondary linemargins" ng-repeat="indexedVarGroup in setupStyleInterface.indexedVarGroups">
                        <div class="card-header">
                            {{indexedVarGroup.name}}
                        </div>
                        <div class="card-body">
                            <span class="flexcontainer flexplus1 linemargins" ng-if="indexedVar.groupId == indexedVarGroup.id && indexedVar.type != 'eval'" ng-repeat="indexedVar in setupStyleInterface.indexedVars">
                                <div ng-if="indexedVar.type == 'number'" class="flexcontainer flexplus1">
                                    <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">{{indexedVar.name}}</span>
                                    <slider class="flexplus1" style="margin-left:10px;margin-right:15px;" ng-model="indexedVar.value" min="indexedVar.min" step="indexedVar.step" max="indexedVar.max" tooltip="hide"></slider>
                                    <changevalbyclick class="flexfixed" style="width:30px;" ng-model="indexedVar.value" suffix="" min="{{indexedVar.min}}" step="{{indexedVar.step}}" max="{{indexedVar.max}}"></changevalbyclick>
                                </div>
                                <div ng-if="indexedVar.type == 'string'" class="flexcontainer flexplus1">
                                    <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">{{indexedVar.name}}</span>
                                    <changetextbyclick ng-if="!indexedVar.options.length" class="flexplus1 flexshrink1" ng-model="indexedVar.value"></changetextbyclick>
                                    <div ng-if="indexedVar.options.length" class="btn-group flexfixed" role="group">
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{indexedVar.value}}</button>
                                            <div class="dropdown-menu scrollable-menu">
                                                <a ng-repeat="option in indexedVar.options.split(',')" class="dropdown-item clickable" ng-click="indexedVar.value = option">{{option}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div ng-if="indexedVar.type == 'uri'" class="flexcontainer flexplus1">
                                    <span style="max-width:200px" class="flexfixed inlinemargins nowrapellipsis">{{indexedVar.name}}</span>
                                    <changetextbyclick class="flexplus1 flexshrink1" ng-model="indexedVar.value">
                                    </changetextbyclick>
                                    <filepicker class="flexfixed" urinotation ng-model="indexedVar.value" filter="geojson,json" prompt="Please choose a .geojson file."></filepicker>
                                </div>
                                <div ng-if="indexedVar.type == 'bool'" class="flexcontainer flexplus1">
                                    <label class="tooglebutton" ng-model="indexedVar.value" uib-btn-checkbox><span class="{{iconClasses.checkbox(indexedVar.value)}}"></span>
                                        {{indexedVar.name}}</label>
                                </div>
                                <div ng-if="indexedVar.type == 'show'" class="flexcontainer flexplus1">
                                    <label class="tooglebutton" ng-model="indexedVar.value" uib-btn-checkbox><span class="{{iconClasses.show(indexedVar.value)}}"></span>
                                        {{indexedVar.name}}</label>
                                </div>
                            </span>
                        </div>
                    </span>
                    <span class="card border-secondary linemargins" ng-show="setupStyleInterface.type == 'bing'">
                        <div class="card-body">
                            <div class="input-group-sm flexcontainer flexplus1">
                                <span class="flexfixed inlinemargins">Style</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{setupStyleInterface.bingMapStyleName ||
                                            'Aerial'}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a class="dropdown-item clickable" ng-repeat="mapSyleName in bingMapStyleNames" ng-click="setupStyleInterface.bingMapStyleName = mapSyleName; setupStyleInterface.name = 'Bing ' + mapSyleName">{{mapSyleName}}</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-group flexfixed inlinemargins" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{setupStyleInterface.language.name}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a ng-repeat="language in languages" class="dropdown-item clickable" ng-click="setupStyleInterface.language = language">{{language.name}}</a>
                                        </div>
                                    </div>
                                </div>
                                <span class="flexfixed inlinemargins" style="margin-left: 10px;">Api Key</span>
                                <changetextbyclick class="flexplus1 flexshrink1" style="margin-right: 10px;" ng-model="setupStyleInterface.bingApiKey"></changetextbyclick>
                            </div>
                        </div>
                    </span>
                    <div ng-show="setupStyleInterface.editProviderAttribution" class="input-group-sm flexcontainer linemargins">
                        <span class="flexfixed inlinemargins">Attribution</span>
                        <changetextbyclick class="flexplus1 flexshrink1" ng-model="setupStyleInterface.providerAttribution">
                        </changetextbyclick>
                    </div>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.editlabelinterface || 0}}">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="input-group-sm flexcontainer linemargins">
                        <span class="flexfixed inlinemargins">Name</span>
                        <changetextbyclick class="flexplus1 flexshrink1" ng-model="setupLabelInterface.name">
                        </changetextbyclick>
                    </div>
                    <div ng-show="setupLabelInterface.colors.length" class="flexcontainer linemargins">

                        <colorpicker class="flexplus1" ng-repeat="color in setupLabelInterface.colors" ng-model="color.color" ng-change="applyNewMapcompLabelColors()"></colorpicker>
                        

                        <div style="height:22px;" ng-if="matchingLabelColorPresets.length" class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
                            <div class="dropdown-menu dropdown-menu-right scrollable-menu">
                                <colorpresetthumbnail ng-repeat="matchingLabelColorPreset in matchingLabelColorPresets track by $index" class="opacityhover clickable" ng-click="applyNewMapcompLabelColors(matchingLabelColorPreset)" ng-model="matchingLabelColorPreset"></colorpresetthumbnail>
                            </div>
                        </div>
                    </div>
                    <div style="margin-bottom: 5px;">
                        <small>You can also style and even animate your Labels directly by editing the selected Layers
                            in
                            your Mapcomp. Note that they need to be 2D and can't be rotated.</small>
                    </div>
                    <div style="margin-bottom: 3px;" class="card border-secondary">
                        <div class="card-header">
                            Contents
                        </div>
                        <div class="card-body">
                            <div ng-if="showHiddenPrefs" class="flexcontainer">
                                <span class="flexfixed inlinemargins">Data source</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{getSelectedDataApiName()}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a ng-repeat="mapcompLabelApi in mapcompLabelApis" ng-show="mapcompLabelApiAvailable(mapcompLabelApi.id)" class="dropdown-item clickable" ng-click="selectMapcompLabelDataApi(mapcompLabelApi)">{{mapcompLabelApi.displayName}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body linemargins">
                            <div ng-repeat="selectLabelFeatureClass in selectLabelFeatureClasses track by $index">
                                <label ng-if="selectLabelFeatureClass.name.length" class="tooglebutton" ng-model="selectLabelFeatureClass.selected" ng-click="updateExcludeFilterStr()" uib-btn-checkbox><span class="{{iconClasses.show(selectLabelFeatureClass.selected)}}"></span>
                                    {{selectLabelFeatureClass.name}}</label>
                            </div>
                        </div>
                        <div class="card-header">
                            Block Features
                        </div>
                        <div class="card-body">
                            <div ng-repeat="blacklistName in setupLabelInterface.namesBlacklist track by $index" class="btn-group inlinemargins" role="group">
                                <button type="button" class="btn btn-sm btn-secondary" ng-click="editLabelInterfaceBlacklistName(setupLabelInterface, $index)">{{blacklistName}}</button>
                                <button type="button" class="btn btn-sm btn-secondary" ng-click="removeLabelInterfaceBlacklistName(setupLabelInterface, $index)"><span class="{{iconClasses.remove}}"></span></button>
                            </div>
                            <a ng-if="!blockableMapcompLabels.length" class="silentbutton" ng-click="addLabelInterfaceBlacklistName(setupLabelInterface)" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Feature name to block"><span class="{{iconClasses.add}}"></span></a>
                            <div ng-if="blockableMapcompLabels.length" class="btn-group linemargins" role="group">
                                <a class="silentbutton" data-toggle="dropdown" aria-expanded="false"><span class="{{iconClasses.add}}"></span></a>
                                
                                <div class="dropdown-menu scrollable-menu">
                                    <a class="dropdown-item clickable" ng-click="addLabelInterfaceBlacklistName(setupLabelInterface, mapcompLabel.localizedName)">Other...</a>
                                    <div class="dropdown-divider"></div>
                                    <a ng-repeat="mapcompLabel in blockableMapcompLabels" ng-if="setupLabelInterface.namesBlacklist.indexOf(mapcompLabel.localizedName)==-1" class="dropdown-item clickable" ng-click="addLabelInterfaceBlacklistName(setupLabelInterface, mapcompLabel.localizedName)">{{mapcompLabel.localizedName}}</a>
                                </div>
                            </div>
                            <div>
                                <label class="silentbutton tooglebutton linemargins" ng-model="setupLabelInterface.blockTemplateLabelTexts" uib-btn-checkbox><span class="{{iconClasses.checkbox(setupLabelInterface.blockTemplateLabelTexts)}}"></span>
                                    Block Template Label Features</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.editfeatureproperties1 || 0}}">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="input-group-sm flexcontainer linemargins">
                        <span style="min-width:70px;margin-bottom: -5px;" class="flexfixed inlinemargins">Name</span>
                        <changetextbyclick class="flexplus1 flexshrink1" ng-model="editFeaturePropertiesFeature.editFeaturePropertiesFeatureName">
                        </changetextbyclick>
                        <span class="styleThumbnail flexfixed clickable" ng-if="geojsonHelpers.isFeature(editFeaturePropertiesFeature)">
                            <div>
                                <drawingoptionthumbnail drawingoption="getTransformedDrawingOptionOfFeatureOrSelected(editFeaturePropertiesFeature)" bordervalues="drawingOptionsThumbBorderValues" ng-class="{'featurehasdrawingoption':hasFeatureDrawingOption(editFeaturePropertiesFeature),'featurehasnodrawingoption':!hasFeatureDrawingOption(editFeaturePropertiesFeature)}" class="clickable" data-toggle="dropdown" aria-expanded="false">
                                </drawingoptionthumbnail>
                                <div class="dropdown-menu scrollable-menu">
                                    <input class="searchbar form-control mr-sm-2 flexplus1" type="search" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (drawingOptionsfilterStr.length > 0)}" ng-model="drawingOptionsfilterStr" ng-change="updateTooltips(true)">
                                    <div style="padding: 0rem 1.0rem;" class="drawingoptionsgrid">

                                        <drawingoptionthumbnail ng-class="{'styleThumbnailSelected':drawingOption.id==editFeaturePropertiesFeature.properties.GEOlayersDrawingOption.id}" class="clickable" ng-repeat="drawingOption in drawingOptions | filter:drawingOptionsfilterStr" ng-click="drawingOptionHelpers.setDrawingOptionOfFeature(editFeaturePropertiesFeature, drawingOption)" drawingoption="drawingOption" bordervalues="drawingOptionsThumbBorderValues" data-toggle-tooltip data-placement="top" title="" data-original-title="{{shortenString(drawingOption.name, 16)}}">
                                        </drawingoptionthumbnail>
                                        <a class="silentbutton adddrawingoptionsthumb" ng-click="editDrawingOptions('new');" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Style"><span class="{{iconClasses.add}}"></span></a>
                                    </div>
                                    <div ng-show="hasFeatureDrawingOption(editFeaturePropertiesFeature)" style="padding: 0rem 1.0rem;"><a ng-click="drawingOptionHelpers.removeDrawingOptionOfFeature(editFeaturePropertiesFeature)" class="silentbutton flexfixed"><span class="{{iconClasses.remove}}"></span>
                                            Remove Custom Style</a></div>

                                </div>
                            </div>
                        </span>
                    </div>
                    <div ng-if="hasFeatureLatLon(editFeaturePropertiesFeature)" class="flexcontainer linemargins">
                        <a ng-click="editFeaturePropertiesCenterLabelPoint()" class="silentbutton flexfixed"><span class="{{iconClasses.label}}"></span> Center Label Position</a>
                    </div>
                    <div ng-if="editFeaturePropertiesNamingPropNames.length > 0" class="flexcontainer">
                        <span style="min-width:70px" class="flexfixed inlinemargins">Name Features by</span>
                        <div class="btn-group flexfixed" role="group">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{editFeaturePropertiesFeature.properties.GEOlayersNamingProp
                                    || "Auto"}}</button>
                                <div class="dropdown-menu scrollable-menu">
                                    <a class="dropdown-item clickable" ng-click="applyNamingProp(editFeaturePropertiesFeature, undefined)">Auto</a>
                                    <div class="dropdown-divider"></div>
                                    <a ng-repeat="editFeaturePropertiesNamingPropName in editFeaturePropertiesNamingPropNames" ng-if="editFeaturePropertiesNamingPropName.indexOf('GEOlayers')!=0" class="dropdown-item clickable" ng-click="applyNamingProp(editFeaturePropertiesFeature, editFeaturePropertiesNamingPropName)">{{editFeaturePropertiesNamingPropName}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-if="editFeaturePropertiesNamingPropNames.length > 0" class="flexfixed linemargins">
                        <label class="flexfixed silentbutton tooglebutton" ng-model="editFeaturePropertiesFeature.properties.GEOlayersSortFeatures" uib-btn-checkbox><span class="{{iconClasses.checkbox(editFeaturePropertiesFeature.properties.GEOlayersSortFeatures)}}"></span>
                            Sort Features by Name
                        </label>
                    </div>
                    <div ng-if="editFeaturePropertiesNamingPropNames.length > 0" class="flexcontainer">
                        <span style="min-width:70px" class="flexfixed inlinemargins"><span class="{{iconClasses.timing}}"></span> Feature Timing by</span>
                        <div class="btn-group flexfixed" role="group">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{editFeaturePropertiesFeature.properties.GEOlayersTimingProp
                                    || "None"}}</button>
                                <div class="dropdown-menu scrollable-menu">
                                    <a class="dropdown-item clickable" ng-click="applyTimingProp(editFeaturePropertiesFeature, undefined)">None</a>
                                    <div class="dropdown-divider"></div>
                                    <a ng-repeat="editFeaturePropertiesNamingPropName in editFeaturePropertiesNamingPropNames" ng-if="editFeaturePropertiesNamingPropName.indexOf('GEOlayers')!=0" class="dropdown-item clickable" ng-click="applyTimingProp(editFeaturePropertiesFeature, editFeaturePropertiesNamingPropName)">{{editFeaturePropertiesNamingPropName}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-if="geojsonHelpers.isFeatureTrimable(editFeaturePropertiesFeature)">
                        <div class="flexcontainer">
                            <span class="flexfixed" style="min-width:45px;">Trim from </span>
                            <slider class="inlineslider flexplus1" ng-change="previewTrimmedFeature()" ng-model="editFeaturePropertiesTrimPercentages[0]" min="0" max="100" tooltip="hide">
                            </slider>
                            <a ng-click="previewTrimmedFeature(-1)" class="silentbutton flexfixed">
                                <span class="{{iconClasses.previous}}"></span>
                            </a>
                            <a ng-click="previewTrimmedFeature(1)" class="silentbutton flexfixed">
                                <span class="{{iconClasses.next}}"></span>
                            </a>
                        </div>
                        <div class="flexcontainer">
                            <span class="flexfixed" style="min-width:45px;">Trim to </span>
                            <slider class="inlineslider flexplus1" ng-change="previewTrimmedFeature()" ng-model="editFeaturePropertiesTrimPercentages[1]" min="0" max="100" tooltip="hide">
                            </slider>
                            <a ng-click="previewTrimmedFeature(0,-1)" class="silentbutton flexfixed">
                                <span class="{{iconClasses.previous}}"></span>
                            </a>
                            <a ng-click="previewTrimmedFeature(0,1)" class="silentbutton flexfixed">
                                <span class="{{iconClasses.next}}"></span>
                            </a>
                        </div>
                    </div>
                    <div ng-if="showGEOlayersUseCoordTimesCheckbox">
                        <label class="flexfixed silentbutton tooglebutton linemargins" ng-model="editFeaturePropertiesFeature.properties.GEOlayersUseCoordTimes" uib-btn-checkbox><span class="{{iconClasses.checkbox(editFeaturePropertiesFeature.properties.GEOlayersUseCoordTimes)}}"></span>
                            Use Coordinate Times for animation
                            ({{geojsonHelpers.getCoordTimesDurationStr(editFeaturePropertiesTrimmedFeature||editFeaturePropertiesFeature)}})</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.editfeatureproperties2 || 0}}" style="flex-basis: 150px;">
            <div class="modal-content">
                <div class="modal-body">
                    <div style="margin-bottom: 3px;" class="card border-secondary">
                        <div class="card-header">
                            Properties
                        </div>
                        <div class="card-body">
                            <div ng-repeat="(key, value) in editFeaturePropertiesFeature.properties">
                                <div ng-if="showEditFeaturePropertiesKeyValPair(key)" class="flexcontainer">
                                    <div style="width:120px;overflow: hidden" ng-click="copyStrToClipboard(key)" class="flexfixed inlinemargins">
                                        <small>{{key}}</small>
                                    </div>
                                    
                                    <input ng-if="showEditFeaturePropertiesVal(value)" type="text" class="form-control flexplus1 flexshrink1" ng-model="value" readonly="readonly">
                                    <div ng-if="!showEditFeaturePropertiesVal(value)" class="flexplus1" style="overflow:hidden;opacity:0.3;">data can not be displayed</div>
                                    <a ng-if="isHttpLink(value)" ng-click="openInDefaultBrowser(value)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Open in Browser">
                                        <span class="{{iconClasses.externalLink}}"></span>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div ng-if="editFeaturePropertiesCollectiveFeatureProperties" style="margin-bottom: 3px;" class="card border-secondary">

                        <div class="card-header">
                            Collective Feature Properties ({{editFeaturePropertiesFeature.features.length}}
                            Feature{{editFeaturePropertiesFeature.features.length==1?"":"s"}})
                        </div>
                        <div class="card-body">
                            <div ng-repeat="(key, value) in editFeaturePropertiesCollectiveFeatureProperties">
                                <div ng-if="showEditFeaturePropertiesKeyValPair(key)" class="flexcontainer">
                                    <div style="width:120px;overflow: hidden" ng-click="copyStrToClipboard(key)" class="flexfixed inlinemargins">
                                        <small>{{key}}</small>
                                    </div>
                                    <div ng-if="value.type == 'number'" class="flexplus1 flexshrink1" style="overflow: auto">
                                        <div class="flexcontainer"><span class="flexfixed" style="min-width:25px;opacity:0.7;"><small>Min</small></span><input type="text" class="form-control flexplus1 flexshrink1" ng-model="value.min" readonly="readonly"></div>
                                        <div class="flexcontainer"><span class="flexfixed" style="min-width:25px;opacity:0.7;"><small>Max</small></span><input type="text" class="form-control flexplus1 flexshrink1" ng-model="value.max" readonly="readonly"></div>
                                    </div>
                                    <a ng-click="createDataTransformingDrawingOptionFromCollectiveFeatureProperty(value)" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" title="" data-original-title="Create Data-driven Style">
                                        <span style="display: inline-block;min-width:22px"><span class="{{iconClasses.draw}}"></span><span class="{{iconClasses.dataTransformAdd}}"></span></span>
                                    </a>

                                </div>
                            </div>
                        </div>

                    </div>
                    <div style="margin-bottom: 3px;" class="card border-secondary">
                        <button type="button" class="btn btn-sm btn-secondary" ng-click="exportPropertiesCsv(editFeaturePropertiesFeature)">Export Properties to
                            .csv</button>
                        <button type="button" class="btn btn-sm btn-secondary" ng-click="exportPropertiesCsv(editFeaturePropertiesFeature, true)">Export Properties to
                            .tsv</button>
                        <button type="button" class="btn btn-sm btn-secondary" ng-click="addFeaturePropertiesFromCsv(editFeaturePropertiesFeature, $event)">Import Properties from
                            .csv/.tsv</button>
                        <button type="button" class="btn btn-sm btn-secondary" ng-click="importPropertiesFromFileSequence(editFeaturePropertiesFeature)">Import Properties
                            from file sequence</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.selectdownloadfeatureset || 0}}">
            <div ng-show="downloadFeatureSet.show?downloadFeatureSet.show():true" style="padding:12px;width:100%" class="listitemborder silentbutton mapcomplistitem" ng-repeat="downloadFeatureSet in downloadFeatureSets track by $index" ng-click="downloadFeatureSet.do();resetToLastWindowLayoutState()">
                <div class="linemargins">
                    <span class="{{iconClasses[downloadFeatureSet.icon]}}"></span>
                    {{downloadFeatureSet.name}}
                </div>
                <div style="width:100%;opacity:0.6;margin-top: 2px;" class="flexcontainer"><small class="nowrapellipsis flexshrink1" style="width:100%:display:block;">{{downloadFeatureSet.subline}}</small></div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.diagrams || 0}}">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            General
                        </div>
                        <div class="card-body">
                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">Size</span>
                                <changevalbyclick class="flexfixed inlinemargins" suffix="_px" ng-model="curDiagram.width" ng-change="curDiagramChanged()" min="4" step="1" max="10000"></changevalbyclick>
                                <span class="flexfixed inlinemargins">x</span>
                                <changevalbyclick class="flexfixed" suffix="_px" ng-model="curDiagram.height" ng-change="curDiagramChanged()" min="4" step="1" max="10000"></changevalbyclick>
                            </div>


                            

                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">Axes Style</span>
                                <drawingoptionthumbnail drawingoption="curDiagram.axesStyle" bordervalues="drawingOptionsThumbBorderValues" class="clickable" data-toggle="dropdown" aria-expanded="false"></drawingoptionthumbnail>
                                <div class="dropdown-menu scrollable-menu">
                                    <input class="searchbar form-control mr-sm-2 flexplus1" type="search" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (drawingOptionsfilterStr.length > 0)}" ng-model="drawingOptionsfilterStr" ng-change="updateTooltips(true)">
                                    <div style="padding: 0rem 1.0rem;" class="drawingoptionsgrid">

                                        <drawingoptionthumbnail ng-class="{'styleThumbnailSelected':drawingOption.id==curDiagram.axesStyle.id}" class="clickable" ng-repeat="drawingOption in drawingOptions | filter:drawingOptionsfilterStr" ng-click="curDiagram.axesStyle = drawingOption; curDiagramChanged()" drawingoption="drawingOption" bordervalues="drawingOptionsThumbBorderValues" data-toggle-tooltip data-placement="top" title="" data-original-title="{{shortenString(drawingOption.name, 16)}}">
                                        </drawingoptionthumbnail>
                                        <a class="silentbutton adddrawingoptionsthumb" ng-click="editDrawingOptions('new');" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Style"><span class="{{iconClasses.add}}"></span></a>
                                    </div>
                                    <div style="padding: 0rem 1.0rem;"><a ng-click="editDrawingOptions();" class="silentbutton flexfixed"><span class="{{iconClasses.styleDrawingOptions}}"></span>
                                            Edit Styles</a></div>
                                </div>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">Arrow Size</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="curDiagram.axesStrokeWidth" min="1" step="1" max="20" tooltip="hide" ng-change="curDiagramChanged(true)">
                                </slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_px" ng-model="curDiagram.axesStrokeWidth" ng-change="curDiagramChanged()" min="1" max="1000">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer">
                                <label class="flexfixed silentbutton tooglebutton inlinemargins" ng-model="curDiagram.axisX" ng-change="curDiagramChanged()" uib-btn-checkbox><span class="{{iconClasses.checkbox(curDiagram.axisX)}}"></span> X-Axis </label>
                                <div class="flexfixed" style="width:5px;"></div>
                                <label ng-show="curDiagram.axisX" class="flexfixed silentbutton tooglebutton inlinemargins" ng-model="curDiagram.arrowX" ng-change="curDiagramChanged()" uib-btn-checkbox><span class="{{iconClasses.checkbox(curDiagram.arrowX)}}"></span> Arrow Head </label>
                            </div>
                            <div class="flexcontainer linemargins">
                                <label class="flexfixed silentbutton tooglebutton inlinemargins" ng-model="curDiagram.axisY" ng-change="curDiagramChanged()" uib-btn-checkbox><span class="{{iconClasses.checkbox(curDiagram.axisY)}}"></span> Y-Axis </label>
                                <div class="flexfixed" style="width:5px;"></div>
                                <label ng-show="curDiagram.axisY" class="flexfixed silentbutton tooglebutton inlinemargins" ng-model="curDiagram.arrowY" ng-change="curDiagramChanged()" uib-btn-checkbox><span class="{{iconClasses.checkbox(curDiagram.arrowY)}}"></span> Arrow Head </label>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">Chart Detail</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="curDiagram.detail" min="10" step="1" max="100" tooltip="hide" ng-change="curDiagramChanged(true)"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_%" ng-model="curDiagram.detail" ng-change="curDiagramChanged()" min="10" step="1" max="100">
                                </changevalbyclick>
                            </div>

                        </div>
                    </div>

                    <div class="card border-secondary linemargins">
                        <div class="card-header">
                            Data
                        </div>
                        <div class="card-body">
                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">X-Axis</span>
                                <div class="btn-group flexfixed" role="group">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{shortenString(curDiagram.propNameX || 'Even
                                            Distribution', 32)}}</button>
                                        <div class="dropdown-menu scrollable-menu">
                                            <a class="dropdown-item clickable" ng-click="setCurDiagramPropNameX(null);curDiagramChanged()">Even
                                                Distribution</a>
                                            <a ng-repeat="propName in curDiagramPropNamesX" class="dropdown-item clickable" ng-click="setCurDiagramPropNameX(propName);curDiagramChanged()">{{propName}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div ng-show="curDiagram.propNameX" class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">X-Range</span>
                                <changevalbyclick style="max-width: 80px;" class="flexfixed inlinemargins" ng-model="curDiagram.minX" suffix="_" ng-change="curDiagramChanged()">
                                </changevalbyclick>
                                <span class="flexfixed inlinemargins">/</span>
                                <changevalbyclick style="max-width: 80px;" class="flexfixed" ng-model="curDiagram.maxX" suffix="_" ng-change="curDiagramChanged()"></changevalbyclick>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">X-Buffer</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="curDiagram.bufferX" min="0" step="1" max="90" tooltip="hide" ng-change="curDiagramChanged(true)"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_%" ng-model="curDiagram.bufferX" ng-change="curDiagramChanged()" min="0" max="90">
                                </changevalbyclick>
                            </div>
                            <div ng-show="curDiagram.bufferX > 0" class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">X-Offset</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="curDiagram.bufferOffsetX" min="0" step="1" max="100" tooltip="hide" ng-change="curDiagramChanged(true)">
                                </slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_%" ng-model="curDiagram.bufferOffsetX" ng-change="curDiagramChanged()" min="0" max="100">
                                </changevalbyclick>
                            </div>
                            <div class="flexcontainer" style="margin-top:10px;">
                                <div class="flexfixed">Charts:</div>
                            </div>
                            <div class="dndlist flexcontainer">
                                <ul class="flexplus1" style="padding:0px;margin:0px;background-color:rgba(0,0,0,0.1);border-bottom:solid 1px rgba(256,256,256,0.07);" dnd-list="curDiagram.charts">
                                    <li style="border-top:solid 1px rgba(0,0,0,0.3);padding:5px;padding-bottom:0px;padding-top:3px;margin:0px;" ng-repeat="chart in curDiagram.charts" dnd-draggable="chart" dnd-moved="curDiagram.charts.splice($index, 1);curDiagramChanged()" dnd-effect-allowed="move">
                                        <div style="margin:0px;" class="flexcontainer flexplus1">
                                            <div style="margin-top:6px;" class="flexfixed inlinemargins" ng-class="iconClasses.dragable"></div>
                                            <div dnd-nodrag class="flexplus1 inlinemargins clickable" style="padding-bottom: 5px;">
                                                <div class="flexcontainer linemargins">
                                                    <div class="btn-group flexfixed inlinemargins">
                                                        <div class="flexcontainer linemargins">
                                                            <span style="width:58px" class="flexfixed inlinemargins">Y-Axis</span>
                                                            <div class="btn-group flexfixed" role="group">
                                                                <div class="btn-group" role="group">
                                                                    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{shortenString(chart.propNameY
                                                                        || '---', 32)}}</button>
                                                                    <div class="dropdown-menu scrollable-menu">
                                                                        <a ng-repeat="propName in curDiagramPropNamesY" class="dropdown-item clickable" ng-click="setCurDiagramChartPropNameY(chart, propName);curDiagramChanged()">{{propName}}</a>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="flexplus1 flexcontainer inlinemargins">

                                                    </div>
                                                    <div class="flexfixed flexcontainer">
                                                        <div class="btn-group flexfixed inlinemargins" role="group">
                                                            <div class="btn-group" role="group">
                                                                <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">{{getItemById(curDiagramChartTypes,chart.type,'name').displayName}}</button>
                                                                <div class="dropdown-menu scrollable-menu">
                                                                    <a ng-repeat="chartType in curDiagramChartTypes" class="dropdown-item clickable" ng-click="chart.type = chartType.name;curDiagramChanged()">{{chartType.displayName}}</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <drawingoptionthumbnail drawingoption="chart.style" bordervalues="drawingOptionsThumbBorderValues" class="clickable" data-toggle="dropdown" aria-expanded="false"></drawingoptionthumbnail>
                                                            <div class="dropdown-menu scrollable-menu">
                                                                <input class="searchbar form-control mr-sm-2 flexplus1" type="search" placeholder="&#xF0B0; Filter..." ng-class="{onlinesearchactive: (drawingOptionsfilterStr.length > 0)}" ng-model="drawingOptionsfilterStr" ng-change="updateTooltips(true)">
                                                                <div style="padding: 0rem 1.0rem;" class="drawingoptionsgrid">

                                                                    <drawingoptionthumbnail ng-class="{'styleThumbnailSelected':drawingOption.id==chart.style.id}" class="clickable" ng-repeat="drawingOption in drawingOptions | filter:drawingOptionsfilterStr" ng-click="chart.style = drawingOption; curDiagramChanged()" drawingoption="drawingOption" bordervalues="drawingOptionsThumbBorderValues" data-toggle-tooltip data-placement="top" title="" data-original-title="{{shortenString(drawingOption.name, 16)}}">
                                                                    </drawingoptionthumbnail>
                                                                    <a class="silentbutton adddrawingoptionsthumb" ng-click="editDrawingOptions('new');" data-toggle-tooltip data-placement="top" title="" data-original-title="Add Style"><span class="{{iconClasses.add}}"></span></a>
                                                                </div>
                                                                <div style="padding: 0rem 1.0rem;"><a ng-click="editDrawingOptions();" class="silentbutton flexfixed"><span class="{{iconClasses.styleDrawingOptions}}"></span>
                                                                        Edit Styles</a></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <a ng-if="curDiagram.charts.length > 1" ng-click="curDiagram.charts.splice($index, 1);updateRangeY();curDiagramChanged()" class="silentbutton flexfixed"><span ng-class="iconClasses.remove"></span></a>
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <a ng-click="curDiagramAddChart();updateRangeY();curDiagramChanged()" class="silentbutton linemargins"><span ng-class="iconClasses.add"></span></a>
                            <div class="linemargins"></div>
                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">Y-Range</span>
                                <changevalbyclick style="max-width: 80px;" class="flexfixed inlinemargins" ng-model="curDiagram.minY" suffix="_" ng-change="curDiagramChanged()">
                                </changevalbyclick>
                                <span class="flexfixed inlinemargins">/</span>
                                <changevalbyclick style="max-width: 80px;" class="flexfixed" ng-model="curDiagram.maxY" suffix="_" ng-change="curDiagramChanged()"></changevalbyclick>
                            </div>
                            <div class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">Y-Buffer</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="curDiagram.bufferY" min="0" step="1" max="90" tooltip="hide" ng-change="curDiagramChanged(true)"></slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_%" ng-model="curDiagram.bufferY" ng-change="curDiagramChanged()" min="0" max="90">
                                </changevalbyclick>
                            </div>
                            <div ng-show="curDiagram.bufferY > 0" class="flexcontainer linemargins">
                                <span style="width:80px" class="flexfixed inlinemargins">Y-Offset</span>
                                <slider style="margin-right:7px" class="flexplus1" ng-model="curDiagram.bufferOffsetY" min="0" step="1" max="100" tooltip="hide" ng-change="curDiagramChanged(true)">
                                </slider>
                                <changevalbyclick class="flexfixed" style="width:40px" suffix="_%" ng-model="curDiagram.bufferOffsetY" ng-change="curDiagramChanged()" min="0" max="100">
                                </changevalbyclick>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="windowlayoutstate{{windowLayoutState.labelAndDrawingOptionsMapcompBlacklists || 0}}">
            <div class="modal-body" style="overflow: auto;">
                        <p>{{labelAndDrawingOptionsMapcompBlacklistsText}}</p>
                            <table ng-if="labelAndDrawingOptionsMapcompBlacklistsShowLabel" class="mapcompblackliststable">
                                <thead>
                                    <tr>
                                        <th class="selecthelpers">
                                            <div><a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectAll(labelAndDrawingOptionsMapcompBlacklistsMatrix,true)" class="silentbutton flexfixed"><span class="{{iconClasses.checked}}"></span> Select all</a></div>
                                            <div><a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectAll(labelAndDrawingOptionsMapcompBlacklistsMatrix,false)" class="silentbutton flexfixed"><span class="{{iconClasses.unchecked}}"></span> Select none</a></div>
                                        </th>
                                        <th ng-repeat="header in labelAndDrawingOptionsMapcompBlacklistsMatrix[0].availableAry track by $index">
                                            <div class="rotateheader">
                                                <a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectCol(labelAndDrawingOptionsMapcompBlacklistsMatrix,$index)" class="silentbutton">{{header.mapcompName}}</a>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="labelAndDrawingOptionsMapcompBlacklists in labelAndDrawingOptionsMapcompBlacklistsMatrix track by $index">
                                        <td>
                                            <div class="rowhead">
                                                <a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectRow(labelAndDrawingOptionsMapcompBlacklistsMatrix,$index)" class="silentbutton">{{labelAndDrawingOptionsMapcompBlacklists.templateName}}</a>
                                            </div>
                                        </td>
                                        <td ng-repeat="availableCol in labelAndDrawingOptionsMapcompBlacklists.availableAry">
                                            <div class="rowcheckbox">
                                                <label class="flexfixed silentbutton tooglebutton linemargins" ng-model="availableCol.available" uib-btn-checkbox><span class="{{iconClasses.checkbox(availableCol.available)}}"></span>
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table ng-if="labelAndDrawingOptionsMapcompBlacklistsShowDrawingOptions" class="mapcompblackliststable">
                                <thead>
                                    <tr>
                                        <th class="selecthelpers">
                                            <div><a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectAll(labelAndDrawingOptionsMapcompBlacklistsMatrix2,true)" class="silentbutton flexfixed"><span class="{{iconClasses.checked}}"></span> Select all</a></div>
                                            <div><a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectAll(labelAndDrawingOptionsMapcompBlacklistsMatrix2,false)" class="silentbutton flexfixed"><span class="{{iconClasses.unchecked}}"></span> Select none</a></div>
                                        </th>
                                        <th ng-repeat="header in labelAndDrawingOptionsMapcompBlacklistsMatrix2[0].availableAry">
                                            <div class="rotateheader">
                                                <a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectCol(labelAndDrawingOptionsMapcompBlacklistsMatrix2,$index)" class="silentbutton">{{header.mapcompName}}</a>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="labelAndDrawingOptionsMapcompBlacklists in labelAndDrawingOptionsMapcompBlacklistsMatrix2">
                                        <td>
                                            <div class="rowhead">
                                                
                                                <drawingoptionthumbnail class="flexfixed inlinemargins" drawingoption="getItemById(drawingOptions,labelAndDrawingOptionsMapcompBlacklists.templateId)" bordervalues="drawingOptionsThumbBorderValues"></drawingoptionthumbnail>
                                                <a ng-click="labelAndDrawingOptionsMapcompBlacklistsSelectRow(labelAndDrawingOptionsMapcompBlacklistsMatrix2,$index)" class="silentbutton">{{labelAndDrawingOptionsMapcompBlacklists.templateName}}</a>
                                            </div>
                                        </td>
                                        <td ng-repeat="availableCol in labelAndDrawingOptionsMapcompBlacklists.availableAry">
                                            <div class="rowcheckbox">
                                                <label class="flexfixed silentbutton tooglebutton linemargins" ng-model="availableCol.available" uib-btn-checkbox><span class="{{iconClasses.checkbox(availableCol.available)}}"></span>
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
        </div>
        
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.selectmapcompfooter || 0}}">
            <div class="modal-content">
                
                <div class="modal-footer flexcontainer">
                    <a ng-show="mapcompWrappers.length" ng-click="toggleMapcompSortType();" class="silentbutton flexfixed" data-toggle-tooltip data-placement="top" data-original-title="{{preferences.sortMapcompsType=='name'?'Sort by Mapcomp Name':preferences.sortMapcompsType=='layerorder'?'Sort by Layer Order in containing Comp':'Sort by linked Views'}}">
                        <span ng-if="preferences.sortMapcompsType != 'linked'" class="{{iconClasses.sortBy[preferences.sortMapcompsType] || iconClasses.sortBy.notSupported}}"></span>
                        <span style="margin-left:-5px;" ng-if="preferences.sortMapcompsType == 'linked'" class="{{iconClasses.sortBy['arrow']}}"></span>
                        <span style="margin-left:-10px;padding-top:2px;" ng-if="preferences.sortMapcompsType == 'linked'" class="{{iconClasses.mapcompLink}} fa-xs fa-rotate-90"></span>
                    </a>
                    <div class="flexplus1"></div>
                    <button type="button" class="flexfixed btn btn-secondary" ng-click="setWindowLayoutState('default')">Back</button>
                </div>
            </div>
        </div>
        <div ng-if="busyCancel" class="flexcontainer windowlayoutstate{{windowLayoutState.busyfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer flexcontainer">
                    <button type="button" class="flexfixed btn btn-secondary" ng-click="busyCancel()">{{busyCancelBtnText}}</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.watcherfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer flexcontainer">
                    <button type="button" class="flexfixed btn btn-secondary" ng-click="scriptingUnwatch()">Unwatch</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.projectsfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer flexcontainer">
                    <label class="flexfixed silentbutton tooglebutton linemargins" ng-model="preferences.showProjectsOnLaunch" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferences.showProjectsOnLaunch)}}"></span> Show on
                        startup</label>
                    <div class="flexplus1"></div>
                    <button type="button" class="flexfixed btn btn-secondary" ng-click="resetToLastWindowLayoutState()">Close</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.diagramsfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer flexcontainer">
                    <label class="flexfixed silentbutton tooglebutton linemargins" ng-model="preferences.curDiagramInstantPreview" ng-change="curDiagramChanged(true)" uib-btn-checkbox><span class="{{iconClasses.checkbox(preferences.curDiagramInstantPreview)}}"></span>
                        Preview</label>
                    <div class="flexplus1"></div>
                    <a ng-show="!preferences.curDiagramInstantPreview" class="silentbutton flexfixed" ng-click="updateDiagram()" data-toggle-tooltip data-placement="top" title="" data-original-title="Update Preview"><span class="{{iconClasses.update}}"></span></a>
                    <button type="button" class="flexfixed btn btn-secondary" ng-click="cancelCreateDiagram()">Cancel</button>
                    <button type="button" class="flexfixed btn btn-outline-primary" ng-click="applyCreateDiagram();">OK</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.labelAndDrawingOptionsMapcompBlacklistsfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer flexcontainer">
                    <button type="button" class="flexfixed btn btn-secondary" ng-click="cancelEditLabelAndDrawingOptionsMapcompBlacklists()">Cancel</button>
                    <button type="button" class="flexfixed btn btn-outline-primary" ng-click="applyEditLabelAndDrawingOptionsMapcompBlacklists();">Apply</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.preferencesfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" ng-click="resetToLastWindowLayoutState()">Close</button>
                    <button type="button" class="btn btn-outline-primary" ng-click="applyPreferencesToEdit();resetToLastWindowLayoutState();">Apply</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.duplicatemapcompfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" ng-click="setWindowLayoutState('default')">Cancel</button>
                    <button type="button" class="btn btn-outline-primary" ng-click="duplicateMapcompFromDialog();">{{duplicateMapcompOptions.duplicateMode!=2?"Duplicate":"Split"}}</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.createmapcompfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button ng-click="setWindowLayoutState('default');mainUiMapHelpers.resetStyle()" type="button" class="btn btn-secondary">Cancel</button>
                    <button ng-if="windowLayoutState.name=='createmapcomp'" ng-click="setWindowLayoutState('createmapcomp2');" type="button" class="btn btn-outline-primary">Next</button>
                    <button ng-if="windowLayoutState.name=='createmapcomp2'" ng-click="createMapcomp(newMapcompWrapper, selectedMapcompPreset);mainUiMapHelpers.resetStyle()" type="button" class="btn btn-outline-primary">Create</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.setupmapcompfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" ng-click="cancelMapcompSettings(true);">Cancel</button>
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal" ng-click="applyMapcompSettings(true);">Apply</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.editstyleinterfacefooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" ng-click="cancelStyleInterfaceSettings();">Cancel</button>
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal" ng-click="applyStyleInterfaceSettings();">Apply</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.editlabelinterfacefooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" ng-click="cancelMapcompLabelSettings();">Cancel</button>
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal" ng-click="applyMapcompLabelSettings();">Apply</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.onlinesearchfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" ng-click="clearOnlineSearch()">Back</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.reversegeocodefooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" ng-click="clearOnlineSearch()">Back</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.selectdownloadfeaturesetfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" ng-click="resetToLastWindowLayoutState()">Back</button>
                </div>
            </div>
        </div>
        <div class="flexcontainer windowlayoutstate{{windowLayoutState.editfeaturepropertiesfooter || 0}}">
            <div class="modal-content">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" ng-click="cancelEditFeatureProperties()">Cancel</button>
                    <button type="button" class="btn btn-outline-primary" ng-click="applyEditFeatureProperties();">Apply</button>
                </div>
            </div>
        </div>

    </div>
    <script>
        if (typeof module === 'object') {
            window.module = module;
            module = undefined;
        }
    </script>
    <script>
        if (typeof exports === 'object') {
            window.exports = exports;
            exports = undefined;
        }
    </script>
    <script src="js/libs/glLogger.js"></script>
    <script src="js/libs/jquery-2.0.2.min.js"></script>
    <script src="js/libs/popper.js"></script>
    <script src="js/libs/spectrum.js"></script>
    <script src="js/libs/bootstrap.min.js"></script>
    <script src="js/libs/angular.min.js"></script>
    <script src="js/libs/bootstrap-slider.js"></script>
    <script src="js/libs/slider.js"></script>
    <script src="js/libs/angular-vs-repeat.js"></script>
    <script src="js/libs/uiBootstrap.js"></script>
    <script src="js/libs/angular-dndLists.js"></script>
    <script src="js/libs/angular-LongPress.js"></script>
    <script src="js/libs/angular-rightClick.js"></script>
    <script src="js/libs/colorsys.js"></script>
    <script src="js/libs/fetch.js"></script>
    <script src="js/libs/turf.js"></script>
    <script src="js/libs/polyline.js"></script>
    <script src="js/libs/shapefile.js"></script>
    <script src="js/libs/simplify.js"></script>
    <script src="js/libs/topojson.js"></script>
    <script src="js/libs/iconClasses.js"></script>
    <script src="js/libs/CSInterface.js"></script>
    <script src="js/libs/themeManager.js"></script>
    <script src="js/libs/moment.js"></script>
    <script src="js/libs/csv2geojson.js"></script>
    <script src="js/libs/osmtogeojson.js"></script>
    <script src="js/libs/polylabel.js"></script>
    <script src="js/libs/hardwork.js"></script>
    <script src="js/libs/tcx.js"></script>
    <script src="js/libs.js"></script>

    <script>
        if (window.module) module = window.module;
    </script>
    <script>
        if (window.exports) exports = window.exports;
    </script>
    <script src="js/main.js"></script>

    <script src="js/libs/additionalDirectives.js"></script>
</body>

</html>