feat(demo): update and fix examples

Author: Rémi Hau

angular.json

@@ -47,7 +47,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css",
+              "src/styles.scss",
               "node_modules/ol/ol.css"
             ],
             "scripts": [],
@@ -110,7 +110,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -167,7 +167,8 @@
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": "671ddb05-2c7a-4af9-98c3-dbdfcb7630ce"
   },
   "schematics": {
     "@angular-eslint/schematics:application": {

package.json

@@ -15,10 +15,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.2.15",
+    "@angular/cdk": "^18.2.14",
     "@angular/common": "^19.2.15",
     "@angular/compiler": "^19.2.15",
     "@angular/core": "^19.2.15",
     "@angular/forms": "^19.2.15",
+    "@angular/material": "^18.2.14",
     "@angular/platform-browser": "^19.2.15",
     "@angular/platform-browser-dynamic": "^19.2.15",
     "@angular/router": "^19.2.15",

src/app/app.component.ts

@@ -38,7 +38,7 @@ import { RouterLink, RouterOutlet } from '@angular/router';
       .main-container {
         height: calc(100% - 72px);
         background-color: white;
-        margin: 0px;
+        padding: 0 1rem;
         overflow: auto;
       }
     `,

src/app/app.routing.ts

@@ -1,14 +1,14 @@
 import { Routes } from '@angular/router';
 import { ClusterComponent } from './cluster/cluster.component';
-import { BasicComponent } from './basic/basic.component';
+import { SimpleComponent } from './simple/simple.component';
 import { RasterComponent } from './raster/raster.component';
 import { ExamplesListComponent } from './examples-list/examples-list.component';
 import { ExamplesItemComponent } from './examples-item/examples-item.component';
 import { MapPositionComponent } from './map-position/map-position.component';
 import { CursorPositionComponent } from './cursor-position/cursor-position.component';
 import { DisplayGeometryComponent } from './display-geometry/display-geometry.component';
 import { DisplayGeojsonSourceComponent } from './display-geojson-source/display-geojson-source.component';
-import { DrawPolygonComponent } from './draw-polygon/draw-polygon.component';
+import { DrawFeaturesComponent } from './draw-features/draw-features.component';
 import { ModifyPolygonComponent } from './modify-polygon/modify-polygon.component';
 import { SideBySideComponent } from './side-by-side/side-by-side.component';
 import { SwipeComponent } from './swipe/swipe.component';
@@ -31,12 +31,12 @@ export const routes: Routes = [
     path: 'examples',
     component: ExamplesItemComponent,
     children: [
-      { path: 'basic', component: BasicComponent },
+      { path: 'simple', component: SimpleComponent },
       { path: 'map-position', component: MapPositionComponent },
       { path: 'cursor-position', component: CursorPositionComponent },
       { path: 'display-geometry', component: DisplayGeometryComponent },
       { path: 'display-geojson-source', component: DisplayGeojsonSourceComponent },
-      { path: 'draw-polygon', component: DrawPolygonComponent },
+      { path: 'draw-features', component: DrawFeaturesComponent },
       { path: 'modify-polygon', component: ModifyPolygonComponent },
       { path: 'side-by-side', component: SideBySideComponent },
       { path: 'swipe', component: SwipeComponent },

src/app/arcgis-image/arcgis-image.component.ts

@@ -28,9 +28,8 @@ import {
 
       <aol-layer-image>
         <aol-source-imagearcgisrest
-          projection="EPSG:3857"
           [ratio]="1"
-          url="https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"
+          url="https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/USA/MapServer"
           (imageLoadStart)="imageLoadStart()"
           (imageLoadEnd)="imageLoadEnd()"
         ></aol-source-imagearcgisrest>

src/app/basic/basic.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NgFor } from '@angular/common';
 import {
   CollectionCoordinatesComponent,
   ControlFullScreenComponent,
@@ -40,11 +39,13 @@ import {
       <aol-layer-vector>
         <aol-source-cluster [distance]="distance">
           <aol-source-vector>
-            <aol-feature *ngFor="let p of points">
-              <aol-geometry-point>
-                <aol-coordinate [x]="p.x" [y]="p.y" [srid]="'EPSG:4326'"></aol-coordinate>
-              </aol-geometry-point>
-            </aol-feature>
+            @for (p of points; track $index) {
+              <aol-feature>
+                <aol-geometry-point>
+                  <aol-coordinate [x]="p.x" [y]="p.y" [srid]="'EPSG:4326'"></aol-coordinate>
+                </aol-geometry-point>
+              </aol-feature>
+            }
           </aol-source-vector>
 
           <aol-style>
@@ -110,7 +111,6 @@ import {
     `,
   ],
   imports: [
-    NgFor,
     FormsModule,
     MapComponent,
     DefaultInteractionComponent,