@yarrow-uz/yarrow-map-web-sdk 1.0.41 → 1.0.43

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)
@@ -52,53 +53,6 @@ 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';
-
-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.
-
 ### Initialization
 
 To get started, you need to create an instance of `YarrowMap`. This requires a configuration object that specifies the container element, center coordinates, and zoom level.
@@ -140,7 +94,7 @@ const mapConfig = new YarrowMapConfig({
   theme,        // 'light' | 'dark' (default: 'light')
   cache,        // { enabled?: boolean, lifespanDays?: number }
   brandBadgePosition, // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-  controls      // { enabled?: boolean, position?: 'left'|'right', zoom?: boolean, compass?: boolean }
+  controls      // { enabled?: boolean, position?: 'left'|'left-top'|'left-bottom'|'right'|'right-top'|'right-bottom', zoom?: boolean, compass?: boolean }
 });
 ```
 
@@ -163,7 +117,7 @@ const mapConfig = new YarrowMapConfig({
   brandBadgePosition: 'top-right',
   controls: {
     enabled: true,         // Yarrow controls are OFF by default
-    position: 'right',     // Optional side of the map
+    position: 'right-bottom', // Optional placement: left/left-top/left-bottom/right/right-top/right-bottom
     zoom: true,            // Optional
     compass: true          // Optional
   },
@@ -175,6 +129,55 @@ 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,
+        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
@@ -228,6 +231,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.
@@ -928,7 +942,13 @@ constructor(
     brandBadgePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     controls?: {
       enabled?: boolean;      // default: false
-      position?: 'left' | 'right';
+      position?:
+        | 'left'
+        | 'left-top'
+        | 'left-bottom'
+        | 'right'
+        | 'right-top'
+        | 'right-bottom';
       zoom?: boolean;         // default: true
       compass?: boolean;      // default: true
     };
@@ -943,6 +963,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 |
@@ -1006,7 +1027,7 @@ interface SearchOptions {
 
 ## Version Information
 
-- **Current Version**: 1.0.41
+- **Current Version**: 1.0.43
 - **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`