@chaosity/location-client-react 0.1.9 → 0.1.12

package/README.md

@@ -66,6 +66,42 @@ function SearchComponent() {
 }
 ```
 
+## Map Utilities
+
+### useMapLanguage
+
+React hook that keeps map label language in sync. Automatically reapplies after `map.setStyle()` calls (e.g. when switching color schemes or terrain).
+
+```tsx
+import { useMapLanguage } from '@chaosity/location-client-react'
+
+function MapComponent() {
+  const [mapInstance, setMapInstance] = useState<maplibregl.Map | null>(null)
+  const [language, setLanguage] = useState('en')
+
+  // Keeps labels in sync — zero API calls for language changes
+  useMapLanguage(mapInstance, language)
+
+  useEffect(() => {
+    const map = new maplibregl.Map({ /* ... */ })
+    map.once('load', () => setMapInstance(map))
+    return () => map.remove()
+  }, [])
+
+  return (
+    <>
+      <select value={language} onChange={(e) => setLanguage(e.target.value)}>
+        <option value="en">English</option>
+        <option value="fr">Français</option>
+        <option value="de">Deutsch</option>
+        <option value="ja">日本語</option>
+      </select>
+      <div ref={mapContainer} />
+    </>
+  )
+}
+```
+
 ## API Reference
 
 ### LocationClientProvider
@@ -118,9 +154,13 @@ No manual token management needed. The `client` always uses a valid token.
 ```tsx
 'use client'
 
-import { useEffect, useRef } from 'react'
-import { useLocationClient } from '@chaosity/location-client-react'
-import { GeoPlaces, createTransformRequest } from '@chaosity/location-client'
+import { useEffect, useRef, useState } from 'react'
+import { useLocationClient, useMapLanguage } from '@chaosity/location-client-react'
+import {
+  GeoPlaces,
+  fetchMapStyle,
+  createTransformRequest,
+} from '@chaosity/location-client'
 import maplibregl from 'maplibre-gl'
 import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder'
 
@@ -129,45 +169,54 @@ const API_URL = process.env.NEXT_PUBLIC_LOCATION_API_URL!
 export default function MapComponent() {
   const mapContainer = useRef<HTMLDivElement>(null)
   const map = useRef<maplibregl.Map | null>(null)
+  const [mapInstance, setMapInstance] = useState<maplibregl.Map | null>(null)
+  const [language, setLanguage] = useState('en')
   const { client, getToken, loading, error } = useLocationClient()
 
+  // Keeps map labels in sync with language — reapplies after every setStyle() call
+  useMapLanguage(mapInstance, language)
+
   useEffect(() => {
     if (!mapContainer.current || map.current || loading || !client) return
 
-    const token = getToken()
-    if (!token) return
-
-    const mapInstance = new maplibregl.Map({
-      container: mapContainer.current,
-      style: `${API_URL}/maps/Standard/descriptor`,
-      center: [-123.12, 49.28],
-      zoom: 10,
-      transformRequest: createTransformRequest(API_URL, getToken),
-    })
-
-    mapInstance.addControl(new maplibregl.NavigationControl(), 'top-right')
-
-    // GeoPlaces adapter takes the client instance (not raw apiUrl/token)
-    const geoPlaces = new GeoPlaces(client, mapInstance)
-    const geocoder = new MaplibreGeocoder(geoPlaces, {
-      maplibregl,
-      showResultsWhileTyping: true,
-      limit: 30,
-    })
-    mapInstance.addControl(geocoder, 'top-left')
-
-    // The geocoder resolves places internally via searchByPlaceId.
-    // The 'result' event fires with the resolved place feature.
-    geocoder.on('result', (event: any) => {
-      console.log('Selected place:', event.result)
-    })
-
-    map.current = mapInstance
+    ;(async () => {
+      // Fetch style with terrain, 3D buildings, and language baked into the descriptor
+      const style = await fetchMapStyle(API_URL, 'Standard', getToken, {
+        colorScheme: 'Light',
+        terrain: 'Terrain3D',
+        buildings: 'Buildings3D',
+        language,
+      })
+
+      const instance = new maplibregl.Map({
+        container: mapContainer.current!,
+        style,
+        center: [-123.12, 49.28],
+        zoom: 10,
+        maxPitch: 85,
+        transformRequest: createTransformRequest(API_URL, getToken),
+      })
+
+      instance.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right')
+      instance.addControl(new maplibregl.TerrainControl({ source: 'amazon' }), 'top-right')
+
+      const geoPlaces = new GeoPlaces(client, instance)
+      const geocoder = new MaplibreGeocoder(geoPlaces, {
+        maplibregl,
+        showResultsWhileTyping: true,
+        limit: 30,
+      })
+      instance.addControl(geocoder, 'top-left')
+
+      map.current = instance
+      setMapInstance(instance)
+    })()
 
     return () => {
       if (map.current) {
         map.current.remove()
         map.current = null
+        setMapInstance(null)
       }
     }
   }, [client, getToken, loading])
@@ -179,6 +228,18 @@ export default function MapComponent() {
 }
 ```
 
+### useMapLanguage
+
+Hook that keeps map labels in the specified language. Registers a persistent `style.load` listener so language is automatically reapplied after `map.setStyle()` calls.
+
+```tsx
+useMapLanguage(map: MapLike | null, language: string): void
+```
+
+**Parameters:**
+- `map` — MapLibre Map instance, or `null` while the map is initializing.
+- `language` — ISO 639-1 language code (e.g. `'en'`, `'fr'`, `'de'`, `'ja'`, `'zh'`, `'ar'`).
+
 ## Available Commands
 
 All AWS Location Service commands are available through the client:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaosity/location-client-react",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "description": "React bindings for Chaosity Location Service client",
   "type": "module",
   "main": "dist/index.js",
@@ -8,9 +8,10 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "test": "vitest run",
+    "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "prepare": "husky"
   },
   "keywords": [
     "react",
@@ -30,7 +31,7 @@
     "url": "https://github.com/chaosity-io/location-service-client-react/issues"
   },
   "dependencies": {
-    "@chaosity/location-client": "file:../location-service-client",
+    "@chaosity/location-client": "^0.1.0",
     "debug": "^4.4.3"
   },
   "peerDependencies": {
@@ -47,7 +48,9 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/debug": "^4.1.12",
     "@types/react": "^19.0.0",
+    "@vitest/coverage-v8": "^3.0.0",
     "happy-dom": "^17.0.0",
+    "husky": "^9.0.0",
     "maplibre-gl": "^5.0.0",
     "react": "^19.0.0",
     "typescript": "^5.0.0",

package/dist/hooks/useLocationClient.d.ts

@@ -1,10 +0,0 @@
-import { GeoPlacesClient, ClientConfig } from '@chaosity/location-client';
-export interface UseLocationClientOptions {
-    getConfig: () => Promise<ClientConfig>;
-}
-export declare function useLocationClient(options: UseLocationClientOptions): {
-    config: ClientConfig | null;
-    client: GeoPlacesClient | null;
-    loading: boolean;
-    error: string | null;
-};

package/dist/hooks/useLocationClient.js

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-import { GeoPlacesClient } from '@chaosity/location-client';
-export function useLocationClient(options) {
-    const [config, setConfig] = useState(null);
-    const [client, setClient] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        options.getConfig()
-            .then((cfg) => {
-            setConfig(cfg);
-            setClient(new GeoPlacesClient(cfg));
-            setLoading(false);
-        })
-            .catch((err) => {
-            setError(err instanceof Error ? err.message : 'Failed to initialize client');
-            setLoading(false);
-        });
-    }, []);
-    return { config, client, loading, error };
-}