@centralkg/map-react

Maps of Kyrgyzstan for React and Next.js — an interactive map as JSX, with markers, lines, clustering and a ready layer panel.

npm i @centralkg/map-react

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 { Map, Marker, Polyline, Cluster } from "@centralkg/map-react";

<Map apiKey="ck_map_…" center={[74.6, 41.3]} zoom={7} style={{ height: 540 }}>
  <Cluster>
    {places.map((p) => (
      <Marker key={p.id} coordinates={[p.lng, p.lat]} onClick={() => select(p.id)} />
    ))}
  </Cluster>

  <Polyline coordinates={route} color="#2563eb" width={4} />
</Map>

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

Components

<Map> — the map itself; children render once it is ready. Props: apiKey, center, zoom, dark, minZoom, maxZoom, maxBounds, bounds, pitch, bearing, interactive, navigationControl, geolocateControl, hash, className, style, onLoad, onClick, onMoveEnd, mapRef. Hooks: useMap(), useMapReady(). Already have a map instance? Wrap children in <MapProvider map={…}>.

<Marker> — a pin, an image via icon, or any React children. Props: coordinates, color, size, icon, anchor, offset, rotation, draggable, onClick, onDragEnd.

<Polyline> — a line or a route. Props: coordinates, color, width, opacity, dash, outline, onClick, onHover.

<Cluster> — groups nearby <Marker> children as you zoom out. Props: radius, maxZoom, color, renderCluster, onClusterClick.

<LayerPanel> with useLayerEngine — lets users show and hide base layers and POI categories, and remembers their choice.

Next.js

The map needs a browser, so render it in a Client Component:

"use client";
import { Map, Marker } from "@centralkg/map-react";

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 · Vue 3 · Angular · React Native

License

MIT