Merge pull request #44 from IGNF/12-sélectionner-un-sp-et-visualiser-…

…ses-informations

12 sélectionner un sp et visualiser ses informations

.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+/src/assets/customConfig-dev.json

src/app/app.component.ts

@@ -1,8 +1,7 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
-import { DsfrHeaderModule } from '@edugouvfr/ngx-dsfr';
-import { DsfrFooterModule } from '@edugouvfr/ngx-dsfr';
+import { DsfrHeaderModule, DsfrFooterModule } from '@edugouvfr/ngx-dsfr';
 
 @Component({
   selector: 'app-root',

src/app/carte/carte.component.ts

@@ -27,7 +27,7 @@ export class CarteComponent implements OnInit {
         layer: "LIMITES_ADMINISTRATIVES_EXPRESS.LATEST",
       }),
       new GeoportalLayerWFS({
-        layer: "mvp_carto20241219_bis_gpkg_20-12-2024_wfs:mvp_carto20241219_bis",
+        layer: "services_publics_test_20250116_v2:carto_sp_interne",
         olParams : {
           minZoom: 10,
           style: function(feature: Feature){

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

@@ -1,20 +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',
   standalone: true,
   template: '',
-  styles: ['::ng-deep [id^="GPsearchEngine-"], ::ng-deep .GPsearchRadioContainer{right: 0px !important;top: 190px;left: unset !important;}']
+  styles: ['::ng-deep .gpf-widget { position: unset;} ::ng-deep div[id^="GPautoCompleteList"] { margin-left: 26px; top: 60px;}']
 })
 export class SearchComponent implements OnInit {
   @Input() map!: Map;

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

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

src/app/controls/spselector/spselector.component.ts

@@ -0,0 +1,74 @@
+import { Component, Input, ElementRef, OnInit } from '@angular/core';
+
+import Map from 'ol/Map';
+import Style, { StyleLike } from 'ol/style/Style';
+import Icon from 'ol/style/Icon';
+
+import {Select} from 'ol/interaction';
+import { Feature } from 'ol';
+
+import { RightpanelService } from '../../rightpanel/rightpanel.service';
+import { DefaultComponent } from '../../rightpanel/content/default/default.component';
+import { ServicePublicComponent } from '../../rightpanel/content/service-public/service-public.component';
+
+
+@Component({
+  selector: 'app-spselector',
+  standalone: true,
+  imports: [],
+  template: '',
+})
+export class SpselectorComponent implements OnInit {
+  @Input() map!: Map;
+  control!: Select;
+
+  constructor(private elementRef: ElementRef, private rightpanelService: RightpanelService) {}
+
+  ngOnInit() {
+    var oldfeature: Feature;
+    var oldstyle: StyleLike | undefined;
+
+    // marker style select
+    var selectStyle = new Style({
+      image: new Icon({
+        anchor: [0.5, 37],
+        anchorXUnits: 'fraction',
+        anchorYUnits: 'pixels',
+        src: 'assets/images/mapmarker/pin.svg',
+      })
+    });
+
+    var splayer = this.map.getAllLayers()[2];
+
+    this.map.on('click', evt => {
+      let features = this.map.getFeaturesAtPixel(evt.pixel, {
+          layerFilter: (layer) => {
+              return splayer == layer;
+          },
+      });
+
+      if(features[0]){
+        var newfeature = features[0] as Feature;
+
+        // restore old style
+        if(oldfeature){
+          oldfeature.setStyle(oldstyle);
+        }
+
+        // saving old feature
+        oldfeature = newfeature;
+        oldstyle = oldfeature.getStyle();
+
+        newfeature.setStyle(selectStyle);
+        if(this.rightpanelService.isExpanded !== true ){
+          this.rightpanelService.toggleRightpanel();
+        }
+        this.rightpanelService.setContent(ServicePublicComponent, newfeature.getProperties());
+      }else{
+        if(oldfeature){
+          oldfeature.setStyle(oldstyle);
+        }
+      }
+    });
+  }
+}

src/app/controls/spwfsfilter/spwfsfilter.component.ts

@@ -30,6 +30,14 @@ export class SpwfsfilterComponent implements OnInit {
           src: 'assets/images/mapmarker/administrations-locales/implantation.svg',
         })
       }),
+      "Association, culture, jeunesse": new Style({
+        image: new Icon({
+          anchor: [0.5, 37],
+          anchorXUnits: 'fraction',
+          anchorYUnits: 'pixels',
+          src: 'assets/images/mapmarker/association-culture-jeunesse/implantation.svg',
+        })
+      }),
       "Droit, justice": new Style({
         image: new Icon({
           anchor: [0.5, 37],
@@ -51,40 +59,38 @@ export class SpwfsfilterComponent implements OnInit {
           anchor: [0.5, 37],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
-          src: 'assets/images/mapmarker/droit-justice/implantation.svg',
+          src: 'assets/images/mapmarker/enseignement-recherche/implantation.svg',
         })
       }),
-      "Social, santé" : new Style({
+      "Environnement, logement, transports": new Style({
         image: new Icon({
           anchor: [0.5, 37],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
-          src: 'assets/images/mapmarker/social-sante/implantation.svg',
+          src: 'assets/images/mapmarker/environnement/implantation.svg',
         })
       }),
-
-      "Travail, emploi, formation": new Style({
+      "Social, santé" : new Style({
         image: new Icon({
           anchor: [0.5, 37],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
-          src: 'assets/images/mapmarker/emploi-formation/implantation.svg',
+          src: 'assets/images/mapmarker/social-sante/implantation.svg',
         })
       }),
-
-      "Environnement, logement, transports": new Style({
+      "Travail, emploi, formation": new Style({
         image: new Icon({
           anchor: [0.5, 37],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
-          src: 'assets/images/mapmarker/environnement/implantation.svg',
+          src: 'assets/images/mapmarker/emploi-formation/implantation.svg',
         })
       })
     } as any;
 
     this.control = new WfsFilter({
       position: "top-left",
-      cartospLayerName: "mvp_carto20241219_bis_gpkg_20-12-2024_wfs:mvp_carto20241219_bis",
+      cartospLayerName: "services_publics_test_20250116_v2:carto_sp_interne",
       zoomLevelLimit: 10,
       cartospStyles: styleCache
     });

src/app/home/home.component.css

@@ -2,6 +2,8 @@
     display: flex;
     height: 800px;
     width: 100%;
+    flex-grow: 1;
+    overflow: hidden;
 }
 
 #map-container, #loading{

src/app/home/home.component.html

@@ -10,9 +10,10 @@
             <app-fullscreen [map]="map"></app-fullscreen>
             <app-attribution [map]="map"></app-attribution>
             <app-scaleline [map]="map"></app-scaleline>
-            <app-search [map]="map"></app-search>
             <app-layerselector [map]="map"></app-layerselector>
+            <app-spselector [map]="map"></app-spselector>
         </div>
+        <app-rightpanel [map]="map"></app-rightpanel>
     }@else {
         <div id="loading">
             @if (GpServiceError){
@@ -28,4 +29,4 @@
             }
         </div>
     }
-</div>
+</div>

src/app/home/home.component.ts

@@ -10,9 +10,10 @@ import { ZoomComponent } from './../controls/zoom/zoom.component';
 import { AttributionComponent } from './../controls/attribution/attribution.component';
 import { FullscreenComponent } from './../controls/fullscreen/fullscreen.component';
 import { ScalelineComponent } from './../controls/scaleline/scaleline.component';
-import { SearchComponent } from './../controls/search/search.component';
 import { LayerselectorComponent } from '../controls/layerselector/layerselector.component';
 import { SpwfsfilterComponent } from '../controls/spwfsfilter/spwfsfilter.component';
+import { RightpanelComponent } from '../rightpanel/rightpanel.component';
+import { SpselectorComponent } from '../controls/spselector/spselector.component';
 
 import { GeocodageService } from './../services/geocodage.service';
 
@@ -29,7 +30,7 @@ import Gp from 'geoportal-access-lib';
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',
   standalone: true,
-  imports: [CommonModule, CarteComponent, LayerswitcherComponent, IsochroneSimpleComponent, LegendeComponent, ZoomComponent, FullscreenComponent, AttributionComponent, ScalelineComponent, SearchComponent, LayerselectorComponent, SpwfsfilterComponent],
+  imports: [CommonModule, CarteComponent, LayerswitcherComponent, IsochroneSimpleComponent, LegendeComponent, ZoomComponent, FullscreenComponent, AttributionComponent, ScalelineComponent, LayerselectorComponent, SpwfsfilterComponent, RightpanelComponent, SpselectorComponent],
   providers: [GeocodageService]
 })
 export class HomeComponent implements OnInit {
@@ -71,7 +72,6 @@ export class HomeComponent implements OnInit {
             this.defaultView.fit(locationGeom as SimpleGeometry, {padding: [30,30,30,30]});
         },
         error : (error: any) => { console.error('Error fetching geocode datas:', error); this.GpServiceError = true; }
-  });
-
+    });
   }
 }

src/app/rightpanel/content/default/default.component.html

@@ -0,0 +1 @@
+<p>default works!</p>

src/app/rightpanel/content/default/default.component.spec.ts

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

src/app/rightpanel/content/default/default.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  template: `<p>hello</p>`,
+})
+export class DefaultComponent implements OnInit {
+  @Input() data!: any;    
+
+  ngOnInit() {
+      console.log(this.data);
+  }
+
+  whoAmI() {
+    return 'I am a child component!';
+  }  
+}