@yarrow-uz/yarrow-map-web-sdk 1.0.42 → 1.0.44

package/CHANGELOG.md

@@ -0,0 +1,55 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+
+## [1.0.44] - 2026-02-28
+
+### Added
+- Added `apiKey` as a required configuration option.
+- Added `setYarrowApiKey()` and `getYarrowApiKey()` helper functions for API key management.
+- Added axios interceptor to automatically append `api_key` to every request.
+- Added `CHANGELOG.md` to package files for npm distribution.
+
+### Changed
+- Made `apiKey` required in `YarrowMapConfig`, `YarrowMapReactConfig`, and type definitions.
+- Enhanced brand badge and controls appearance with updated CSS properties for improved visual quality.
+- Updated `README.md` with API reference, local development instructions, and apiKey requirement.
+- Removed deprecated legacy constructor signature from YarrowMapConfig (positional arguments).
+
+### Fixed
+- Corrected layer type handling in YarrowMap class for improved functionality.
+
+## [1.0.43] - 2026-02-25
+
+### Added
+- `changeBrandBadgePosition(position)` API to update the brand badge corner at runtime.
+- Type declaration for `changeBrandBadgePosition(position: BrandBadgePosition)`.
+
+### Changed
+- Reduced brand badge `z-index` from `2147483647` to `1000` for better overlay stacking behavior.
+- Updated `README.md` with runtime brand badge positioning docs and API reference.
+
+## [1.0.42] - 2026-02-20
+
+### Added
+- Support for 6-way controls placement: `left`, `left-top`, `left-bottom`, `right`, `right-top`, `right-bottom`.
+- Automatic controls inset when controls and badge share the same corner, preventing overlap.
+- Dynamic collision recalculation using `ResizeObserver` as badge size changes.
+
+### Changed
+- Migrated brand badge asset from PNG to SVG.
+- Improved dark theme compass needle visibility for controls.
+- Updated controls positioning docs and TypeScript declarations to include new placement options.
+
+## [1.0.41] - 2026-02-19
+
+### Added
+- `addSource(sourceId, data)` for explicit GeoJSON source management.
+- `updateSourceData(sourceId, data)` to update existing source data (or create source if missing).
+- `setFeatureState(featureIdentifier, state)` to support per-feature interactive state.
+- `queryRenderedFeatures(geometryOrOptions?, options?)` passthrough support, including `{ layers: [...] }`.
+
+### Changed
+- `addLayer(...)` now supports `options.sourceId` and `options.filter`.
+- `addLayer(...)` paint typing now accepts full expression-based paint values from MapLibre style spec.
+- API docs updated in `README.md` for new source/layer/state/query capabilities.

package/README.md

@@ -6,12 +6,13 @@ This document provides a comprehensive guide to using the Yarrow Map Web SDK for
 
 - [Getting Started](#getting-started)
   - [Installation](#installation)
-  - [React Usage](#react-usage)
   - [Initialization](#initialization)
   - [Configuration Options](#configuration-options)
+  - [React Usage](#react-usage)
 - [Basic Map Manipulation](#basic-map-manipulation)
   - [Changing the Map Style](#changing-the-map-style)
   - [Changing the Map Theme](#changing-the-map-theme)
+  - [Changing Brand Badge Position](#changing-brand-badge-position)
   - [Moving the Map View](#moving-the-map-view)
   - [Changing Background Color](#changing-background-color)
 - [Handling Events](#handling-events)
@@ -39,6 +40,7 @@ This document provides a comprehensive guide to using the Yarrow Map Web SDK for
 - [Advanced Features](#advanced-features)
   - [Custom Icons and Styling](#custom-icons-and-styling)
   - [Performance Optimization](#performance-optimization)
+- [API Reference](#api-reference)
 
 ---
 
@@ -52,52 +54,9 @@ First, add the Yarrow Map Web SDK to your project using your preferred package m
 npm install @yarrow-uz/yarrow-map-web-sdk
 ```
 
-### React Usage
-
-React APIs are exported from the `@yarrow-uz/yarrow-map-web-sdk/react` subpath.
-
-```tsx
-import { YarrowMapView } from '@yarrow-uz/yarrow-map-web-sdk/react';
-
-export const MapScreen = () => {
-  return (
-    <YarrowMapView
-      config={{
-        center: [69.2401, 41.2995],
-        zoom: 12,
-        brandBadgePosition: 'bottom-left',
-      }}
-      style={{ width: '100%', height: '600px' }}
-    />
-  );
-};
-```
-
-You can also use the hook for custom composition:
-
-```tsx
-import { useYarrowMap } from '@yarrow-uz/yarrow-map-web-sdk/react';
+### Local Development
 
-export const MapScreen = () => {
-  const { containerRef, isReady, error } = useYarrowMap({
-    config: {
-      center: [69.2401, 41.2995],
-      zoom: 12,
-      brandBadgePosition: 'bottom-right',
-    },
-  });
-
-  return (
-    <div>
-      <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
-      {isReady && <p>Map ready</p>}
-      {error && <p>Failed to initialize map</p>}
-    </div>
-  );
-};
-```
-
-**SSR note:** The React integration initializes the map only on the client side.
+When running your application locally, serve it on **port 8080** to avoid CORS issues with the map API. Running on any other port will cause CORS errors.
 
 ### Initialization
 
@@ -134,6 +93,7 @@ The `YarrowMapConfig` class accepts a single configuration object:
 const mapConfig = new YarrowMapConfig({
   container,    // string | HTMLElement
   center,       // [number, number] - [lng, lat]
+  apiKey,       // string - Required, get from https://dashboard.yarrow.uz/
   zoom,         // number (default: 10)
   minZoom,      // number (default: 0)
   maxZoom,      // number (default: 19)
@@ -155,6 +115,7 @@ const mapConfig = new YarrowMapConfig({
   zoom: 12,
   minZoom: 5,
   maxZoom: 18,
+  apiKey: 'YOUR_API_KEY',   // Required - get from https://dashboard.yarrow.uz/
   theme: 'dark',
   cache: {
     enabled: true,         // Enable local persistent cache (default: false)
@@ -177,6 +138,54 @@ yarrowMap.init().then(() => {
 
 When controls and the brand badge are placed in the same corner (for example `right-bottom` with `brandBadgePosition: 'bottom-right'`), the SDK automatically adds spacing so they do not overlap.
 
+### React Usage
+
+React APIs are exported from the `@yarrow-uz/yarrow-map-web-sdk/react` subpath.
+
+```tsx
+import { YarrowMapView } from '@yarrow-uz/yarrow-map-web-sdk/react';
+
+export const MapScreen = () => {
+  return (
+    <YarrowMapView
+      config={{
+        center: [69.2401, 41.2995],
+        zoom: 12,
+        apiKey: 'YOUR_API_KEY',   // Required - get from https://dashboard.yarrow.uz/
+        brandBadgePosition: 'bottom-left',
+      }}
+      style={{ width: '100%', height: '600px' }}
+    />
+  );
+};
+```
+
+You can also use the hook for custom composition:
+
+```tsx
+import { useYarrowMap } from '@yarrow-uz/yarrow-map-web-sdk/react';
+
+export const MapScreen = () => {
+  const { containerRef, isReady, error } = useYarrowMap({
+    config: {
+      center: [69.2401, 41.2995],
+      zoom: 12,
+      brandBadgePosition: 'bottom-right',
+    },
+  });
+
+  return (
+    <div>
+      <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
+      {isReady && <p>Map ready</p>}
+      {error && <p>Failed to initialize map</p>}
+    </div>
+  );
+};
+```
+
+**SSR note:** The React integration initializes the map only on the client side.
+
 ## Basic Map Manipulation
 
 ### Changing the Map Style
@@ -210,6 +219,7 @@ const mapConfig = new YarrowMapConfig({
   zoom: 12,
   minZoom: 5,
   maxZoom: 18,
+  apiKey: 'YOUR_API_KEY',   // Required - get from https://dashboard.yarrow.uz/
   theme: 'dark', // Set initial theme to dark
 });
 ```
@@ -230,6 +240,17 @@ await yarrowMap.changeTheme('light');
 - Preserves custom icons and markers
 - Seamless theme transition
 
+### Changing Brand Badge Position
+
+You can set the initial badge position in config or change it dynamically after map initialization.
+
+```javascript
+// Move badge to the top-right corner
+yarrowMap.changeBrandBadgePosition('top-right');
+
+// Other values: 'top-left' | 'bottom-left' | 'bottom-right'
+```
+
 ### Moving the Map View
 
 You can programmatically move the map to a new location or fit it to a specific geographic area.
@@ -951,6 +972,7 @@ constructor(
 | `init()` | None | `Promise<void>` | Initialize the map with styles and icons |
 | `changeStyles(styleType?)` | `styleType?: 'satellite' \| 'hybrid'` | `Promise<any>` | Change map style |
 | `changeTheme(theme)` | `theme: 'light' \| 'dark'` | `Promise<any>` | Switch between light and dark themes |
+| `changeBrandBadgePosition(position)` | `position: 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `BrandBadgePosition` | Change brand badge corner position at runtime |
 | `zoomTo(lat, lng, zoom)` | `lat: number, lng: number, zoom: number` | `void` | Fly to specific coordinates |
 | `fitBounds(data)` | `data: GeoJSON` | `void` | Fit map to show all features |
 | `getBoundingBox(data)` | `data: GeoJSON` | `BoundingBox` | Calculate bounding box of features |
@@ -1014,11 +1036,10 @@ interface SearchOptions {
 
 ## Version Information
 
-- **Current Version**: 1.0.41
+- **Current Version**: 1.0.44
 - **Dependencies**: maplibre-gl ^5.5.0, axios ^1.7.9
-- **Repository**: https://git.yarrow.uz/yarrow-sdk/frontend/yarrow-map-web-sdk
 - **Changelog**: `CHANGELOG.md`
 
 ## Support
 
-For issues, questions, or contributions, please visit the project repository or contact the Yarrow development team.
+For issues, questions, or contributions, contact the Yarrow development team.

package/dist/config/main.d.ts

@@ -1,3 +1,5 @@
 declare const YARROW_MAP_URL: string;
 export { YARROW_MAP_URL };
+export declare function setYarrowApiKey(apiKey: string): void;
+export declare function getYarrowApiKey(): string;
 //# sourceMappingURL=main.d.ts.map