@centralkg/map-angular

Maps of Kyrgyzstan for Angular — an interactive map as standalone components, with markers, lines and clustering.

npm i @centralkg/map-angular

Get an API key

Sign in at auth.central.kg and create a key for the map service — it looks like ck_map_….

Quick start

import { Component } from "@angular/core";
import { CENTRAL_MAP_COMPONENTS } from "@centralkg/map-angular";

@Component({
  standalone: true,
  imports: [CENTRAL_MAP_COMPONENTS],
  template: `
    <central-map apiKey="ck_map_…" [center]="[74.6, 41.3]" [zoom]="7"
                 style="display:block;height:540px">
      <cmap-cluster [points]="places" (markerClick)="onPick($event)" />
      <cmap-polyline [coordinates]="route" color="#2563eb" [width]="5" />
      <cmap-marker [coordinates]="[74.59, 42.87]" color="#e11" (markerClick)="onPin()" />
    </central-map>
  `,
})
export class MapPage {
  places = [{ coordinates: [74.59, 42.87], data: { id: 1 } }];
  route = [[74.5, 42.8], [74.7, 42.9]];
  onPick(e: { point: any; index: number }) { /* … */ }
}

Coordinates are always [longitude, latitude] — longitude first. Give <central-map> an explicit height.

Two settings in angular.json

A map is heavier than Angular's default bundle limit, so raise the budget and allow the two CommonJS dependencies — otherwise ng build stops with "bundle initial exceeded maximum budget":

"build": {
  "options": {
    "allowedCommonJsDependencies": ["maplibre-gl", "supercluster"]
  },
  "configurations": {
    "production": {
      "budgets": [{ "type": "initial", "maximumWarning": "3mb", "maximumError": "5mb" }]
    }
  }
}

Components

<central-map> — the map itself. Inputs: apiKey, center, zoom, dark, minZoom, maxZoom, maxBounds, bounds, pitch, bearing, interactive, navigationControl, geolocateControl, hash. Outputs: load, mapClick, moveEnd. getMap() returns the instance.

<cmap-marker> — a pin or an image via icon. Inputs: coordinates, color, size, icon, anchor, offset, rotation, draggable. Outputs: markerClick, dragEnd.

<cmap-polyline> — a line or a route. Inputs: coordinates, color, width, opacity, dash, outline. Outputs: lineClick, hover.

<cmap-cluster> — groups nearby points as you zoom out. Inputs: points ({ coordinates, icon?, color?, size?, data? }[]), radius, maxZoom, color. Outputs: markerClick, clusterClick.

CENTRAL_MAP_COMPONENTS imports all of them at once, or import components one by one.

Places, routes, travel time

Search, routing and travel-time areas are available over HTTP at https://map.central.kg/api — see the docs below.

Full documentation with live examples: map.central.kg/docs

Other platforms: Vanilla JS · React / Next.js · Vue 3 · React Native

License

MIT