93 lines
5.7 KiB
HTML
93 lines
5.7 KiB
HTML
<ng-container *ngIf="{
|
|
mapState:mapState$|async,
|
|
extent:extent$|async,
|
|
baseLayers:baseLayers$|async,
|
|
overlayLayers:overlayLayers$|async,
|
|
selectedItemLayer:selectedItemLayer$|async,
|
|
features:features$|async,
|
|
position:position$|async,
|
|
parentCode:parentCode$|async,
|
|
panelVisible:panelVisible$|async,
|
|
openedModalName:openedModalName$|async,
|
|
panelCollapsed:panelCollapsed$|async,
|
|
searchMinified:searchMinified$|async,
|
|
selectedItem:selectedItem$|async,
|
|
parentItem:parentItem$|async,
|
|
queryState:queryState$|async,
|
|
searchCollapsed:searchCollapsed$|async,
|
|
clearEnabled:clearEnabled$|async,
|
|
period:period$|async,
|
|
compassHeading:compassHeading$|async,
|
|
styles:styles$|async,
|
|
selectedFeature:selectedFeature$|async,
|
|
fullscreen:fullscreen$|async,
|
|
showDataLayerSlide:showDataLayerSlide$|async
|
|
} as state">
|
|
<aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
|
|
<div>
|
|
|
|
</div>
|
|
<aol-view [zoom]="state.mapState.zoom" [rotation]="state.mapState.rotation">
|
|
<aol-coordinate [x]="state.mapState.xCenter" [y]="state.mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
|
|
<fm-map-zoom-to-extent [extent]="state.extent" [animate]="true"></fm-map-zoom-to-extent>
|
|
</aol-view>
|
|
<aol-interaction-default></aol-interaction-default>
|
|
<aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
|
|
<fm-map-item-layers [itemLayers]="state.baseLayers"></fm-map-item-layers>
|
|
<fm-map-item-layers *ngIf="!overrideOverlayLayers" [itemLayers]="state.overlayLayers"></fm-map-item-layers>
|
|
<fm-map-item-layers *ngIf="!overrideSelectedItemLayer" [itemLayer]="state.selectedItemLayer" (onPrerender)="handlePrerender($event)"></fm-map-item-layers>
|
|
<aol-layer-vector>
|
|
<fm-map-item-source-vector [styles]="state.styles" [features]="state.features" (onFeatureSelected)="handleFeatureClick($event)" (onFeatureHover)="handleFeatureHover($event)" [selectedFeature]="state.selectedFeature" [selectedItem]="state.selectedItem"></fm-map-item-source-vector>
|
|
</aol-layer-vector>
|
|
<router-outlet name="map-layers"></router-outlet>
|
|
<fm-map-gps-location [position]="state.position" [headingTolerance]="20" [showHeading]="devicesService.IsMobile()" [showTolerance]="devicesService.IsMobile()" [heading]="state.compassHeading"></fm-map-gps-location>
|
|
<fm-map-layer-values></fm-map-layer-values>
|
|
<div class="viewport-container" [ngStyle]="{'bottom': bottom(state.panelVisible)}">
|
|
<div class="control-container">
|
|
<router-outlet name="map-controls"></router-outlet>
|
|
<fm-map-layer-switcher></fm-map-layer-switcher>
|
|
<fm-map-pan-to-location [position]="state.position" [mapState]="state.mapState" [animate]="true"></fm-map-pan-to-location>
|
|
<fm-map-rotation-reset></fm-map-rotation-reset>
|
|
</div>
|
|
<div class="slide-container" [ngClass]="{'showDataLayerSlide':state.showDataLayerSlide}">
|
|
<form>
|
|
<input class="dataLayerSlide" (input)="handleSlideChange($event)" type="range" style="width: 100%" value="{{dataLayerSlideValue}}"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
|
|
|
|
<div *ngIf="noContent">
|
|
<fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
|
|
</div>
|
|
<div class="side-panel-container">
|
|
|
|
<fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
|
|
<div class="panel-wrapper" *ngIf="noContent">
|
|
<div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
|
|
</div>
|
|
<div class="panel-bottom">
|
|
|
|
<div *ngIf="!(state.selectedItem)">
|
|
<fm-map-feature-list-container [features]="state.features" [selectedFeature]="state.selectedFeature" [queryState]="state.queryState" [clickedFeature]="clickedFeature"></fm-map-feature-list-container>
|
|
</div>
|
|
|
|
<div *ngIf="state.selectedItem;let item">
|
|
<fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
|
|
</div>
|
|
<div *ngIf="state.features.length == 0" class="no-results m-2">
|
|
<div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>
|
|
<div *ngIf="state.queryState?.tags">Cannot find tag <span>{{state.queryState?.tags}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fm-side-panel>
|
|
<fm-side-panel [resizeable]="true" [visible]="!noContent">
|
|
<router-outlet (activate)="handleSidepaneloutletActivate($event)" (deactivate)="handleSidepaneloutletDeactivate($event)"></router-outlet>
|
|
</fm-side-panel>
|
|
</div>
|
|
</aol-map>
|
|
</ng-container>
|
|
|
|
|