@centralkg/map

Maps of Kyrgyzstan for plain JavaScript and TypeScript — draw an interactive map, put markers, lines and clustered points on it, search places, build routes.

npm i @centralkg/map

Get an API key

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

createMap({ container: "map", apiKey: "ck_map_…" });

Quick start

<div id="map" style="height: 540px"></div>

import { createMap, MapMarker, MapPolyline, MarkerCluster } from "@centralkg/map";

const map = createMap({
  container: "map",
  apiKey: "ck_map_…",
  center: [74.6, 41.3],   // [longitude, latitude]
  zoom: 7,
});

map.on("load", () => {
  new MapMarker(map, { coordinates: [74.59, 42.87], color: "#e11", onClick: () => open(place) });

  new MapPolyline(map, { coordinates: [[74.5, 42.8], [74.7, 42.9]], color: "#2563eb", width: 5 });

  new MarkerCluster(map, {
    points: places.map((p) => ({ coordinates: [p.lng, p.lat], data: p })),
    onMarkerClick: (pt) => select(pt.data),
  });
});

Coordinates are always [longitude, latitude] — longitude first.

Using a framework?

| | Package | Components | |---|---|---| | React / Next.js | @centralkg/map-react | <Map> <Marker> <Polyline> <Cluster> <LayerPanel> | | Vue 3 | @centralkg/map-vue | <Map> <Marker> <Polyline> <Cluster> | | Angular | @centralkg/map-angular | <central-map> <cmap-marker> <cmap-polyline> <cmap-cluster> | | React Native | @centralkg/map-react-native | <CentralMap> <Marker> <Polyline> |

Each of them re-exports this package, so one install is enough.

API

createMap(options) — creates the map.

| Option | | |---|---| | container | element or its id | | apiKey | your ck_map_… key | | center, zoom | starting view; KG_CENTER is the center of Kyrgyzstan | | dark | dark theme | | minZoom, maxZoom, maxBounds, bounds | limits and initial fit | | pitch, bearing, maxPitch | tilt and rotation | | interactive, navigationControl, geolocateControl, attribution, hash | controls and behaviour |

whenReady(map, callback) — runs the callback once the map is ready.

new MapMarker(map, options) — a pin, your own icon image, or any DOM element. Options: coordinates, color, icon, element, size, rotation, draggable, offset, onClick, onDragEnd. Methods: setCoordinates, setRotation, setDraggable, setOffset, remove.

new MapPolyline(map, options) — a line or route. Options: coordinates, color, width, opacity, dash, outline, onClick, onHover. Methods: setCoordinates, setStyle, remove.

new MarkerCluster(map, options) — many points that group together as you zoom out. Options: points, radius, maxZoom, createMarker, createCluster, onMarkerClick, onClusterClick. Methods: setPoints, remove.

Layer control — LayerEngine with defineCatalog / buildPoiSection lets users show and hide base layers and POI categories, and remembers their choice. A ready-made panel comes with the React package as <LayerPanel>.

Places, routes, travel time

The same service answers over HTTP at https://map.central.kg/api:

| | | |---|---| | GET /api/search?q=аптека | search places, streets and addresses (Russian, Kyrgyz, English, typo-tolerant) | | GET /api/route?from=lat,lon&to=lat,lon&mode=car | route with distance, duration and turn-by-turn steps (car, foot, bike, scooter) | | GET /api/isochrone?point=lat,lon&mode=car&minutes=5,10,15 | how far you can get in N minutes | | GET /api/poi-meta | POI categories and their colors |

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

License

MIT