UZMap JS SDK

A lightweight JavaScript SDK for integrating UZ Map Platform into your web applications. Built on MapLibre GL JS with support for geocoding, routing, and places search.

Installation

npm install uzmap-js

Quick Start

import { UZMap } from 'uzmap-js';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new UZMap({
  container: 'map',
  apiKey: 'YOUR_API_KEY',
  center: [69.24, 41.29],
  zoom: 12
});

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | container | string | HTMLElement | required | Container element or ID | | apiKey | string | required | Your API key | | apiBaseUrl | string | window.location.origin | API server URL | | center | [lng, lat] | [69.24, 41.29] | Initial map center | | zoom | number | 12 | Initial zoom level | | style | string | 'default' | Map style name | | lang | 'uz' | 'ru' | 'en' | 'en' | Language for labels |

Features

Geocoding

// Forward geocoding
const results = await map.geocode('Tashkent');
console.log(results);
// [{ display_name: 'Tashkent', lat: 41.29, lng: 69.24, ... }]

// Reverse geocoding
const address = await map.reverse(41.29, 69.24);

// Autocomplete
const suggestions = await map.autocomplete('Tash');

Routing

const route = await map.route(
  [69.24, 41.29],  // from [lng, lat]
  [69.30, 41.35],  // to [lng, lat]
  'car'            // mode: 'car' | 'bicycle' | 'foot'
);

// Draw route on map
map.drawRoute(route, { color: '#ff6b6b', width: 4 });

Places Search

const places = await map.places(41.29, 69.24, {
  type: 'restaurant',
  radius: 1000,
  limit: 20
});

Markers

const marker = map.addMarker(41.29, 69.24, {
  color: '#ff0000',
  popup: '<h3>Hello!</h3>',
  draggable: true
});

Map Controls

// Fly to location
map.flyTo(41.29, 69.24, 15);

// Get current center
const [lng, lat] = map.getCenter();

// Get current zoom
const zoom = map.getZoom();

// Change language
map.setLanguage('uz');

// Access MapLibre instance
const maplibreMap = map.getMap();

GeoJSON Layers

map.addGeoJSON('my-layer', geojsonData, {
  color: '#088',
  opacity: 0.8
});

CDN Usage

<link href="https://your-cdn.com/uzmap.css" rel="stylesheet" />
<script src="https://your-cdn.com/uzmap.min.js"></script>

<div id="map" style="width: 100%; height: 500px;"></div>

<script>
  const map = new UZMap({
    container: 'map',
    apiKey: 'YOUR_API_KEY'
  });
</script>

TypeScript Support

Full TypeScript definitions are included. Import types directly:

import { UZMap, UZMapOptions, GeocodingResult, RouteResult, Place } from 'uzmap-js';

License

MIT