@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/mapUtils.md

@@ -0,0 +1,132 @@
+# Map utils
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapUtils
+*Captured:* 2025-12-12T14:21:20.394Z
+
+## Map utils
+
+### Example: Example 1
+
+import { useRef, useState } from 'react';
+import { isEqual } from 'es-toolkit/compat';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+export default () => {
+const [zoom, setZoom] = useState(10);
+const [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });
+const mapApiRef = useRef<MapApi>();
+
+const eventListenerMap = {
+[EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
+// Access the Map ViewModel to retrieve its' LookAtData
+// The View model contains all relevant map data like zoom, position or bounding box.
+// Note: Working with the ViewModel directly requires to round zoom values or to exclude
+// other props from position object. Better, use map utils instead.
+const target = event.currentTarget;
+const lookAtData = target.getViewModel().getLookAtData();
+
+console.log({ lookAtData });
+
+// Accessing map utils to retrieve map position, zoom and bounding box.
+// This way, you don't have to deal with here map internals or round zoom values etc.
+const api = mapApiRef.current;
+const mapCenter = api?.utils?.getCenter();
+const mapZoom = api?.utils?.getZoom();
+const mapBoundingBox = api?.utils?.getBounds();
+
+console.log({ mapCenter, mapZoom, mapBoundingBox });
+
+// Check for changed values to update local state or to perform other actions
+const isEqualZoom = isEqual(zoom, mapZoom);
+const isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);
+
+if (!(isEqualPosition && isEqualZoom)) {
+// ... perform some actions
+}
+},
+};
+
+return (
+<Map
+eventListenerMap={eventListenerMap}
+credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+// ... other map properties
+>
+{api => {
+mapApiRef.current = api;
+
+// if needed, render cluster or marker layer here or return null
+return null;
+}}
+</Map>
+);
+};
+
+#### Summary
+
+import { useRef, useState } from 'react';
+import { isEqual } from 'es-toolkit/compat';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+export default () => {
+const [zoom, setZoom] = useState(10);
+const [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });
+const mapApiRef = useRef<MapApi>();
+
+const eventListenerMap = {
+[EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
+// Access the Map ViewModel to retrieve its' LookAtData
+// The View model contains all relevant map data like zoom, position or bounding box.
+// Note: Working with the ViewModel directly requires to round zoom values or to exclude
+// other props from position object. Better, use map utils instead.
+const target = event.currentTarget;
+const lookAtData = target.getViewModel().getLookAtData();
+
+console.log({ lookAtData });
+
+// Accessing map utils to retrieve map position, zoom and bounding box.
+// This way, you don't have to deal with here map internals or round zoom values etc.
+const api = mapApiRef.current;
+const mapCenter = api?.utils?.getCenter();
+const mapZoom = api?.utils?.getZoom();
+const mapBoundingBox = api?.utils?.getBounds();
+
+console.log({ mapCenter, mapZoom, mapBoundingBox });
+
+// Check for changed values to update local state or to perform other actions
+const isEqualZoom = isEqual(zoom, mapZoom);
+const isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);
+
+if (!(isEqualPosition && isEqualZoom)) {
+// ... perform some actions
+}
+},
+};
+
+return (
+<Map
+eventListenerMap={eventListenerMap}
+credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+// ... other map properties
+>
+{api => {
+mapApiRef.current = api;
+
+// if needed, render cluster or marker layer here or return null
+return null;
+}}
+</Map>
+);
+};