@yarrow-uz/yarrow-map-web-sdk 1.0.42 → 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.
@@ -177,6 +131,53 @@ 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
@@ -230,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.
@@ -951,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 |
@@ -1014,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`