Skip to content

Map SDK

@agastyadreamspty/map-sdk is the reusable Angular SDK for map filters, legends, parcel search, boundary rendering, layer visibility, and custom map integration.

It is intended to be consumed by apps like SMOC without copying the warehouse map implementation itself.

What the SDK gives you

  • a full-page map explorer host
  • filters as reusable widgets
  • legend controls as a reusable widget
  • parcel search as a reusable widget
  • zoom and visibility status widgets
  • API-only access through MapSdkDirectApiFacade, MapSdkRequestStateTracker, MapSdkRequestViewStateHelper, MaplibreGlParcelTileHelper, MapboxGlParcelTileHelper, OpenLayersParcelTileHelper, MapSdkService, and LocationService
  • a custom renderer adapter for non-MapLibre maps
  • a backend adapter for custom API integration
  • a typed event model for layer and selection events
  • theming through CSS variables

Quick Start

Install the package:

npm install @agastyadreamspty/map-sdk

Bootstrap it in Angular:

import { provideMapSdk } from '@agastyadreamspty/map-sdk';

export const appConfig = {
  providers: [
    provideMapSdk({
      runtimeConfig: {
        apiBaseUrl: 'http://localhost:8080/api',
        legendEndpoint: '/map/legend',
        defaultIncludeInactive: false
      }
    })
  ]
};

Render the full host:

<dw-map-sdk-host
  [config]="mapFeatureConfig"
  [showLegend]="true"
  [showSearch]="true"
  class="smoc-map-theme"
/>
  1. API Reference
  2. Integration Guide
  3. Theming Guide

Examples

See the dedicated Examples page for runnable consumer samples.

Default Runtime Contract

The SDK fetches its own map data from the configured backend.

Default URLs:

  • local: http://localhost:8080/api
  • production: https://api-warehouse.idti.dev/api

The SDK controls:

  • legend loading
  • boundary visibility
  • parcel search
  • zoom gating
  • popup normalization
  • loading indicators

The consumer controls:

  • page layout
  • shell chrome
  • custom wrappers
  • app-specific styling
  • custom map vendor integrations when using the renderer adapter

Public Entry Points

The most important consumer-safe exports are:

  • MapFeatureConfig
  • MapFeatureAdapter
  • MapFeatureRendererAdapter
  • MapSdkService
  • MapFeatureHttpDataSource
  • FeatureEventBus
  • provideMapSdk(...)
  • MapSdkHostComponent
  • MapSdkFiltersComponent
  • MapSdkLegendPanelComponent
  • MapSdkParcelSearchComponent
  • MapSdkZoomLayerStatusComponent

Extension Strategy

The SDK is composable by design.

  • use the full host for the default experience
  • use widgets when you want to place controls around your own canvas
  • use the adapter and renderer contracts when your app owns the map vendor

The full-page host supports native Angular content projection slots for custom chrome:

  • mapSdkHeader
  • mapSdkSidebar
  • mapSdkFooter

If you do not need the projected slots, you can still wrap the exported widgets in your own Angular shell and forward inputs and outputs into your own state.

If you only want API access, inject MapSdkDirectApiFacade for the one-stop path, use MapSdkRequestStateTracker to guard stale responses, use MapSdkRequestViewStateHelper for loading and error UI state, or inject MapSdkService and LocationService directly if you want the lower-level pieces from the SDK root package.