geonetwork-ui 2.2.0-dev.c15a456d → 2.2.0-dev.c9f3c310

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.html

@@ -0,0 +1,55 @@
+<div class="flex items-center mb-5">
+  <gn-ui-text-input
+    [(value)]="wmsUrl"
+    (valueChange)="urlChange.next($event)"
+    [hint]="'map.wms.urlInput.hint' | translate"
+    class="w-96"
+  >
+  </gn-ui-text-input>
+</div>
+
+<div *ngIf="errorMessage" class="text-red-500 mt-2">
+  {{ errorMessage }}
+</div>
+
+<div *ngIf="loading">
+  <p class="loading-message" translate>map.loading.service</p>
+</div>
+
+<div *ngIf="!loading && layers.length > 0">
+  <h2 class="font-bold" translate>map.layers.available</h2>
+  <ng-container
+    *ngFor="let layer of layers"
+    [ngTemplateOutlet]="layerTreeItem"
+    [ngTemplateOutletContext]="{
+      layer: layer
+    }"
+  ></ng-container>
+</div>
+
+<ng-template #layerTreeItem let-layer="layer">
+  <div class="flex items-center justify-between layer-tree-item my-2">
+    <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
+      {{ layer.title }}
+    </p>
+    <gn-ui-button
+      *ngIf="layer.name"
+      class="layer-add-btn"
+      type="primary"
+      (buttonClick)="addLayer(layer)"
+      extraClass="text-sm !px-2 !py-1"
+      translate
+      ><span translate> map.layer.add </span></gn-ui-button
+    >
+  </div>
+  <div *ngIf="layer.children?.length > 0" class="ml-4">
+    <ng-container
+      *ngFor="let child of layer.children"
+      [ngTemplateOutlet]="layerTreeItem"
+      [ngTemplateOutletContext]="{
+        layer: child
+      }"
+    >
+    </ng-container>
+  </div>
+</ng-template>

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.ts

@@ -0,0 +1,63 @@
+import { Component, ChangeDetectorRef, OnInit } from '@angular/core'
+import { WmsEndpoint, WmsLayerSummary } from '@camptocamp/ogc-client'
+import { MapFacade } from '../+state/map.facade'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+} from '../map-context/map-context.model'
+import { Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-wms',
+  templateUrl: './add-layer-from-wms.component.html',
+  styleUrls: ['./add-layer-from-wms.component.css'],
+})
+export class AddLayerFromWmsComponent implements OnInit {
+  wmsUrl = ''
+  loading = false
+  layers: WmsLayerSummary[] = []
+  wmsEndpoint: WmsEndpoint | null = null
+  urlChange = new Subject<string>()
+  errorMessage: string | null = null
+
+  constructor(
+    private mapFacade: MapFacade,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    this.urlChange.pipe(debounceTime(700)).subscribe(() => this.loadLayers())
+  }
+
+  async loadLayers() {
+    this.errorMessage = null
+    try {
+      this.loading = true
+
+      if (this.wmsUrl.trim() === '') {
+        this.layers = []
+        return
+      }
+
+      this.wmsEndpoint = await new WmsEndpoint(this.wmsUrl).isReady()
+      this.layers = this.wmsEndpoint.getLayers()
+    } catch (error) {
+      const err = error as Error
+      this.layers = []
+      this.errorMessage = 'Error loading layers: ' + err.message
+    } finally {
+      this.loading = false
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
+  addLayer(layer: WmsLayerSummary) {
+    const layerToAdd: MapContextLayerModel = {
+      name: layer.name,
+      url: this.wmsUrl.toString(),
+      type: MapContextLayerTypeEnum.WMS,
+    }
+    this.mapFacade.addLayer({ ...layerToAdd, title: layer.title })
+  }
+}

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

@@ -1 +1,2 @@
 export * from './map-options'
+export * from './projections'

package/src/libs/feature/map/src/lib/feature-map.module.ts

@@ -20,6 +20,11 @@ import { MapContainerComponent } from './map-container/map-container.component'
 import { AddLayerRecordPreviewComponent } from './add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { AddLayerFromWmsComponent } from './add-layer-from-wms/add-layer-from-wms.component'
+import { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-file.component'
+import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wfs.component'
+import { GeocodingComponent } from './geocoding/geocoding.component'
+import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
 
 @NgModule({
   declarations: [
@@ -29,6 +34,10 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     AddLayerFromCatalogComponent,
     MapContainerComponent,
     AddLayerRecordPreviewComponent,
+    AddLayerFromWmsComponent,
+    AddLayerFromFileComponent,
+    AddLayerFromWfsComponent,
+    GeocodingComponent,
   ],
   exports: [
     MapContextComponent,
@@ -36,6 +45,7 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
     LayersPanelComponent,
     AddLayerFromCatalogComponent,
     MapContainerComponent,
+    GeocodingComponent,
   ],
   imports: [
     CommonModule,
@@ -56,6 +66,10 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
       useValue: defaultMapOptions,
     },
     MapFacade,
+    {
+      provide: GEOCODING_PROVIDER,
+      useValue: ['geonames', { maxRows: 5 }] as GeocodingProvider,
+    },
   ],
 })
 export class FeatureMapModule {}

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

@@ -0,0 +1,39 @@
+<gn-ui-search-input
+  [(value)]="searchText"
+  (valueChange)="onSearchChange($event)"
+  (keyup.enter)="onEnterPress()"
+  [placeholder]="'map.geocoding.placeholder' | translate"
+>
+</gn-ui-search-input>
+<ul
+  class="bg-gray-50 border border-gray-200 w-full mt-2 shadow-sm rounded-lg"
+  *ngIf="results && results.length"
+>
+  <li
+    *ngFor="let result of results"
+    (click)="zoomToLocation(result)"
+    class="flex items-center pl-8 pr-4 py-2 border-b border-gray-200 relative cursor-pointer hover:bg-blue-100 hover:text-gray-800 transition duration-300 ease-in-out"
+  >
+    <svg
+      class="stroke-current text-blue-500 absolute w-5 h-5 left-3 top-3"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+    <span class="font-sans font-semibold ml-4">{{ result.label }}</span>
+  </li>
+</ul>

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

@@ -0,0 +1,99 @@
+import { Component, OnDestroy } from '@angular/core'
+import { catchError, from, Subject, takeUntil } from 'rxjs'
+import { debounceTime, switchMap } from 'rxjs/operators'
+import { MapManagerService } from '../manager/map-manager.service'
+import { fromLonLat } from 'ol/proj'
+import { Polygon } from 'ol/geom'
+import { GeocodingService } from '../geocoding.service'
+
+@Component({
+  selector: 'gn-ui-geocoding',
+  templateUrl: './geocoding.component.html',
+  styleUrls: ['./geocoding.component.css'],
+})
+export class GeocodingComponent implements OnDestroy {
+  searchText = ''
+  results: any[] = []
+  searchTextChanged = new Subject<string>()
+  destroy$ = new Subject<void>()
+  errorMessage: string | null = null
+
+  constructor(
+    private mapManager: MapManagerService,
+    private geocodingService: GeocodingService
+  ) {
+    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
+  }
+
+  zoomToLocation(result: any) {
+    const map = this.mapManager.map
+    const view = map.getView()
+    const geometry = result.geom
+
+    if (geometry.type === 'Point') {
+      this.zoomToPoint(geometry.coordinates, view)
+    } else if (geometry.type === 'Polygon') {
+      this.zoomToPolygon(geometry.coordinates, view)
+    } else {
+      console.error(`Unsupported geometry type: ${geometry.type}`)
+    }
+  }
+
+  zoomToPoint(pointCoords: [number, number], view: any) {
+    const transformedCoords = fromLonLat(pointCoords)
+    view.setCenter(transformedCoords)
+    view.setZoom(12)
+  }
+
+  zoomToPolygon(polygonCoords: [[number, number][]], view: any) {
+    const transformedCoords = polygonCoords[0].map((coord) => fromLonLat(coord))
+    const polygon = new Polygon([transformedCoords])
+    view.fit(polygon, {
+      duration: 100,
+      maxZoom: 12,
+    })
+  }
+
+  onEnterPress() {
+    if (this.results && this.results.length > 0) {
+      this.zoomToLocation(this.results[0])
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import { Injectable, Inject, InjectionToken } 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 {
+  constructor(
+    @Inject(GEOCODING_PROVIDER) private provider: GeocodingProvider
+  ) {}
+
+  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/layers-panel/layers-panel.component.html

@@ -31,13 +31,19 @@
         </div>
       </mat-tab>
       <mat-tab [label]="'map.add.layer.wms' | translate" bodyClass="h-full">
-        <div class="p-3 h-full">Add from WMS</div>
+        <div class="p-3">
+          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>
+        </div>
       </mat-tab>
       <mat-tab [label]="'map.add.layer.wfs' | translate" bodyClass="h-full">
-        <div class="p-3 h-full">Add from WFS</div>
+        <div class="p-3">
+          <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>
+        </div>
       </mat-tab>
       <mat-tab [label]="'map.add.layer.file' | translate" bodyClass="h-full">
-        <div class="p-3 h-full">Add from file</div>
+        <div class="p-3">
+          <gn-ui-add-layer-from-file></gn-ui-add-layer-from-file>
+        </div>
       </mat-tab>
     </mat-tab-group>
   </gn-ui-expandable-panel-button>

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

@@ -40,6 +40,8 @@ export const DEFAULT_VIEW: MapContextViewModel = {
   zoom: 2,
 }
 
+export const WFS_MAX_FEATURES = 10000
+
 @Injectable({
   providedIn: 'root',
 })
@@ -56,6 +58,8 @@ export class MapContextService {
   ): Map {
     if (mapConfig) {
       mapContext = this.mergeMapConfigWithContext(mapContext, mapConfig)
+    } else {
+      mapContext.layers = this.addDefaultBaselayerContext(mapContext.layers)
     }
     if (
       !mapContext.view?.extent &&
@@ -111,6 +115,10 @@ export class MapContextService {
               urlObj.searchParams.set('typename', layerModel.name)
               urlObj.searchParams.set('srsname', 'EPSG:3857')
               urlObj.searchParams.set('bbox', `${extent.join(',')},EPSG:3857`)
+              urlObj.searchParams.set(
+                'maxFeatures',
+                WFS_MAX_FEATURES.toString()
+              )
               return urlObj.toString()
             },
             strategy: bboxStrategy,
@@ -173,6 +181,14 @@ export class MapContextService {
     return view
   }
 
+  addDefaultBaselayerContext(
+    layers: MapContextLayerModel[]
+  ): MapContextLayerModel[] {
+    return layers.includes(DEFAULT_BASELAYER_CONTEXT)
+      ? layers
+      : [DEFAULT_BASELAYER_CONTEXT, ...layers]
+  }
+
   mergeMapConfigWithContext(
     mapContext: MapContextModel,
     mapConfig: MapConfig

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

@@ -1,3 +1 @@
 export * from './map-utils.service'
-export * from './map-utils-wms.service'
-export * from './projections'

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

@@ -2,18 +2,18 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import type { FeatureCollection } from 'geojson'
 import { extend, Extent, isEmpty } from 'ol/extent'
-import OlFeature, { FeatureLike } from 'ol/Feature'
+import Feature from 'ol/Feature'
 import GeoJSON from 'ol/format/GeoJSON'
 import { Geometry } from 'ol/geom'
 import Layer from 'ol/layer/Layer'
 import Map from 'ol/Map'
-import { fromLonLat } from 'ol/proj'
+import { transformExtent } from 'ol/proj'
 import Source from 'ol/source/Source'
 import ImageWMS from 'ol/source/ImageWMS'
 import TileWMS from 'ol/source/TileWMS'
 import VectorSource from 'ol/source/Vector'
-import { Options, optionsFromCapabilities } from 'ol/source/WMTS'
-import { DragPan, MouseWheelZoom, defaults, Interaction } from 'ol/interaction'
+import { optionsFromCapabilities } from 'ol/source/WMTS'
+import { defaults, DragPan, Interaction, MouseWheelZoom } from 'ol/interaction'
 import {
   mouseOnly,
   noModifierKeys,
@@ -21,45 +21,53 @@ import {
   primaryAction,
 } from 'ol/events/condition'
 import WMTSCapabilities from 'ol/format/WMTSCapabilities'
-import { from, Observable, of } from 'rxjs'
+import { from, Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import {
   MapContextLayerModel,
   MapContextLayerTypeEnum,
+  MapContextLayerWmsModel,
   MapContextLayerWmtsModel,
 } from '../map-context/map-context.model'
-import { MapUtilsWMSService } from './map-utils-wms.service'
 import Collection from 'ol/Collection'
 import MapBrowserEvent from 'ol/MapBrowserEvent'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  DatasetDistribution,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ProxyService } from '../../../../../../libs/util/shared/src'
+import { WmsEndpoint } from '@camptocamp/ogc-client'
+import { LONLAT_CRS_CODES } from '../constant/projections'
+import { fromEPSGCode, register } from 'ol/proj/proj4'
+import proj4 from 'proj4/dist/proj4'
 
 const FEATURE_PROJECTION = 'EPSG:3857'
 const DATA_PROJECTION = 'EPSG:4326'
 
+const GEOJSON = new GeoJSON()
+
 @Injectable({
   providedIn: 'root',
 })
 export class MapUtilsService {
-  constructor(private http: HttpClient, private wmsUtils: MapUtilsWMSService) {}
+  constructor(private http: HttpClient, private proxy: ProxyService) {}
 
   createEmptyMap(): Map {
-    const map = new Map({
+    return new Map({
       controls: [],
       pixelRatio: 1,
     })
-    return map
   }
 
   readFeatureCollection = (
     featureCollection: FeatureCollection,
     featureProjection = FEATURE_PROJECTION,
     dataProjection = DATA_PROJECTION
-  ): FeatureLike[] => {
-    const olFeatures = new GeoJSON().readFeatures(featureCollection, {
+  ): Feature<Geometry>[] => {
+    return GEOJSON.readFeatures(featureCollection, {
       featureProjection,
       dataProjection,
-    })
-    return olFeatures
+    }) as Feature<Geometry>[]
   }
 
   isWMSLayer(layer: Layer<Source>): boolean {
@@ -78,20 +86,14 @@ export class MapUtilsService {
       ...source.getParams(),
       INFO_FORMAT: 'application/json',
     }
-    const url = source.getFeatureInfoUrl(
-      coordinate,
-      resolution,
-      projection,
-      params
-    )
-    return url
+    return source.getFeatureInfoUrl(coordinate, resolution, projection, params)
   }
 
-  getVectorFeaturesFromClick(olMap, event): OlFeature<Geometry>[] {
+  getVectorFeaturesFromClick(olMap, event): Feature<Geometry>[] {
     const features = []
     const hit = olMap.forEachFeatureAtPixel(
       event.pixel,
-      (feature: OlFeature<Geometry>) => {
+      (feature: Feature<Geometry>) => {
         return feature
       },
       { layerFilter: (layer) => layer.getSource() instanceof VectorSource }
@@ -103,9 +105,9 @@ export class MapUtilsService {
   }
 
   getGFIFeaturesObservablesFromClick(
-    olMap,
-    event
-  ): Observable<OlFeature<Geometry>[]>[] {
+    olMap: Map,
+    event: MapBrowserEvent<PointerEvent>
+  ): Observable<Feature<Geometry>[]>[] {
     const wmsLayers = olMap.getLayers().getArray().filter(this.isWMSLayer)
 
     if (wmsLayers.length > 0) {
@@ -128,8 +130,8 @@ export class MapUtilsService {
   /**
    * Will emit `null` if no extent could be computed
    */
-  getLayerExtent(layer: MapContextLayerModel): Observable<Extent | null> {
-    let geographicExtent: Observable<Extent>
+  async getLayerExtent(layer: MapContextLayerModel): Promise<Extent | null> {
+    let latLonExtent: Extent
     if (
       layer &&
       layer.type === 'geojson' &&
@@ -138,37 +140,55 @@ export class MapUtilsService {
       layer.data.features[0] &&
       layer.data.features[0].geometry
     ) {
-      geographicExtent = of(layer.data).pipe(
-        map((layerData) =>
-          new GeoJSON()
-            .readFeatures(layerData)
-            .map((feature) => feature.getGeometry())
-            .filter((geom) => !!geom)
-            .reduce(
-              (prev, curr) =>
-                prev ? extend(prev, curr.getExtent()) : curr.getExtent(),
-              null as Extent
-            )
+      latLonExtent = new GeoJSON()
+        .readFeatures(layer.data)
+        .map((feature) => feature.getGeometry())
+        .filter((geom) => !!geom)
+        .reduce(
+          (prev, curr) =>
+            prev ? extend(prev, curr.getExtent()) : curr.getExtent(),
+          null as Extent
         )
-      )
     } else if (layer && layer.type === 'wms') {
-      geographicExtent = this.wmsUtils.getLayerLonLatBBox(layer)
+      latLonExtent = await this.getWmsLayerExtent(layer)
     } else if (layer && layer.type === 'wmts') {
       if (layer.extent) {
-        geographicExtent = of(layer.extent)
+        latLonExtent = layer.extent
       } else {
-        return of(layer.options.tileGrid.getExtent())
+        return layer.options.tileGrid.getExtent()
       }
     } else {
-      return of(null)
+      return null
+    }
+    if (!latLonExtent || isEmpty(latLonExtent)) {
+      return null
     }
-    return geographicExtent.pipe(
-      map((extent) => [
-        ...fromLonLat([extent[0], extent[1]], 'EPSG:3857'),
-        ...fromLonLat([extent[2], extent[3]], 'EPSG:3857'),
-      ]),
-      map((extent) => (isEmpty(extent) ? null : extent))
+    return transformExtent(latLonExtent, 'EPSG:4326', 'EPSG:3857')
+  }
+
+  async getWmsLayerExtent(
+    layer: MapContextLayerWmsModel
+  ): Promise<Extent | null> {
+    const endpoint = await new WmsEndpoint(
+      this.proxy.getProxiedUrl(layer.url)
+    ).isReady()
+    const { boundingBoxes } = endpoint.getLayerByName(layer.name)
+    if (!Object.keys(boundingBoxes).length) {
+      return null
+    }
+    const lonLatCRS = Object.keys(boundingBoxes)?.find((crs) =>
+      LONLAT_CRS_CODES.includes(crs)
     )
+    if (lonLatCRS) {
+      return boundingBoxes[lonLatCRS].map(parseFloat)
+    } else {
+      const availableEPSGCode = Object.keys(boundingBoxes)[0]
+      register(proj4)
+      const proj = await fromEPSGCode(availableEPSGCode)
+      const bboxWithFiniteNumbers =
+        boundingBoxes[availableEPSGCode].map(parseFloat)
+      return transformExtent(bboxWithFiniteNumbers, proj, 'EPSG:4326')
+    }
   }
 
   getWmtsLayerFromCapabilities(
@@ -235,6 +255,21 @@ ${e.stack || e.message || e}`)
         .getArray()
     )
   }
+
+  getRecordExtent(record: Partial<CatalogRecord>): Extent {
+    if (!('spatialExtents' in record)) {
+      return null
+    }
+    // transform an array of geojson geometries into a bbox
+    const totalExtent = record.spatialExtents.reduce(
+      (prev, curr) => {
+        const geom = GEOJSON.readGeometry(curr.geometry)
+        return extend(prev, geom.getExtent())
+      },
+      [Infinity, Infinity, -Infinity, -Infinity]
+    )
+    return transformExtent(totalExtent, 'EPSG:4326', 'EPSG:3857')
+  }
 }
 
 export function dragPanCondition(