@chaosity/location-client-react 0.1.8 → 0.1.10

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/dist/hooks/useMapLanguage.d.ts

@@ -3,7 +3,7 @@
  * Using a structural type avoids maplibre-gl version conflicts between packages.
  */
 interface MapLike {
-    isStyleLoaded(): boolean;
+    isStyleLoaded(): boolean | void;
     on(event: string, listener: (...args: unknown[]) => void): void;
     off(event: string, listener: (...args: unknown[]) => void): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaosity/location-client-react",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "React bindings for Chaosity Location Service client",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/chaosity-io/location-service-client-react.git"
+    "url": "git+https://github.com/chaosity-io/location-service-client-react.git"
   },
   "homepage": "https://github.com/chaosity-io/location-service-client-react",
   "bugs": {