useDocyrusMapView

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-hooks-use-docyrus-map-view

pnpm add @docyrus/api-client @docyrus/app-utils @tanstack/react-query react-native-maps expo-location (optional)

This is a port of the web hook with the same signature. It builds on useDocyrusDataGrid for the saved views, toolbar, filters and search, then requests only the columns the map needs.

The rendering is rewritten for native. DocyrusMapView draws everything on the compound Map, which uses react-native-maps. It includes:

• clustered markers showing a logo, a Docyrus icon or the default pin
• callouts
• drag-to-move
• zoom and locate controls
• a basemap switcher
• a "Search this area" pill

The web names DocyrusLeafletMapView and DocyrusGoogleMapView are exported as aliases. DocyrusGoogleMapView forces the Google provider.

Usage

import { useDocyrusClient } from '@docyrus/signin/react-native';

import {
  DocyrusMapView,
  useDocyrusMapView
} from '@/hooks/docyrus-native/use-docyrus-map-view';

export function OrganizationsMap() {
  const client = useDocyrusClient();

  const mapView = useDocyrusMapView({
    client: client!,
    appSlug: 'base',
    dataSourceSlug: 'organization',
    locationFieldSlug: 'map_location',
    titleFieldSlug: 'name',
    descriptionFieldSlugs: ['address', 'city', 'status'],
    markerImageFieldSlug: 'company_logo',
    markerIconFieldSlug: 'company_icon',
    enableViewportFilter: true,
    viewportFilterMode: 'manual',
    enableMarkerDrag: true,
    basemaps: ['street', 'satellite', 'hybrid', 'terrain'],
    googleMapsApiKey: process.env.EXPO_PUBLIC_GOOGLE_MAPS_API_KEY,
    persistState: true
  });

  return (
    <>
      {mapView.toolbar}
      <DocyrusMapView
        className="h-[480px]"
        markers={mapView.markers}
        allMarkersCount={mapView.allMarkers.length}
        center={mapView.center}
        bounds={mapView.bounds}
        defaultZoom={mapView.defaultZoom}
        focusedZoom={mapView.focusedZoom}
        fitBoundsPadding={mapView.fitBoundsPadding}
        selectedMarkerId={mapView.selectedMarkerId}
        onSelectMarker={mapView.setSelectedMarkerId}
        onViewportChange={mapView.setViewportBounds}
        isViewportStale={mapView.isViewportStale}
        onSearchThisArea={mapView.searchThisArea}
        draggableMarkers={mapView.enableMarkerDrag}
        onMarkerMove={mapView.handleMarkerMove}
        basemaps={mapView.availableBasemaps}
        activeBasemap={mapView.activeBasemap}
        onBasemapChange={mapView.setActiveBasemap}
        onMapClick={mapView.onMapClick} />
    </>
  );
}

API Reference

Options (UseDocyrusMapViewOptions<TData>)

Extends every useDocyrusDataGrid option except data, enableItemsQuery, showSelectColumn and enableRowMarkers.

Result (UseDocyrusMapViewResult<TData>)

DocyrusMapView props

DocyrusGoogleMapView also accepts apiKey, defaultMapType ('roadmap' | 'satellite' | 'hybrid' | 'terrain') and getMarkerIcon(marker, isSelected) => string | { url, size } | null.

Helpers

• reverseGeocode(lat, lng, apiKey?) returns Promise<string | null>. It tries the optional expo-location peer first, then the Google Geocoding REST API when a key is given, then OpenStreetMap Nominatim. It never throws.
• getExpoLocationModule() returns the optional expo-location module, or null.
• DEFAULT_DOCYRUS_BASEMAPS holds the built-in street / satellite / hybrid / terrain definitions.

Native deltas

• There is ONE DocyrusMapView on react-native-maps instead of the web Leaflet and Google Maps views. Both web names are exported as aliases.
• DocyrusBasemapDefinition adds mapType ('standard' | 'satellite' | 'hybrid' | 'terrain'). The Leaflet tile fields are optional and ignored.
• DocyrusMapMarker adds icon (the raw Docyrus icon id), which is rendered with DocyrusIcon.
• The map fits to the markers only once, like web, so refetches and drags never move the user's viewport. The viewport is not persisted.
• expo-location is an optional peer. Without it, reverse geocoding uses Google REST (with a key) or Nominatim.

Translation Keys

Type Exports