fix(showcase): update all examples

Author: Wykks

apps/showcase/src/app/demo/demo-index.component.html

@@ -50,6 +50,7 @@ <h3 matSubheader>{{ cat }}</h3>
                     '/demo/' + (isEditMode ? '/edit/' : '') + route.path
                   "
                   routerLinkActive="active"
+                  (isActiveChange)="scrollInToActiveLink($event, exampleLink)"
                   [routerLinkActiveOptions]="
                     $any({
                       _routerLinkActiveWakeUpHack_: isEditMode,

apps/showcase/src/app/demo/demo-index.component.ts

@@ -1,13 +1,4 @@
-import {
-  afterNextRender,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  QueryList,
-  signal,
-  ViewChildren,
-} from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import {
   MatSlideToggleChange,
   MatSlideToggleModule,
@@ -28,7 +19,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
+import { MatListModule, type MatListItem } from '@angular/material/list';
 import { MapResizeSignal } from './examples/mgl-map-resize.directive';
 import { MatButtonModule } from '@angular/material/button';
 
@@ -57,7 +48,7 @@ export class DemoIndexComponent {
   private readonly activatedRoute = inject(ActivatedRoute);
   private readonly mapResizeSignal = inject(MapResizeSignal);
 
-  categories: Category[];
+  categories = Object.values(Category);
   searchTerm = signal('');
   routesByCategory = computed(() => {
     const searchTerm = this.searchTerm();
@@ -77,17 +68,6 @@ export class DemoIndexComponent {
   sidenavIsOpen = true;
   isEditMode = !!this.activatedRoute.snapshot.firstChild?.params['demoUrl'];
 
-  @ViewChildren('exampleLink', { read: ElementRef })
-  exampleLinks: QueryList<ElementRef>;
-
-  constructor() {
-    this.categories = Object.values(Category);
-
-    afterNextRender(() => {
-      this.scrollInToActiveExampleLink();
-    });
-  }
-
   toggleSidenav() {
     this.sidenavIsOpen = !this.sidenavIsOpen;
   }
@@ -106,15 +86,13 @@ export class DemoIndexComponent {
     this.mapResizeSignal.set(undefined);
   }
 
-  private scrollInToActiveExampleLink() {
-    const activeLink = this.exampleLinks.find((elm) =>
-      (elm.nativeElement as HTMLElement).classList.contains('active'),
-    );
-    if (activeLink) {
-      scrollIntoView(activeLink.nativeElement as HTMLElement, {
-        block: 'center',
-        scrollMode: 'if-needed',
-      });
+  scrollInToActiveLink(isActive: boolean, item: MatListItem) {
+    if (!isActive) {
+      return;
     }
+    scrollIntoView(item._elementRef.nativeElement as HTMLElement, {
+      block: 'center',
+      scrollMode: 'if-needed',
+    });
   }
 }

apps/showcase/src/app/demo/examples/3d-buildings.component.ts

@@ -7,11 +7,12 @@ import { MglMapResizeDirective } from './mgl-map-resize.directive';
   selector: 'showcase-demo',
   template: `
     <mgl-map
-      [style]="'mapbox://styles/mapbox/light-v9'"
+      [style]="'mapbox://styles/mapbox/light-v11'"
       [zoom]="[15.5]"
       [center]="[-74.0066, 40.7135]"
       [pitch]="[45]"
       [bearing]="[-17.6]"
+      [antialias]="true"
       (mapLoad)="onLoad($event.target)"
     >
       <mgl-layer

apps/showcase/src/app/demo/examples/add-image-generated.component.ts

@@ -1,17 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { MapComponent, LayerComponent, ImageComponent } from 'ngx-mapbox-gl';
 import { MglMapResizeDirective } from './mgl-map-resize.directive';
 
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map [style]="'mapbox://styles/mapbox/streets-v12'">
+    <mgl-map
+      [style]="'mapbox://styles/mapbox/streets-v12'"
+      [center]="[0, 0]"
+      [zoom]="[2]"
+    >
       <mgl-image
         id="gradient"
         [data]="{
           width: 64,
           height: 64,
-          data: imageData,
+          data: imageData(),
         }"
       />
       <mgl-layer
@@ -45,12 +49,8 @@ import { MglMapResizeDirective } from './mgl-map-resize.directive';
   ],
   styleUrls: ['./examples.css'],
 })
-export class AddImageGeneratedComponent implements OnInit {
-  imageData: Uint8Array;
-
-  ngOnInit() {
-    this.imageData = this.generateImage();
-  }
+export class AddImageGeneratedComponent {
+  imageData = signal<Uint8Array>(this.generateImage());
 
   private generateImage() {
     const width = 64; // The image will be 64 pixels square

apps/showcase/src/app/demo/examples/add-image-missing-generated.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { NgForOf } from '@angular/common';
 import { MapComponent, LayerComponent, ImageComponent } from 'ngx-mapbox-gl';
 import { MglMapResizeDirective } from './mgl-map-resize.directive';
 
@@ -8,13 +7,13 @@ import { MglMapResizeDirective } from './mgl-map-resize.directive';
   template: `
     <mgl-map
       [style]="'mapbox://styles/mapbox/streets-v12'"
+      [center]="[0, 0]"
+      [zoom]="[2]"
       (styleImageMissing)="generateImage($event)"
     >
-      <mgl-image
-        *ngFor="let imageData of imagesData; trackBy: trackByImage"
-        [id]="imageData.id"
-        [data]="imageData"
-      />
+      @for (imageData of imagesData; track trackByImage(imageData)) {
+        <mgl-image [id]="imageData.id" [data]="imageData" />
+      }
       <mgl-layer
         id="points"
         type="symbol"
@@ -67,7 +66,6 @@ import { MglMapResizeDirective } from './mgl-map-resize.directive';
     MglMapResizeDirective,
     LayerComponent,
     ImageComponent,
-    NgForOf,
   ],
   styleUrls: ['./examples.css'],
 })
@@ -111,7 +109,7 @@ export class AddImageMissingGeneratedComponent {
     this.imagesData = [...this.imagesData, imageData];
   }
 
-  trackByImage(_idx: number, image: { id: string }) {
+  trackByImage(image: { id: string }) {
     return image.id;
   }
 }

apps/showcase/src/app/demo/examples/add-image.component.ts

@@ -1,50 +1,53 @@
-import { Component } from '@angular/core';
-import { NgIf } from '@angular/common';
+import { Component, signal } from '@angular/core';
 import { MapComponent, LayerComponent, ImageComponent } from 'ngx-mapbox-gl';
 import { MglMapResizeDirective } from './mgl-map-resize.directive';
 
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map [style]="'mapbox://styles/mapbox/streets-v12'">
+    <mgl-map
+      [style]="'mapbox://styles/mapbox/dark-v11'"
+      [center]="[-77.432, 25.0306]"
+      [zoom]="[10]"
+    >
       <mgl-image
         id="cat"
-        url="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png"
-        (imageLoaded)="imageLoaded = true"
+        url="https://docs.mapbox.com/mapbox-gl-js/assets/cat.png"
+        (imageLoaded)="imageLoaded.set(true)"
       />
-      <mgl-layer
-        *ngIf="imageLoaded"
-        id="points"
-        type="symbol"
-        [source]="{
-          type: 'geojson',
-          data: {
-            type: 'FeatureCollection',
-            features: [
-              {
-                type: 'Feature',
-                properties: {},
-                geometry: {
-                  type: 'Point',
-                  coordinates: [0, 0],
+      @if (imageLoaded()) {
+        <mgl-layer
+          id="points"
+          type="symbol"
+          [source]="{
+            type: 'geojson',
+            data: {
+              type: 'FeatureCollection',
+              features: [
+                {
+                  type: 'Feature',
+                  properties: {},
+                  geometry: {
+                    type: 'Point',
+                    coordinates: [-77.4144, 25.0759],
+                  },
                 },
-              },
-            ],
-          },
-        }"
-        [layout]="{ 'icon-image': 'cat', 'icon-size': 0.25 }"
-      />
+              ],
+            },
+          }"
+          [layout]="{ 'icon-image': 'cat', 'icon-size': 0.25 }"
+        />
+      }
     </mgl-map>
   `,
   imports: [
     MapComponent,
     MglMapResizeDirective,
     LayerComponent,
     ImageComponent,
-    NgIf,
   ],
   styleUrls: ['./examples.css'],
 })
 export class AddImageComponent {
-  imageLoaded = false;
+  imageLoaded = signal(false);
 }

apps/showcase/src/app/demo/examples/attribution-position.component.ts

@@ -10,7 +10,7 @@ import { MglMapResizeDirective } from './mgl-map-resize.directive';
   selector: 'showcase-demo',
   template: `
     <mgl-map
-      [style]="'mapbox://styles/mapbox/light-v9'"
+      [style]="'mapbox://styles/mapbox/light-v11'"
       [center]="[-77.04, 38.907]"
       [zoom]="[11.15]"
       [attributionControl]="false"

apps/showcase/src/app/demo/examples/center-on-symbol.component.ts

@@ -1,5 +1,4 @@
-import { Component } from '@angular/core';
-import { NgForOf } from '@angular/common';
+import { Component, signal } from '@angular/core';
 import { MapMouseEvent } from 'mapbox-gl';
 import { MglMapResizeDirective } from './mgl-map-resize.directive';
 import {
@@ -13,27 +12,29 @@ import {
   selector: 'showcase-demo',
   template: `
     <mgl-map
-      [style]="'mapbox://styles/mapbox/light-v9'"
-      [zoom]="[8]"
-      [center]="center"
-      [cursorStyle]="cursorStyle"
+      [style]="'mapbox://styles/mapbox/light-v11'"
+      [zoom]="[7.2]"
+      [center]="center()"
+      [cursorStyle]="cursorStyle()"
     >
-      <mgl-geojson-source id="symbols-source">
-        <mgl-feature
-          *ngFor="let geometry of geometries"
-          [geometry]="geometry"
-        />
+      <mgl-geojson-source id="points">
+        @for (geometry of geometries; track $index) {
+          <mgl-feature [geometry]="geometry" />
+        }
       </mgl-geojson-source>
       <mgl-layer
-        id="symbols"
-        type="symbol"
-        source="symbols-source"
-        [layout]="{
-          'icon-image': 'rocket-15',
+        id="circle"
+        type="circle"
+        source="points"
+        [paint]="{
+          'circle-color': '#4264fb',
+          'circle-radius': 8,
+          'circle-stroke-width': 2,
+          'circle-stroke-color': '#ffffff',
         }"
         (layerClick)="centerMapTo($event)"
-        (layerMouseEnter)="cursorStyle = 'pointer'"
-        (layerMouseLeave)="cursorStyle = ''"
+        (layerMouseEnter)="cursorStyle.set('pointer')"
+        (layerMouseLeave)="cursorStyle.set('')"
       />
     </mgl-map>
   `,
@@ -43,32 +44,31 @@ import {
     GeoJSONSourceComponent,
     FeatureComponent,
     LayerComponent,
-    NgForOf,
   ],
   styleUrls: ['./examples.css'],
 })
 export class CenterOnSymbolComponent {
-  cursorStyle: string;
+  cursorStyle = signal('');
 
-  center: [number, number] = [-90.96, -0.47];
+  center = signal<[number, number]>([-90.96, -0.47]);
 
   geometries = [
     {
       type: 'Point' as const,
-      coordinates: [-91.395263671875, -0.9145729757782163],
+      coordinates: [-91.3952, -0.9145],
     },
     {
       type: 'Point' as const,
-      coordinates: [-90.32958984375, -0.6344474832838974],
+      coordinates: [-90.3295, -0.6344],
     },
     {
       type: 'Point' as const,
-      coordinates: [-91.34033203125, 0.01647949196029245],
+      coordinates: [-91.3403, 0.0164],
     },
   ];
 
   centerMapTo(evt: MapMouseEvent) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.center = (evt as any).features[0].geometry.coordinates;
+    this.center.set((evt as any).features[0].geometry.coordinates);
   }
 }

apps/showcase/src/app/demo/examples/cluster-html.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, input } from '@angular/core';
-import { NgForOf, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import {
   type CircleLayerSpecification,
   type SymbolLayerSpecification,

apps/showcase/src/app/demo/examples/cluster.component.ts

@@ -11,7 +11,7 @@ import {
   selector: 'showcase-demo',
   template: `
     <mgl-map
-      [style]="'mapbox://styles/mapbox/dark-v9'"
+      [style]="'mapbox://styles/mapbox/dark-v11'"
       [zoom]="[3]"
       [center]="[-103.59179687498357, 40.66995747013945]"
     >