Add the Map-Based Query Mode for Working with Spatial Data #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

murermader wants to merge 62 commits into master from gis

angular.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,9 @@ @@
                   "node_modules/@ali-hm/angular-tree-component/css/angular-tree-component.css",
                   "node_modules/katex/dist/katex.min.css",
                   "node_modules/prismjs/themes/prism-okaidia.css",
-                  "src/scss/angular2-multiselect-dropdown.scss"
+                  "src/scss/angular2-multiselect-dropdown.scss",
+                  "src/app/components/data-view/data-map/leaflet.css",
+                  "node_modules/leaflet-draw/dist/leaflet.draw.css"
                 ],
                 "stylePreprocessorOptions": {
                   "includePaths": [
@@ Expand Down @@

package-lock.json

Large diffs are not rendered by default.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,8 @@ @@
         "@coreui/icons-angular": "^4.7.14",
         "@coreui/utils": "2.0.2",
         "@ngtools/webpack": "^17.2.2",
+        "@terraformer/wkt": "^2.2.1",
+        "@turf/turf": "^7.1.0",
         "ace-builds": "^1.31.1",
         "angular-ng-autocomplete": "^2.0.12",
         "angular2-multiselect-dropdown": "^9.0.0",
@@ Expand All / @@ -40,8 +42,15 @@ @@
         "flag-icons": "^6.10.0",
         "flatpickr": "^4.6.3",
         "font-awesome": "^4.7.0",
+        "geojson": "^0.5.0",
+        "graphlib-dot": "^0.6.4",
+        "hammer": "0.0.5",
+        "hammerjs": "^2.0.8",
+        "highlight.js": "^11.8.0",
         "jquery": "3.7.1",
         "jquery-ui": "^1.13.0",
+        "leaflet": "^1.9.4",
+        "leaflet-draw": "^1.0.4",
         "json-pointer": "^0.6.2",
         "katex": "0.16.21",
         "lodash": "^4.17.20",
@@ Expand Down Expand Up / @@ -85,8 +94,12 @@ @@
         "@types/jasminewd2": "^2.0.8",
         "@types/json-pointer": "^1.0.34",
         "@types/lodash": "^4.17.13",
+        "@types/leaflet": "^1.9.14",
+        "@types/leaflet-draw": "^1.0.11",
         "@types/marked": "^4.3.0",
         "@types/node": "^12.11.1",
+        "@types/terraformer__wkt": "^2.0.3",
+        "@types/uuid": "^10.0.0",
         "codelyzer": "^6.0.2",
         "fstream": "^1.0.12",
         "html-webpack-plugin": "^5.5.3",
@@ Expand Down @@

src/app/components/components.module.ts

-Original file line number
+Diff line change
@@ Expand Up @@
     import {DoubleArgComponent} from './polyalg/controls/double-arg/double-arg.component';
     import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.component';
     import {AutocompleteComponent} from './autocomplete/autocomplete.component';
+    import {DataMapComponent} from './data-view/data-map/data-map.component';
+    import {MapValuesPipe} from '../pipes/pipes';
     @NgModule({
@@ Expand Down Expand Up @@
             DataCardComponent,
             DataTableComponent,
             DataGraphComponent,
+            DataMapComponent,
             MediaComponent,
             DeleteConfirmComponent,
             ExpandableTextComponent,
@@ Expand Down Expand Up @@
             AlgMetadataComponent,
             DoubleArgComponent,
             WindowArgComponent,
-            AutocompleteComponent
+            AutocompleteComponent,
+            MapValuesPipe
         ],
         exports: [
             BreadcrumbComponent,
@@ Expand All @@
             ReloadButtonComponent,
             DockerInstanceComponent,
             AlgViewerComponent,
+            DataMapComponent,
             JsonTextComponent,
-            AutocompleteComponent
+            AutocompleteComponent,
+            MapValuesPipe
         ]
     })
     export class ComponentsModule {
@@ Expand Down @@

src/app/components/data-view/data-map/data-map.component.html

-Original file line number
+Diff line change
@@ -0,0 +1,36 @@
+    <div [ngClass]="isInsideResults ? '' : 'map-margin' ">
+        <div class="map-container" [ngClass]="isInsideResults ? 'inside-results' : '' ">
+            <div id="map"></div>
+            <div *ngIf="this.loading()" class="map-overlay">
+                <div class="spinner-container">
+                    <c-spinner color="light">
+                        <span class="visually-hidden">{{ this.isLoadingMessage }}</span>
+                        <span class="visually-hidden">Loading...</span>
+                    </c-spinner>
+                    <span>{{ this.isLoadingMessage }}</span>
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+            <div class="map-overlay-buttons">
+                <button *ngIf="this.canRerenderLayers" (click)="this.layerSettings.rerenderButtonClicked()"
+                        class="shadow-lg" cButton color="primary">Refresh layers
+                </button>
+                <button *ngIf="isInsideResults" (click)="navigateToMapQueryMode()"
+                        class="shadow-lg" cButton color="primary">See full results in map-based query mode
+                </button>
+            </div>
+        </div>
+    </div>
+    <c-row class="row" *ngIf="$result()">
+        <c-col class="col-lg-12">
+            <nav aria-label="Page navigation" class="float-right" *ngIf="$result().highestPage > 1">
+                <c-pagination>
+                    <li cPageItem *ngFor="let p of pagination" [active]="p.active" [disabled]="p.disabled">
+                        <a cPageLink (click)="paginate(p)" [routerLink]="[]">{{ p.label }}</a>
+                    </li>
+                </c-pagination>
+            </nav>
+        </c-col>
+    </c-row>

src/app/components/data-view/data-map/data-map.component.scss

-Original file line number
+Diff line change
@@ -0,0 +1,62 @@
+    .map-container {
+      position: relative;
+      height: 100%;
+      border: 1px solid lightgray;
+    }
+    // Only for query mode, the results view already has a margin
+    .map-margin {
+      margin: 1rem 0;
+      height: calc(100% - 2rem);
+    }
+    .inside-results {
+      min-height: 600px;
+      padding: 0;
+    }
+    #map {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+    }
+    .map-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      pointer-events: none;
+      display: grid;
+      background: rgba(0, 0, 0, 0.1);
+      place-items: center;
+    }
+    .spinner-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      background: rgba(0, 0, 0, 0.25);
+      padding: 2rem;
+    }
+    .map-overlay-buttons {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      position: absolute;
+      z-index: 3;
+      bottom: 2rem;
+      right: 2rem;
+    }
+    .spinner-container > span {
+      font-size: 1.5rem;
+      font-weight: 400;
+      color: white;
+    }
+    .leaflet-overlay-pane > svg {
+      transition: opacity 50ms ease-in-out;
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the Map-Based Query Mode for Working with Spatial Data #103

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Add the Map-Based Query Mode for Working with Spatial Data #103

Are you sure you want to change the base?

Uh oh!

Add the Map-Based Query Mode for Working with Spatial Data #103

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!