ajout zoom sur Indre, Hautes-Alpes et Nord via url parameter

angular.json

@@ -37,6 +37,16 @@
                 "glob": "system.svg",
                 "input": "./node_modules/@gouvfr/dsfr/dist/artwork/pictograms/system",
                 "output": "artwork/pictograms/system"
+              },
+              {
+                "glob": "technical-error.svg",
+                "input": "./node_modules/@gouvfr/dsfr/dist/artwork/pictograms/system",
+                "output": "artwork/pictograms/system"
+              },
+              {
+                "glob": "ovoid.svg",
+                "input": "./node_modules/@gouvfr/dsfr/dist/artwork/background",
+                "output": "artwork/background"
               }
             ],
             "styles": [

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@edugouvfr/ngx-dsfr": "^1.12.6",
     "@gouvfr/dsfr": "^1.11.0",
-    "geopf-extensions-openlayers": "./lib/geopf-extensions-openlayers-1.0.0-beta.0-292.tgz",
+    "geopf-extensions-openlayers": "./lib/geopf-extensions-openlayers-1.0.0-beta.1-296.tgz",
     "geoportal-access-lib": "^3.4.4",
     "ol": "^9.1.0"
   },

src/app/app.config.ts

@@ -1,8 +1,12 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideHttpClient } from "@angular/common/http";
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [
+    provideRouter(routes),
+    provideHttpClient()
+  ],
 };

src/app/app.routes.guard.ts

@@ -0,0 +1,17 @@
+import { inject } from "@angular/core";
+import { Router, ActivatedRouteSnapshot, UrlTree, CanActivateFn } from "@angular/router";
+
+export function AllowedLocation(allowedEntities: string[]): CanActivateFn {
+    return (route: ActivatedRouteSnapshot): boolean | UrlTree => {
+      const router: Router = inject(Router);
+      const entitiesType: string | null = route.paramMap.get(
+        'location'
+      );
+
+      if(entitiesType){
+        return allowedEntities.indexOf(entitiesType.toLocaleLowerCase()) !== -1 ? true : router.parseUrl('/');
+      }else{
+        return false;
+      }
+    };
+}

src/app/app.routes.ts

@@ -1,6 +1,14 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { NotfoundComponent } from './pages/errors/notfound/notfound.component';
+import { AllowedLocation } from './app.routes.guard';
 
 export const routes: Routes = [ 
   { path: '', component: HomeComponent },
+  { path: ':location', 
+    component: HomeComponent, 
+    canActivate: [AllowedLocation(['indre', 'hautes-alpes', 'nord'])]
+  },
+  //Wild Card Route for any 404 request 
+  { path: '**', pathMatch: 'full', component: NotfoundComponent }, 
 ];

src/app/carte/carte.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, ElementRef } from '@angular/core';
 
 import Map from 'ol/Map';
-import { LayerWMS as GeoportalLayerWMS, LayerWMTS as GeoportalLayerWMTS,} from "geopf-extensions-openlayers/src";
+import { LayerWMS as GeoportalLayerWMS, LayerWMTS as GeoportalLayerWMTS, LayerWFS as GeoportalLayerWFS} from "geopf-extensions-openlayers/src";
 
 @Component({
   selector: 'app-carte',
@@ -18,17 +18,17 @@ export class CarteComponent implements OnInit {
   ngOnInit() {
     this.map.setLayers([
       new GeoportalLayerWMS({
-        apikey:"full",
         layer: "ORTHOIMAGERY.ORTHOPHOTOS",
       }),
       new GeoportalLayerWMS({
-        apikey:"full",
         layer: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
       }),
       new GeoportalLayerWMTS({
-        apikey:"full",
         layer: "LIMITES_ADMINISTRATIVES_EXPRESS.LATEST",
       }),
+      new GeoportalLayerWFS({
+        layer: "poc_v5_carto_sp_interne_sans_z_gpkg_13-12-2024_wfs:carto_sp_interne",
+      })
     ]);
 
     this.map.setTarget(this.elementRef.nativeElement);

src/app/controls/layerselector/layerselector.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayerselectorComponent } from './layerselector.component';
+
+describe('LayerselectorComponent', () => {
+  let component: LayerselectorComponent;
+  let fixture: ComponentFixture<LayerselectorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LayerselectorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LayerselectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/controls/layerselector/layerselector.component.ts

@@ -0,0 +1,150 @@
+import { Component, OnInit, Input, ElementRef } from '@angular/core';
+
+import Map from 'ol/Map';
+import Control from 'ol/control/Control';
+
+@Component({
+  selector: 'app-layerselector',
+  standalone: true,
+  imports: [],
+  template: '',
+  styles: [],
+})
+export class LayerselectorComponent implements OnInit {
+  @Input() map!: Map;
+  control!: Control;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit() {
+    this.control = new LayerSelectorControl({ target : this.elementRef.nativeElement, position: 'bottom-left' });
+    this.map.addControl(this.control);
+  }
+
+}
+
+class LayerSelectorControl extends Control {
+  /**
+   * @param {Object} [opt_options] Control options.
+   */
+  // @ts-ignore
+  constructor(opt_options) {
+    const options = opt_options || {};
+
+    // Button
+    const button = document.createElement('button');
+    button.classList.add("GPshowOpen", "GPshowAdvancedToolPicto", "gpf-btn-icon-isocurve", "fr-btn", "fr-btn--tertiary", "gpf-btn--tertiary", "gpf-btn", "gpf-btn-icon");
+    button.setAttribute("aria-pressed", "false");
+    button.setAttribute("type", "button");
+    button.removeAttribute("title");
+    button.setAttribute("tabindex", "0");
+    button.setAttribute("aria-label", 'Sélectionner une couche');
+    button.style.float = 'left';
+
+    // tool element container
+    const element = document.createElement('div');
+    element.id = "GPLayerSelector";
+    element.classList.add("GPwidget", "gpf-widget", "gpf-widget-button");
+    element.classList.remove("ol-unselectable", "ol-control");
+    element.style.inset = 'unset';
+    element.style.position = 'unset';
+    element.appendChild(button);
+
+    const element2 = document.createElement('div');
+    element2.id = "menu-layer-selector";
+    element2.innerHTML = "voici mon message";
+    element2.style.backgroundColor = 'white';
+    element2.style.width = '150px';
+    element2.style.position = 'relative';
+    element2.style.left = '50px';
+    element2.style.bottom = '5px';
+    element2.style.visibility = 'hidden';
+    element.appendChild(element2);
+
+    // set element to target
+    if (options.position) {
+      var id = "position-container-" + options.position;
+      if (!document.getElementById(id)) {
+          // Creation manuelle du container de position
+          var div = document.createElement("div");
+          div.id = id;
+          div.classList.add("position");
+          div.classList.add(id);
+          element.appendChild(div);   
+      }
+      // @ts-ignore
+      options.target = document.getElementById(id)?.appendChild(element);      
+    }
+
+    super({
+      element: element,
+      target: options.target,
+    });
+
+    button.addEventListener('click', this.showSelector.bind(this), false);
+  }
+
+  showSelector(e: any) {
+    var status = (e.target.ariaPressed === "true");
+    e.target.setAttribute("aria-pressed", !status);
+
+    e.target.parentNode.querySelector('#menu-layer-selector').style.visibility = "visible";
+    // @ts-ignore
+    this.getMap().getView().setZoom(2);
+  }
+}
+
+// html
+/*<div class="cc-selector">
+	<input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
+	<label class="drinkcard-cc visa" for="visa"></label>
+	<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
+	<label class="drinkcard-cc mastercard"for="mastercard"></label>
+</div>
+
+
+// css    
+.cc-selector input{
+	margin:0;padding:0;
+	-webkit-appearance:none;
+	-moz-appearance:none;
+	appearance:none;
+}
+
+
+.image1{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
+.image2{background-image:url(http://i.imgur.com/SJbRQF7.png);}
+
+.cc-selector input:active +.drinkcard-cc{opacity: .9;}
+.cc-selector input:checked +.drinkcard-cc{
+    -webkit-filter: none;
+       -moz-filter: none;
+            filter: none;
+}
+.drinkcard-cc{
+    cursor:pointer;
+    background-size:contain;
+    background-repeat:no-repeat;
+    display:inline-block;
+    width:100px;height:70px;
+    -webkit-transition: all 100ms ease-in;
+       -moz-transition: all 100ms ease-in;
+            transition: all 100ms ease-in;
+    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
+       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
+            filter: brightness(1.8) grayscale(1) opacity(.7);
+}
+.drinkcard-cc:hover{
+    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
+       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
+            filter: brightness(1.2) grayscale(.5) opacity(.9);
+}
+
+// Extras 
+a:visited{color:#888}
+a{color:#444;text-decoration:none;}
+p{margin-bottom:.3em;}
+* { font-family:monospace; }
+.cc-selector-2 input{ margin: 5px 0 0 12px; }
+.cc-selector-2 label{ margin-left: 7px; }
+span.cc{ color:#6d84b4 }*/

src/app/controls/scaleline/scaleline.component.ts

@@ -8,7 +8,7 @@ import ScaleLine from 'ol/control/ScaleLine';
   selector: 'app-scaleline',
   standalone: true,
   template: '',
-  styles: ['::ng-deep .ol-scale-line{left: 50px;}']
+  styles: ['::ng-deep .ol-scale-line{left: 60px;}']
 })
 export class ScalelineComponent implements OnInit {
   @Input() map!: Map;

src/app/controls/search/search.component.ts

@@ -1,8 +1,14 @@
 import { Component, OnInit, Input, ElementRef } from '@angular/core';
 
 import Map from 'ol/Map';
+import Geometry from 'ol/geom/Geometry';
+import GeoJSON from 'ol/format/GeoJSON';
 import Control from 'ol/control/Control';
 import { SearchEngine } from "geopf-extensions-openlayers/src";
+// @ts-ignore
+import Gp from 'geoportal-access-lib';
+import { Extent } from 'ol/extent';
+import { SimpleGeometry } from 'ol/geom';
 
 @Component({
   selector: 'app-search',
@@ -20,11 +26,13 @@ export class SearchComponent implements OnInit {
     this.control = new SearchEngine({
       displayButtonClose: false,
       displayButtonAdvancedSearch: false,
+      collapsible: true,
       splitResults: false,
+      markerStyle: 'turquoiseBlue',
       zoomTo: 'auto',
       target: this.elementRef.nativeElement,
     });
-
+   
     this.map.addControl(this.control);
   }
 }