93 lines
6.3 KiB
HTML
93 lines
6.3 KiB
HTML
<aol-map #map (onMoveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" [ngClass]="{'panel-visible':(panelVisible|async)}" class="map">
|
|
<aol-view [zoom]="(mapState|async).zoom" [rotation]="(mapState|async).rotation">
|
|
<aol-coordinate [x]="(mapState|async).xCenter" [y]="(mapState|async).yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
|
|
<zoom-to-extent [extent]="extent|async" [animate]="true"></zoom-to-extent>
|
|
</aol-view>
|
|
<aol-interaction-default></aol-interaction-default>
|
|
<aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
|
|
<item-layers [itemLayers]="baseLayers|async"></item-layers>
|
|
<item-layers [itemLayers]="overlayLayers|async"></item-layers>
|
|
<item-layers [itemLayer]="selectedItemLayer|async"></item-layers>
|
|
<aol-layer-vector>
|
|
<item-source-vector [features]="features|async" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="selectedFeature|async" [selectedItem]="selectedItem|async"></item-source-vector>
|
|
</aol-layer-vector>
|
|
<gps-location [position]="position|async" [headingTolerance]="20" [showHeading]="true"></gps-location>
|
|
<div class="control-container">
|
|
<!-- <switch2d3d></switch2d3d>-->
|
|
<rotation-reset></rotation-reset>
|
|
</div>
|
|
<file-drop-target [parentCode]="(parentCode | async)" (onFileDropped)="handleFileDropped($event)"></file-drop-target>
|
|
</aol-map>
|
|
<map-search #mapSearch [openedModalName]="openedModalName|async" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':(menuVisible|async)}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="searchCollapsed|async" [searchMinified]="(searchMinified | async)" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="queryState|async" [clearEnabled]="clearEnabled|async" [period]="period|async"></map-search>
|
|
<side-panel [resizeable]="true" [visible]="(panelVisible|async)" [collapsed]="(panelCollapsed|async)" [collapsable]="false">
|
|
<div class="panel-wrapper">
|
|
<div class="panel-top bg-secondary" *ngIf="!(searchMinified | async)">
|
|
</div>
|
|
<div class="panel-bottom">
|
|
|
|
<div *ngIf="!(selectedItem|async)">
|
|
<feature-list-container [features]="(features | async)" [queryState]="(queryState|async)"></feature-list-container>
|
|
</div>
|
|
|
|
<div *ngIf="(selectedItem | async);let item">
|
|
<selected-item-container [item]="item"></selected-item-container>
|
|
</div>
|
|
<div *ngIf="(features|async).length == 0" class="no-results m-2">
|
|
<div *ngIf="(queryState|async)?.query">Cannot find <span>{{(queryState|async)?.query}}</span></div>
|
|
<div *ngIf="(queryState|async)?.tags">Cannot find tag <span>{{(queryState|async)?.tags}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</side-panel>
|
|
<side-panel [visible]="(menuVisible|async)" class="menu">
|
|
<div class="container-fluid">
|
|
<div class="body">
|
|
<div class="logo">
|
|
<span><img src="/images/farmmapslogo.png" /></span>
|
|
<span><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></span>
|
|
</div>
|
|
<div class="card menu-card">
|
|
<div class="d-flex flex-row flex-wrap">
|
|
<div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
|
|
<div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
|
|
<div class="caption" i18n>Farms</div>
|
|
</div>
|
|
<div class="shortcut-icon" (click)="handleTrijntjeClick($event,{itemType:'vnd.farmmaps.itemtype.trijntje'})">
|
|
<div class="icon rounded-circle trijntje-icon"><i class="fa fa-tint" aria-hidden="true"></i></div>
|
|
<div class="caption" i18n>Trijntje</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card menu-card">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/my_drive']" class="nav-link"><span i18n><i class="fa fa-folder" aria-hidden="true"></i> My Drive</span></a></li>
|
|
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/map_uploads']" class="nav-link"><span i18n><i class="fa fa-cloud-upload" aria-hidden="true"></i> Map uploads</span></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="card menu-card">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item py-0">
|
|
<a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
|
|
<div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
|
|
<layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></layer-list>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item py-0">
|
|
<a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
|
|
<div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
|
|
<layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></layer-list>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!--<div class="card menu-card">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
|
|
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
|
|
</ul>
|
|
</div>-->
|
|
</div>
|
|
</div>
|
|
</side-panel>
|
|
|