GeoJSON

Render polygons and lines from GeoJSON with declarative hover states.

Basic GeoJSON

ng-map-geojson accepts a URL or an inline GeoJSON object. On a blank basemap it uses theme-aware monochrome defaults — here rendering world country borders.

import { Component } from '@angular/core';
import { MapComponent, MapGeoJSONComponent } from 'ng-mapcn';

@Component({
  selector: 'app-basic-geojson',
  standalone: true,
  imports: [MapComponent, MapGeoJSONComponent],
  template: `
    <div class="h-[420px]">
      <!-- world borders on a blank canvas; pass a URL or a GeoJSON object -->
      <ng-map [blank]="true" [center]="[0, 20]" [zoom]="1.2">
        <ng-map-geojson [data]="worldUrl" />
      </ng-map>
    </div>
  `,
})
export class BasicGeojsonComponent {
  readonly worldUrl = 'https://.../ne_110m_admin_0_countries.geojson';
}

Overlay on a Map

Layer GeoJSON over a street basemap with custom paints. Set promoteId and a fillHoverPaint to get declarative hover highlighting via feature-state.

Hover a state

import { Component, signal } from '@angular/core';
import { MapComponent, MapGeoJSONComponent, MapGeoJSONEvent } from 'ng-mapcn';

@Component({
  selector: 'app-geojson-overlay',
  standalone: true,
  imports: [MapComponent, MapGeoJSONComponent],
  template: `
    <div class="h-[420px]">
      <ng-map [center]="[-96, 38]" [zoom]="3.3">
        <ng-map-geojson
          [data]="statesUrl"
          promoteId="name"
          [fillPaint]="{ 'fill-color': '#3b82f6', 'fill-opacity': 0.25 }"
          [linePaint]="{ 'line-color': '#3b82f6', 'line-width': 1 }"
          [fillHoverPaint]="{ 'fill-opacity': 0.55 }"
          [interactive]="true"
          (featureHover)="onHover($event)"
        />
      </ng-map>
    </div>
  `,
})
export class GeojsonOverlayComponent {
  readonly statesUrl = 'https://.../us-states.json';
  readonly hovered = signal<string | null>(null);

  onHover(event: MapGeoJSONEvent | null): void {
    this.hovered.set(event ? String(event.feature.properties?.['name']) : null);
  }
}

Arcs Clusters