# Map utils

*Category:* Components
*Section:* Map
*Source:* https://uikit.developers.rio.cloud/#/components/mapUtils
*Captured:* 2026-04-27T14:59:08.136Z

## Map utils

### Example: Example 1

import { useRef , useState } from 'react' ; import { isEqual } from 'es-toolkit/compat' ; 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 as H . Map ; 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 >
);
};