ngx-hk-esri v20.0.0

A modern Angular 20 library powered by ArcGIS Maps SDK for JavaScript and Hong Kong vector-tile services Supports Pin-Point, Image, and Simple markers with optional text labels.

Features

• Hong Kong Vector-Tile Basemap & Labels
  Uses VT endpoints:

  • Basemap: https://mapapi.geodata.gov.hk/gs/api/v1.0.0/vt/basemap/WGS84
  • Labels: https://mapapi.geodata.gov.hk/gs/api/v1.0.0/vt/label/hk/tc/WGS84

• Custom Markers

  • Pin Point (custom color & size)
  • Image (PictureMarkerSymbol)
  • Simple circle

• Optional Text Labels
  Place text above, below, or centered on each marker.

• Angular 20+ Ready
  Easy to integrate, Tree-shakable, No side effects.

Installation

npm install ngx-hk-esri @arcgis/core

Add ArcGIS CSS in angular.json:

"styles": [
"src/styles.css",
"node_modules/@arcgis/core/assets/esri/themes/light/main.css"
]

Usage

1. Import Module

import { NgxHkEsriModule } from 'ngx-hk-esri';

@NgModule({
imports: [BrowserModule, NgxHkEsriModule],
bootstrap: [AppComponent]
})
export class AppModule {}

2. Add Component in Template

<ngx-hk-esri
style="height: 80vh; display: block;"
[center]="[114.1694, 22.3193]"
[zoom]="12"
[initialMarkers]="demoMarkers">
</ngx-hk-esri>

3. Provide MarkerConfig[]

import { MarkerConfig } from 'ngx-hk-esri';

demoMarkers: MarkerConfig[] = [
{
id: 'pin-1',
longitude: 113.9185,
latitude: 22.3080,
iconConfig: { type: 'pin', pinColor: '#FF5722', pinSize: 24 },
textConfig: { text: 'HK International Airport', placement: 'above', fontSize: 12, color: '#fff', offsetY: 16 },
popupTemplate: 'HK International Airport'
},
{
id: 'image-1',
longitude: 113.9185,
latitude: 22.3080,
iconConfig: { type: 'image', url: 'assets/icons/airport.png', width: 40, height: 40 },
textConfig: { text: 'Airport', placement: 'below', fontSize: 10, color: '#000', haloColor: '#fff', haloSize: 2, offsetY: 12 },
popupTemplate: 'HK International Airport'
}
];

API

`` Inputs

| Input | Type | Default | Description | | ---------------- | -------------------- | ---------------------- | ---------------------------------------------- | | center | [number,number] | [114.1694,22.3193] | Initial map center (longitude, latitude). | | zoom | number | 11 | Initial zoom level. | | initialMarkers | MarkerConfig[] | [] | Array of markers to load on init. | | showControls | boolean | true | Show “Clear All” button overlay. |

MarkerConfig

| Property | Type | Required | Description | | --------------- | -------------------- | -------- | -------------------------------------------------------------- | | id | string | No | Unique identifier for marker (for removal). | | longitude | number | Yes | Marker longitude. | | latitude | number | Yes | Marker latitude. | | iconConfig | MarkerIconConfig | No | Marker icon settings (pin/image/simple). | | textConfig | MarkerTextConfig | No | Optional text label settings. | | popupTemplate | string | No | HTML content for popup. |

MarkerIconConfig

| Property | Type | Description | | ----------- | --------------------------- | --------------------------------------- | | type | 'pin' \| 'image' \| 'simple' | Icon type. | | pinColor | string | Pin fill color (for type: 'pin'). | | pinSize | number | Pin diameter in px. | | url | string | Image URL (for type: 'image'). | | width | number | Image width in px. | | height | number | Image height in px. | | anchorX | number | Horizontal offset (px) for image. | | anchorY | number | Vertical offset (px) for image. | | color | string | Circle fill color (for type: 'simple').| | outline | {color,width} | Circle outline for simple marker. |

MarkerTextConfig

| Property | Type | Description | | ------------ | ---------------------------------- | ------------------------------------------------------ | | text | string | Label text. | | fontSize | number | Font size (px). | | fontFamily | string | Font family. | | color | string | Text fill color. | | haloColor | string | Halo outline color. | | haloSize | number | Halo width (px). | | offsetX | number | Horizontal text offset (px). | | offsetY | number | Vertical text offset (px), positive moves up if placement: 'above'. | | placement | 'center' \| 'above' \| 'below' | Label placement relative to marker. |

Development & Build

# Build library
ng build ngx-hk-esri

# Serve demo app
cd projects/demo-app
ng serve

Publish to npm

cd dist/ngx-hk-esri
npm publish --access public

License

MIT