geonetwork-ui 2.11.0-dev.68d9eaa3a → 2.11.0-dev.7f3cfba04

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.ts

@@ -1,112 +0,0 @@
-import { Component, OnDestroy, inject } from '@angular/core'
-import { catchError, firstValueFrom, from, Subject, takeUntil } from 'rxjs'
-import { debounceTime, switchMap } from 'rxjs/operators'
-import { GeocodingService } from '../geocoding.service'
-import { MapFacade } from '../+state/map.facade'
-
-import { SearchInputComponent } from '../../../../../../libs/ui/inputs/src'
-import { TranslatePipe } from '@ngx-translate/core'
-import { MapContextView } from '@geospatial-sdk/core'
-
-@Component({
-  selector: 'gn-ui-geocoding',
-  templateUrl: './geocoding.component.html',
-  styleUrls: ['./geocoding.component.css'],
-  standalone: true,
-  imports: [SearchInputComponent, TranslatePipe],
-})
-export class GeocodingComponent implements OnDestroy {
-  private mapFacade = inject(MapFacade)
-  private geocodingService = inject(GeocodingService)
-
-  searchText = ''
-  results: any[] = []
-  searchTextChanged = new Subject<string>()
-  destroy$ = new Subject<void>()
-  errorMessage: string | null = null
-
-  constructor() {
-    this.searchTextChanged
-      .pipe(
-        debounceTime(300),
-        switchMap((searchText) => {
-          return from(this.geocodingService.query(searchText)).pipe(
-            catchError((error) => {
-              this.errorMessage =
-                'An error occurred while searching. Please try again.'
-              console.error(error)
-              return []
-            })
-          )
-        }),
-        takeUntil(this.destroy$)
-      )
-      .subscribe((results) => {
-        this.results = results
-      })
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next()
-    this.destroy$.complete()
-  }
-
-  onSearchChange(searchText: string) {
-    if (!searchText) {
-      this.clearSearch()
-      return
-    } else {
-      this.searchTextChanged.next(searchText)
-    }
-  }
-
-  clearSearch() {
-    this.searchText = ''
-    this.results = []
-    this.errorMessage = null
-  }
-
-  async zoomToLocation(result: any) {
-    const geometry = result.geom
-
-    if (geometry.type === 'Point') {
-      await this.zoomToPoint(geometry.coordinates)
-    } else if (geometry.type === 'Polygon') {
-      await this.zoomToPolygon(geometry.coordinates)
-    } else {
-      console.error(`Unsupported geometry type: ${geometry.type}`)
-    }
-  }
-
-  async zoomToPoint(pointCoords: [number, number]) {
-    const context = await firstValueFrom(this.mapFacade.context$)
-    const view: MapContextView = {
-      center: pointCoords,
-      zoom: 10,
-    }
-    this.mapFacade.applyContext({
-      ...context,
-      view,
-    })
-  }
-
-  async zoomToPolygon(polygonCoords: [[number, number][]]) {
-    const context = await firstValueFrom(this.mapFacade.context$)
-    const view: MapContextView = {
-      geometry: {
-        type: 'Polygon',
-        coordinates: polygonCoords,
-      },
-    }
-    this.mapFacade.applyContext({
-      ...context,
-      view,
-    })
-  }
-
-  onEnterPress() {
-    if (this.results && this.results.length > 0) {
-      this.zoomToLocation(this.results[0])
-    }
-  }
-}

package/src/libs/feature/map/src/lib/geocoding.service.ts

@@ -1,57 +0,0 @@
-import { Injectable, InjectionToken, inject } from '@angular/core'
-import {
-  queryGeoadmin,
-  GeoadminOptions,
-  GeocodingResult,
-  queryGeonames,
-  GeonamesOptions,
-  DataGouvFrOptions,
-  queryDataGouvFr,
-} from '@geospatial-sdk/geocoding'
-import { from, Observable, throwError } from 'rxjs'
-import { catchError } from 'rxjs/operators'
-
-type GeoadminGeocodingProvider = ['geoadmin', GeoadminOptions]
-type GeonamesGeocodingProvider = ['geonames', GeonamesOptions]
-type DataGouvFrGeocodingProvider = ['data-gouv-fr', DataGouvFrOptions]
-export type GeocodingProvider =
-  | GeoadminGeocodingProvider
-  | GeonamesGeocodingProvider
-  | DataGouvFrGeocodingProvider
-
-export const GEOCODING_PROVIDER = new InjectionToken<GeocodingProvider>(
-  'geocoding-provider'
-)
-
-@Injectable({
-  providedIn: 'root',
-})
-export class GeocodingService {
-  private provider = inject<GeocodingProvider>(GEOCODING_PROVIDER)
-
-  query(text: string): Observable<GeocodingResult[]> {
-    let queryObservable: Observable<GeocodingResult[]>
-    switch (this.provider[0]) {
-      case 'geoadmin':
-        queryObservable = from(
-          queryGeoadmin(text, this.provider[1] as GeoadminOptions)
-        )
-        break
-      case 'geonames':
-        queryObservable = from(
-          queryGeonames(text, this.provider[1] as GeonamesOptions)
-        )
-        break
-      case 'data-gouv-fr':
-        queryObservable = from(
-          queryDataGouvFr(text, this.provider[1] as DataGouvFrOptions)
-        )
-        break
-      default:
-        return throwError(
-          () => new Error(`Unsupported geocoding provider: ${this.provider[0]}`)
-        )
-    }
-    return queryObservable.pipe(catchError((error) => throwError(error)))
-  }
-}

package/src/libs/feature/map/src/lib/style/index.ts

@@ -1,2 +0,0 @@
-export * from './map-style.service'
-export * from './map-style.fixtures'

package/src/libs/feature/map/src/lib/style/map-style.fixtures.ts

@@ -1,47 +0,0 @@
-import { Circle, Fill, Stroke, Style } from 'ol/style.js'
-
-const colorPrimary = 'blue'
-const colorSecondary = 'red'
-const colorStroke = 'white'
-
-export const defaultMapStyleFixture = (): Style =>
-  new Style({
-    image: new Circle({
-      fill: new Fill({
-        color: colorPrimary,
-      }),
-      stroke: new Stroke({
-        color: colorStroke,
-        width: 2,
-      }),
-      radius: 5,
-    }),
-    fill: new Fill({
-      color: 'rgba(0,0,255,0.25)',
-    }),
-    stroke: new Stroke({
-      color: colorStroke,
-      width: 2,
-    }),
-  })
-
-export const defaultMapStyleHlFixture = (): Style =>
-  new Style({
-    image: new Circle({
-      fill: new Fill({
-        color: colorSecondary,
-      }),
-      stroke: new Stroke({
-        color: colorStroke,
-        width: 3,
-      }),
-      radius: 6,
-    }),
-    fill: new Fill({
-      color: 'rgba(255,0,0,0.25)',
-    }),
-    stroke: new Stroke({
-      color: colorSecondary,
-      width: 3,
-    }),
-  })

package/src/libs/feature/map/src/lib/style/map-style.service.ts

@@ -1,108 +0,0 @@
-import { Injectable } from '@angular/core'
-import { getThemeConfig, isConfigLoaded } from '../../../../../../libs/util/app-config/src'
-import chroma from 'chroma-js'
-import Feature from 'ol/Feature.js'
-import { Fill, Stroke, Style } from 'ol/style.js'
-import CircleStyle from 'ol/style/Circle.js'
-import { StyleLike } from 'ol/style/Style.js'
-
-export interface CreateStyleOptions {
-  color: string
-  isFocused?: boolean
-}
-
-export type StyleByGeometryType = {
-  line: Style | Style[]
-  polygon: Style | Style[]
-  point: Style | Style[]
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class MapStyleService {
-  styles = {
-    default: this.createStyleFunction(
-      this.createGeometryStyles({
-        color: isConfigLoaded() ? getThemeConfig().PRIMARY_COLOR : 'blue',
-      })
-    ),
-    defaultHL: this.createStyleFunction(
-      this.createGeometryStyles({
-        color: isConfigLoaded() ? getThemeConfig().SECONDARY_COLOR : 'red',
-        isFocused: true,
-      })
-    ),
-  }
-
-  createGeometryStyles(options: CreateStyleOptions): StyleByGeometryType {
-    const { color, isFocused } = options
-    const zIndex = isFocused ? 10 : undefined
-    return {
-      polygon: new Style({
-        fill: new Fill({
-          color: this.computeTransparentFillColor(color),
-        }),
-        stroke: new Stroke({
-          color: 'white',
-          width: 2,
-        }),
-        zIndex,
-      }),
-      point: new Style({
-        image: new CircleStyle({
-          fill: new Fill({
-            color,
-          }),
-          stroke: new Stroke({
-            color: 'white',
-            width: isFocused ? 3 : 2,
-          }),
-          radius: isFocused ? 8 : 7,
-        }),
-        zIndex,
-      }),
-      line: [
-        new Style({
-          stroke: new Stroke({
-            color: 'white',
-            width: isFocused ? 8 : 6,
-          }),
-          zIndex,
-        }),
-        new Style({
-          stroke: new Stroke({
-            color,
-            width: isFocused ? 3 : 2,
-          }),
-          zIndex,
-        }),
-      ],
-    }
-  }
-
-  createStyleFunction(styleByGeometryType: StyleByGeometryType): StyleLike {
-    return (feature: Feature): Style | Style[] => {
-      const geometryType = feature?.getGeometry()?.getType()
-      switch (geometryType) {
-        case 'LinearRing':
-        case 'LineString':
-        case 'MultiLineString':
-          return styleByGeometryType.line
-        case 'Point':
-        case 'MultiPoint':
-          return styleByGeometryType.point
-        case 'Circle':
-        case 'Polygon':
-        case 'MultiPolygon':
-          return styleByGeometryType.polygon
-        default:
-          return styleByGeometryType.point
-      }
-    }
-  }
-
-  private computeTransparentFillColor(color: string, alpha = 0.25): string {
-    return chroma(color).alpha(alpha).css()
-  }
-}