@centralkg/map-vue

@centralkg/map-vue

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

npm i @centralkg/map-vue

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

<script setup lang="ts">
import { Map, Marker, Polyline, Cluster } from "@centralkg/map-vue";

const places = [{ coordinates: [74.59, 42.87], data: { id: 1 } }];
const route = [[74.5, 42.8], [74.7, 42.9]];
</script>

<template>
  <Map apiKey="ck_map_…" :center="[74.6, 41.3]" :zoom="7" :style="{ height: '540px' }">
    <Cluster :points="places" @marker-click="(p) => select(p)" />
    <Polyline :coordinates="route" color="#2563eb" :width="5" />
    <Marker :coordinates="[74.59, 42.87]" color="#e11" @click="onPin" />
  </Map>
</template>

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

Components

<Map> — the map itself; the default slot renders once it is ready. The map is drawn in the style of map.central.kg (light, or dark with dark); pass mapStyle for your own.

Props: apiKey, center, zoom, dark, minZoom, maxZoom, maxBounds, bounds, pitch, bearing, interactive, navigationControl, geolocateControl, hash. Emits: load, click, moveend. Composable useMap() for descendants, or grab the instance through a template ref.

<Marker> — a pin, an image via icon, or your own markup in the default slot. Props: coordinates, color, size, icon, anchor, offset, rotation, draggable. Emits: click, dragend.

<Polyline> — a line or a route. Props: coordinates, color, width, opacity, dash, outline. Emits: click, hover.

<Cluster> — groups nearby points as you zoom out. Props: points ({ coordinates, icon?, color?, size?, data? }[]), radius, maxZoom, color. Emits: marker-click, cluster-click.

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

License

MIT