### Install ngx-maplibre-gl and maplibre-gl

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/README.md

Install the necessary packages using npm or yarn.

```bash
npm install @maplibre/ngx-maplibre-gl maplibre-gl
yarn add @maplibre/ngx-maplibre-gl maplibre-gl
```

--------------------------------

### Run ngx-maplibre-gl Showcase App

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/CONTRIBUTING.md

Starts the showcase application for ngx-maplibre-gl. This is useful for testing changes to the library.

```bash
npm run start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/CONTRIBUTING.md

Installs project dependencies using npm ci. Ensure you have a package-lock.json or npm-shrinkwrap.json.

```bash
npm ci
```

--------------------------------

### Map Component with Controls

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/README.md

Import NgxMapLibreGLModule for using multiple map components. This example includes a navigation control.

```typescript
import { Component } from '@angular/core';
import { NgxMapLibreGLModule } from '@maplibre/ngx-maplibre-gl';

@Component({
  template: `
    <mgl-map
      [mapStyle]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
      <mgl-control
        mglNavigation
        [visualizePitch]="true"
    />
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
  imports: [NgxMapLibreGLModule]
})
export class AppComponent {}
```

--------------------------------

### Add Vector Tile Source to Map

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Use `mgl-vector-source` to add vector tile data. Configure with a URL or a tiles array. This example shows how to add a source and then a line layer to visualize country boundaries.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  VectorSourceComponent,
  LayerComponent
} from '@maplibre/ngx-maplibre-gl';
import type { LayerSpecification } from 'maplibre-gl';

@Component({
  selector: 'app-vector-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[3]" [center]="[-71.97, -13.51]">
      <mgl-vector-source
        id="countries"
        [tiles]="['https://demotiles.maplibre.org/tiles/{z}/{x}/{y}.pbf']"
      />

      <mgl-layer
        id="countries-layer"
        type="line"
        source="countries"
        sourceLayer="countries"
        [layout]="layouts()['countries']"
        [paint]="{ 'line-color': 'blue', 'line-width': 2 }"
      />
    </mgl-map>

    <button (click)="toggleLayer()">Toggle Layer</button>
  `,
  imports: [MapComponent, VectorSourceComponent, LayerComponent]
})
export class VectorDemoComponent {
  readonly layouts = signal<Record<string, LayerSpecification['layout']>>({
    countries: { visibility: 'visible' }
  });

  toggleLayer(): void {
    this.layouts.update(layouts => ({
      ...layouts,
      countries: {
        ...layouts['countries'],
        visibility: (layouts['countries'] as any)?.visibility === 'visible' ? 'none' : 'visible'
      }
    }));
  }
}
```

--------------------------------

### Configure GeoJSONSourceComponent with Clustering

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

The mgl-geojson-source component handles GeoJSON data. Enable clustering and set parameters like clusterMaxZoom and clusterRadius for grouped markers. This example also shows how to style clustered and unclustered points using mgl-layer components.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  GeoJSONSourceComponent,
  LayerComponent
} from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-geojson-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[3]" [center]="[-103.59, 40.66]">
      <mgl-geojson-source
        id="earthquakes"
        [data]="earthquakeData()"
        [cluster]="true"
        [clusterMaxZoom]="14"
        [clusterRadius]="50"
      />
      <mgl-layer
        id="clusters"
        type="circle"
        source="earthquakes"
        [filter]="['has', 'point_count']"
        [paint]="{
          'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'],
          'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40]
        }"
      />
      <mgl-layer
        id="unclustered-point"
        type="circle"
        source="earthquakes"
        [filter]="['!', ['has', 'point_count']]]"
        [paint]="{
          'circle-color': '#11b4da',
          'circle-radius': 4,
          'circle-stroke-width': 1,
          'circle-stroke-color': '#fff'
        }"
      />
    </mgl-map>
  `,
  imports: [MapComponent, GeoJSONSourceComponent, LayerComponent]
})
export class GeoJSONDemoComponent {
  readonly earthquakeData = signal<GeoJSON.FeatureCollection>({
    type: 'FeatureCollection',
    features: [
      { type: 'Feature', geometry: { type: 'Point', coordinates: [-103.59, 40.66] }, properties: { mag: 4.5 } },
      { type: 'Feature', geometry: { type: 'Point', coordinates: [-104.59, 41.66] }, properties: { mag: 3.2 } }
    ]
  });
}
```

--------------------------------

### Add Raster DEM Source for 3D Terrain

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Utilize `mgl-raster-dem-source` to incorporate terrain data for 3D rendering. This example configures a DEM source and a terrain control for interactive exaggeration.

```typescript
import { Component } from '@angular/core';
import {
  MapComponent,
  RasterDemSourceComponent,
  ControlComponent,
  TerrainControlDirective
} from '@maplibre/ngx-maplibre-gl';
import type { TerrainSpecification } from 'maplibre-gl';

@Component({
  selector: 'app-terrain-demo',
  template: `
    <mgl-map
      [mapStyle]="'https://api.maptiler.com/maps/hybrid/style.json?key=YOUR_KEY'"
      [zoom]="[12]"
      [center]="[11.39085, 47.27574]"
      [pitch]="[52]"
      [terrain]="terrainSpec"
    >
      <mgl-raster-dem-source
        id="terrainSource"
        url="https://demotiles.maplibre.org/terrain-tiles/tiles.json"
        tileSize="256"
      />

      <!-- Terrain control toggle -->
      <mgl-control
        mglTerrain
        [source]="'terrainSource'"
        [exaggeration]="1.5"
        position="top-right"
      />
    </mgl-map>
  `,
  imports: [MapComponent, RasterDemSourceComponent, ControlComponent, TerrainControlDirective]
})
export class TerrainDemoComponent {
  readonly terrainSpec: TerrainSpecification = {
    source: 'terrainSource',
    exaggeration: 1
  };
}
```

--------------------------------

### Register Custom Map Image

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

The `mgl-image` component loads and registers images for use in symbol layers. Images can be loaded from URLs or provided as raw data. This example loads an image from a URL and uses it as an icon in a symbol layer.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  ImageComponent,
  GeoJSONSourceComponent,
  LayerComponent
} from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-image-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[10]" [center]="[-74.5, 40]">
      <!-- Load image from URL -->
      <mgl-image
        id="custom-marker"
        url="https://maplibre.org/maplibre-gl-js/docs/assets/custom_marker.png"
        (imageLoaded)="imageLoaded.set(true)"
        (imageError)="onImageError($event)"
      />

      @if (imageLoaded()) {
        <mgl-geojson-source id="points" [data]="pointsData" />
        <mgl-layer
          id="points-layer"
          type="symbol"
          source="points"
          [layout]="{
            'icon-image': 'custom-marker',
            'icon-size': 0.5,
            'icon-allow-overlap': true
          }"
        />
      }
    </mgl-map>
  `,
  imports: [MapComponent, ImageComponent, GeoJSONSourceComponent, LayerComponent]
})
export class ImageDemoComponent {
  readonly imageLoaded = signal(false);

  readonly pointsData: GeoJSON.FeatureCollection = {
    type: 'FeatureCollection',
    features: [
      { type: 'Feature', geometry: { type: 'Point', coordinates: [-74.5, 40] }, properties: {} }
    ]
  };

  onImageError(error: { status: number }):
 void {
    console.error('Failed to load image:', error);
  }
}
```

--------------------------------

### Initialize MapComponent with Basic Configuration

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Use the mgl-map component as the root for map elements. Configure map style, zoom, center, pitch, bearing, and interaction properties.

```typescript
import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';
import type { Map } from 'maplibre-gl';

@Component({
  selector: 'app-map-demo',
  template: `
    <mgl-map
      [mapStyle]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
      [pitch]="[45]"
      [bearing]="[0]"
      [minZoom]="2"
      [maxZoom]="18"
      [interactive]="true"
      [attributionControl]="false"
      (mapLoad)="onMapLoad($event)"
      (mapClick)="onMapClick($event)"
    />
  `,
  styles: [`
    mgl-map {
      height: 100%;
      width: 100%;
    }
  `],
  imports: [MapComponent]
})
export class MapDemoComponent {
  onMapLoad(map: Map): void {
    console.log('Map loaded', map);
  }

  onMapClick(event: any): void {
    console.log('Clicked at:', event.lngLat);
  }
}
```

--------------------------------

### Generate API Documentation

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/CONTRIBUTING.md

Generates API documentation using typedoc. The documentation is placed in the API folder under dist/showcase.

```bash
npm run docs
```

--------------------------------

### Import Individual Components for Tree-Shaking

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Import individual components like MapComponent, ControlComponent, and NavigationControlDirective for better tree-shaking and a smaller bundle size. This is the recommended approach for standalone components.

```typescript
import { Component } from '@angular/core';
import {
  MapComponent,
  ControlComponent,
  NavigationControlDirective
} from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-root',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[9]" [center]="[-74.5, 40]">
      <mgl-control mglNavigation />
    </mgl-map>
  `,
  imports: [MapComponent, ControlComponent, NavigationControlDirective]
})
export class AppComponent {}
```

--------------------------------

### Add maplibre-gl CSS to global CSS

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/README.md

Alternatively, import the maplibre-gl CSS file in your global CSS file (e.g., styles.css).

```css
@import '~maplibre-gl/dist/maplibre-gl.css';
```

--------------------------------

### Import NgxMapLibreGLModule for NgModule Apps

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Import the NgxMapLibreGLModule to include all library components at once. This is suitable for NgModule-based Angular applications.

```typescript
import { NgModule } from '@angular/core';
import { NgxMapLibreGLModule } from '@maplibre/ngx-maplibre-gl';

@NgModule({
  imports: [NgxMapLibreGLModule]
})
export class AppModule {}
```

--------------------------------

### Conditional Rendering and Iteration in Angular

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/projects/showcase/src/app/demo/demo-index.component.html

Demonstrates conditional rendering with @if and iteration with @for in Angular templates. Useful for dynamically displaying content based on application state or data.

```html
@if (searchTerm()) { close }
@for (cat of categories; track cat) {

### {{ cat }}

@for (route of searchedRoutes()[cat]; track route) { @if (route) { {{ route.data?.label }} } }
}
```

--------------------------------

### Configure tsconfig.json

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/README.md

Adjust tsconfig.json to disable strict null checks and skip library checks if necessary.

```json
"compilerOptions": {
    ...
    "strictNullChecks": false,
    "skipLibCheck": true,
}
```

--------------------------------

### HTML Markers for Clustered GeoJSON with mgl-markers-for-clusters

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Renders custom HTML markers for clustered GeoJSON data using `mgl-markers-for-clusters`. Provides `mglPoint` and `mglClusterPoint` directives for templating individual and cluster markers. Ensure relevant components and directives are imported.

```typescript
import { Component } from '@angular/core';
import {
  MapComponent,
  GeoJSONSourceComponent,
  MarkersForClustersComponent,
  PointDirective,
  ClusterPointDirective
} from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-cluster-markers-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[3]" [center]="[-103.59, 40.66]">
      <mgl-geojson-source
        id="clustered-points"
        [data]="pointsData"
        [cluster]="true"
        [clusterMaxZoom]="14"
        [clusterRadius]="50"
      />

      <mgl-markers-for-clusters source="clustered-points">
        <!-- Template for individual points -->
        <ng-template mglPoint let-feature>
          <div class="single-marker" style="background: blue; width: 20px; height: 20px; border-radius: 50%;">
          </div>
        </ng-template>

        <!-- Template for cluster points -->
        <ng-template mglClusterPoint let-feature>
          <div class="cluster-marker" style="background: red; padding: 10px; border-radius: 50%; color: white;">
            {{ feature.properties?.point_count }}
          </div>
        </ng-template>
      </mgl-markers-for-clusters>
    </mgl-map>
  `,
  imports: [
    MapComponent,
    GeoJSONSourceComponent,
    MarkersForClustersComponent,
    PointDirective,
    ClusterPointDirective
  ]
})
export class ClusterMarkersDemoComponent {
  readonly pointsData: GeoJSON.FeatureCollection = {
    type: 'FeatureCollection',
    features: Array.from({ length: 100 }, (_, i) => ({
      type: 'Feature' as const,
      geometry: { type: 'Point' as const, coordinates: [-100 + Math.random() * 50, 30 + Math.random() * 20] },
      properties: { id: i }
    }))
  };
}
```

--------------------------------

### Basic Map Component Usage

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/README.md

Use the MglMap component in your Angular template to display a map. Import MapComponent for single use.

```typescript
import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

@Component({
  template: `
    <mgl-map
      [mapStyle]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[9]"
      [center]="[-74.5, 40]"
    >
    </mgl-map>
  `,
  styles: [
    `
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
  imports: [MapComponent],
})
export class AppComponent {}
```

--------------------------------

### Add and Customize a Line Layer

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Use `mgl-layer` to render a GeoJSON source as a line. Customize line appearance, layout, and visibility with zoom constraints. Event handlers like `layerClick` and `layerMouseEnter` are supported.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  GeoJSONSourceComponent,
  LayerComponent,
  FeatureComponent
} from '@maplibre/ngx-maplibre-gl';
import type { MapLayerMouseEvent } from 'maplibre-gl';

@Component({
  selector: 'app-layer-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[15]" [center]="[-122.486, 37.830]">
      <mgl-geojson-source id="route">
        <mgl-feature [geometry]="lineGeometry" />
      </mgl-geojson-source>
      <mgl-layer
        id="route-line"
        type="line"
        source="route"
        [layout]="{
          'line-join': 'round',
          'line-cap': 'round'
        }"
        [paint]="{
          'line-color': '#888',
          'line-width': 8
        }"
        [minzoom]="10"
        [maxzoom]="20"
        (layerClick)="onLayerClick($event)"
        (layerMouseEnter)="cursorStyle.set('pointer')"
        (layerMouseLeave)="cursorStyle.set('')"
      />
    </mgl-map>
  `,
  imports: [MapComponent, GeoJSONSourceComponent, LayerComponent, FeatureComponent]
})
export class LayerDemoComponent {
  readonly cursorStyle = signal('');
  readonly lineGeometry: GeoJSON.LineString = {
    type: 'LineString',
    coordinates: [
      [-122.483, 37.833],
      [-122.483, 37.830],
      [-122.486, 37.830]
    ]
  };

  onLayerClick(event: MapLayerMouseEvent): void {
    console.log('Layer clicked', event.features);
  }
}

```

--------------------------------

### Use Standalone Imports with NgxMapLibreGLImports

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

For standalone components, use the NgxMapLibreGLImports array to import all necessary components. This provides a convenient way to include the library's features.

```typescript
import { Component } from '@angular/core';
import { NgxMapLibreGLImports } from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-root',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[9]" [center]="[-74.5, 40]">
      <mgl-control mglNavigation />
    </mgl-map>
  `,
  imports: [...NgxMapLibreGLImports]
})
export class AppComponent {}
```

--------------------------------

### Displaying Popups on Map with mgl-popup

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Use the mgl-popup component to show informational popups. It can be attached to features or placed at specific coordinates. Ensure the PopupComponent is imported.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  PopupComponent,
  GeoJSONSourceComponent,
  LayerComponent
} from '@maplibre/ngx-maplibre-gl';
import type { MapLayerMouseEvent } from 'maplibre-gl';

@Component({
  selector: 'app-popup-demo',
  template: `
    <mgl-map
      [mapStyle]="'https://demotiles.maplibre.org/style.json'"
      [zoom]="[11]"
      [center]="[-77.04, 38.907]"
      [cursorStyle]="cursorStyle()"
    >
      <mgl-geojson-source id="places" [data]="placesData" />

      <mgl-layer
        id="places"
        type="symbol"
        source="places"
        [layout]="{ 'icon-image': 'marker_15', 'icon-allow-overlap': true }"
        (layerClick)="selectPlace($event)"
        (layerMouseEnter)="cursorStyle.set('pointer')"
        (layerMouseLeave)="cursorStyle.set('')"
      />

      @if (selectedPlace(); as place) {
        <mgl-popup
          [feature]="place"
          [closeButton]="true"
          [closeOnClick]="false"
          [maxWidth]="'300px'"
          (popupClose)="selectedPlace.set(null)"
        >
          <h3>{{ place.properties?.['title'] }}</h3>
          <p>{{ place.properties?.['description'] }}</p>
        </mgl-popup>
      }

      <!-- Static popup at coordinates -->
      <mgl-popup [lngLat]="[-77.03, 38.91]" [anchor]="'bottom'">
        <strong>Static Popup</strong>
      </mgl-popup>
    </mgl-map>
  `,
  imports: [MapComponent, PopupComponent, GeoJSONSourceComponent, LayerComponent]
})
export class PopupDemoComponent {
  readonly selectedPlace = signal<GeoJSON.Feature | null>(null);
  readonly cursorStyle = signal('');

  readonly placesData: GeoJSON.FeatureCollection = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [-77.04, 38.907] },
        properties: { title: 'Washington DC', description: 'Capital of the United States' }
      }
    ]
  };

  selectPlace(event: MapLayerMouseEvent): void {
    this.selectedPlace.set(event.features![0]);
  }
}
```

--------------------------------

### Add and Customize HTML Markers

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Use `mgl-marker` to add HTML-based markers to the map. Markers can be configured as draggable and can contain custom Angular content. Popups can also be attached.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  MarkerComponent,
  PopupComponent,
  ControlComponent
} from '@maplibre/ngx-maplibre-gl';
import type { Marker } from 'maplibre-gl';

@Component({
  selector: 'app-marker-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[2]" [center]="[0, 0]">
      <mgl-marker
        [lngLat]="[0, 0]"
        [draggable]="true"
        [color]="'#3887be'"
        (markerDragEnd)="onDragEnd($event)"
      />

      <mgl-marker [lngLat]="[-74.5, 40]" [anchor]="'bottom'">
        <div class="custom-marker" style="background: red; padding: 10px; border-radius: 50%;">
          Custom HTML
        </div>
      </mgl-marker>

      @if (coordinates(); as coords) {
        <mgl-control position="bottom-left">
          <div>Longitude: {{ coords[0] }}</div>
          <div>Latitude: {{ coords[1] }}</div>
        </mgl-control>
      }
    </mgl-map>
  `,
  imports: [MapComponent, MarkerComponent, ControlComponent]
})
export class MarkerDemoComponent {
  readonly coordinates = signal<number[] | null>(null);

  onDragEnd(marker: Marker): void {
    this.coordinates.set(marker.getLngLat().toArray());
  }
}

```

--------------------------------

### Add maplibre-gl CSS to angular.json

Source: https://github.com/maplibre/ngx-maplibre-gl/blob/main/README.md

Include the maplibre-gl CSS file in your angular.json styles array for proper map rendering.

```json
"styles": [
  ...,
  "./node_modules/maplibre-gl/dist/maplibre-gl.css"
],
```

--------------------------------

### Integrating Map Controls with mgl-control

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

The mgl-control component serves as a container for various map controls like navigation, fullscreen, geolocate, and scale. Import the relevant control directives. Custom controls can also be implemented using Angular content.

```typescript
import { Component } from '@angular/core';
import {
  MapComponent,
  ControlComponent,
  NavigationControlDirective,
  FullscreenControlDirective,
  GeolocateControlDirective,
  ScaleControlDirective
} from '@maplibre/ngx-maplibre-gl';
import type { Position } from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-controls-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[9]" [center]="[-74.5, 40]">
      <!-- Navigation control with zoom and compass -->
      <mgl-control mglNavigation [showCompass]="true" [showZoom]="true" [visualizePitch]="true" />

      <!-- Fullscreen control -->
      <mgl-control mglFullscreen position="top-left" />

      <!-- Geolocate control -->
      <mgl-control
        mglGeolocate
        position="top-left"
        [positionOptions]="{ enableHighAccuracy: true }"
        [trackUserLocation]="true"
        (geolocate)="onGeolocate($event)"
      />

      <!-- Scale control -->
      <mgl-control mglScale position="bottom-right" [maxWidth]="100" [unit]="'metric'" />

      <!-- Custom control with Angular content -->
      <mgl-control position="bottom-left">
        <div class="custom-control" style="background: white; padding: 10px;">
          <button (click)="zoomIn()">Zoom In</button>
          <button (click)="zoomOut()">Zoom Out</button>
        </div>
      </mgl-control>
    </mgl-map>
  `,
  imports: [
    MapComponent,
    ControlComponent,
    NavigationControlDirective,
    FullscreenControlDirective,
    GeolocateControlDirective,
    ScaleControlDirective
  ]
})
export class ControlsDemoComponent {
  onGeolocate(position: Position): void {
    console.log('User location:', position.coords.latitude, position.coords.longitude);
  }

  zoomIn(): void {
    // Custom zoom logic
  }

  zoomOut(): void {
    // Custom zoom logic
  }
}

```

--------------------------------

### Enable Draggable Features with DraggableDirective

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Use the mglDraggable directive to enable drag interactions on point features. It emits drag events and automatically updates feature coordinates.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  GeoJSONSourceComponent,
  FeatureComponent,
  LayerComponent,
  DraggableDirective
} from '@maplibre/ngx-maplibre-gl';
import type { MapMouseEvent } from 'maplibre-gl';

@Component({
  selector: 'app-draggable-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[10]" [center]="[-122.4, 37.8]">
      <mgl-geojson-source id="draggable-point">
        <mgl-feature
          #draggableFeature
          [geometry]="pointGeometry()"
          [mglDraggable]="pointLayer"
          (featureDragStart)="onDragStart($event)"
          (featureDrag)="onDrag($event)"
          (featureDragEnd)="onDragEnd($event)"
        />
      </mgl-geojson-source>

      <mgl-layer
        #pointLayer
        id="point-layer"
        type="circle"
        source="draggable-point"
        [paint]="{
          'circle-radius': 15,
          'circle-color': '#3887be'
        }"
      />
    </mgl-map>

    <div>Current position: {{ pointGeometry().coordinates | json }}</div>
  `,
  imports: [
    MapComponent,
    GeoJSONSourceComponent,
    FeatureComponent,
    LayerComponent,
    DraggableDirective
  ]
})
export class DraggableDemoComponent {
  readonly pointGeometry = signal<GeoJSON.Point>({
    type: 'Point',
    coordinates: [-122.4, 37.8]
  });

  onDragStart(event: MapMouseEvent): void {
    console.log('Drag started');
  }

  onDrag(event: MapMouseEvent): void {
    // Feature coordinates update automatically
  }

  onDragEnd(event: MapMouseEvent): void {
    console.log('Drag ended at:', event.lngLat);
  }
}

```

--------------------------------

### Declarative GeoJSON Features with mgl-feature

Source: https://context7.com/maplibre/ngx-maplibre-gl/llms.txt

Use `mgl-feature` within `mgl-geojson-source` to declaratively define GeoJSON features. Supports dynamic updates via signals. Ensure `FeatureComponent` is imported.

```typescript
import { Component, signal } from '@angular/core';
import {
  MapComponent,
  GeoJSONSourceComponent,
  FeatureComponent,
  LayerComponent
} from '@maplibre/ngx-maplibre-gl';

@Component({
  selector: 'app-feature-demo',
  template: `
    <mgl-map [mapStyle]="'https://demotiles.maplibre.org/style.json'" [zoom]="[12]" [center]="[-122.4, 37.8]">
      <mgl-geojson-source id="points-source">
        @for (point of points(); track point.id) {
          <mgl-feature
            [id]="point.id"
            [geometry]="point.geometry"
            [properties]="point.properties"
          />
        }
      </mgl-geojson-source>

      <mgl-layer
        id="points"
        type="circle"
        source="points-source"
        [paint]="{
          'circle-radius': 10,
          'circle-color': ['get', 'color']
        }"
      />
    </mgl-map>

    <button (click)="addPoint()">Add Point</button>
  `,
  imports: [MapComponent, GeoJSONSourceComponent, FeatureComponent, LayerComponent]
})
export class FeatureDemoComponent {
  readonly points = signal<Array<{ 
    id: number;
    geometry: GeoJSON.Point;
    properties: Record<string, any>; 
  }>>([
    { id: 1, geometry: { type: 'Point', coordinates: [-122.4, 37.8] }, properties: { color: 'red' } },
    { id: 2, geometry: { type: 'Point', coordinates: [-122.41, 37.81] }, properties: { color: 'blue' } }
  ]);

  addPoint(): void {
    const newId = this.points().length + 1;
    this.points.update(pts => [...pts, {
      id: newId,
      geometry: { type: 'Point', coordinates: [-122.4 + Math.random() * 0.02, 37.8 + Math.random() * 0.02] },
      properties: { color: 'green' }
    }]);
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.