@centralkg/map-react-native

Maps of Kyrgyzstan for React Native (iOS and Android) — an interactive map with markers, lines and clustering, plus search, routing and travel-time areas.

npm i @centralkg/map-react-native @maplibre/maplibre-react-native
cd ios && pod install

Get an API key

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

const config = { apiKey: "ck_map_…" };

Quick start

import { CentralMap, Marker, Polyline } from "@centralkg/map-react-native";

<CentralMap config={config} center={[74.6, 41.3]} zoom={7} style={{ flex: 1 }}>
  <Marker coordinate={[74.59, 42.87]} color="#e11" onPress={() => select(place)} />
  <Polyline coordinates={[[74.5, 42.8], [74.7, 42.9]]} color="#2563eb" width={5} />
</CentralMap>

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

Components

<CentralMap> — the map itself. Props: config, center, zoom, dark, mapStyle, style, onPress.

<Marker> — a pin, or your own children. Props: coordinate, color, size, anchor, onPress.

<Polyline> — a line or a route. Props: coordinates, color, width, opacity, onPress.

<MarkerCluster> — groups nearby points as you zoom out. Props: points ({ coordinate, id?, properties? }[]), color, radius, maxZoom, onPress.

Places, routes, travel time

import { CentralMapApi } from "@centralkg/map-react-native";

const api = new CentralMapApi(config);

const places = await api.search("Ала-Тоо", { limit: 10 });
const route  = await api.route([74.59, 42.87], [74.85, 42.89], { mode: "car" });
const areas  = await api.isochrone([74.59, 42.87], { minutes: [5, 10, 15] });
const meta   = await api.poiMeta();

Search understands Russian, Kyrgyz and English and tolerates typos. Routing supports car, foot, bike and scooter, and returns distance, duration and turn-by-turn steps.

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

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

License

MIT