mpd-map-layers

A modular, reusable map layers plugin for Angular applications powered by MapLibre GL and PMTiles vector tiles.

CDN Demo

You can try the live demo directly using the CDN bundle: 👉 Live CDN Demo on unpkg

Installation

npm install mpd-map-layers

Features

• Protocol Registration: Integrated PMTiles protocol handler preventing duplicate registrations.
• Dynamic Layer Rendering: Handles vector tiles (PMTiles) and GeoJSON sources automatically based on configurations.
• Auto KP/Line Text Labels: Places labels over lines and points automatically.
• Tailwind UI Control Panel: Reusable Accordion-style layout toggler for layers and tag groups.

Quick Start

1. Import the standalone component and services in your component:

import { Component, OnInit } from '@angular/core';
import { MapLayerService, OverlayLayer, MapLayerPanelComponent } from 'mpd-map-layers';
import maplibregl from 'maplibre-gl';

@Component({
  selector: 'app-map-view',
  standalone: true,
  imports: [MapLayerPanelComponent],
  template: `
    <div class="relative w-full h-full">
      <div id="map" class="w-full h-full"></div>
      
      <!-- Floating Panel -->
      <lib-map-layer-panel
        [layers]="mapLayers"
        class="absolute top-4 left-4 z-10"
        (layerToggle)="onLayerToggle($event)"
      ></lib-map-layer-panel>
    </div>
  `
})
export class MapViewComponent implements OnInit {
  map!: maplibregl.Map;
  mapLayers: OverlayLayer[] = [
    {
      id: 'pipeline-row',
      name: 'Centerline Pipeline',
      type: 'line',
      s3_url: 'https://example.com/row.pmtiles',
      paint: { 'line-color': '#fb923c', 'line-width': 4 },
      visible: true
    }
  ];

  constructor(private mapLayerService: MapLayerService) {}

  ngOnInit() {
    this.mapLayerService.registerPMTilesProtocol();
  }

  initMap() {
    this.map = new maplibregl.Map({
      container: 'map',
      style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
    });

    this.map.on('load', () => {
      this.mapLayers.forEach(l => this.mapLayerService.applyOverlayLayer(this.map, l));
    });
  }

  onLayerToggle(event: { id: string; active: boolean }) {
    this.mapLayerService.toggleLayerVisibility(this.map, event.id, event.active);
  }
}