Advanced Usage

Access the underlying MapLibre map instance to use any feature from the MapLibre React Native API.

For child components rendered inside Map, use the useMap hook to access the map instance and listen to events.

import { Map, useMap } from "@/components/ui/map";
import { View } from "react-native";
import { useEffect } from "react";

// For child components inside Map, use the useMap hook
function MapContent() {
  const { mapRef, cameraRef, isLoaded } = useMap();

  useEffect(() => {
    if (!mapRef.current || !isLoaded) return;

    const handleRegionChange = () => {
      mapRef.current?.getCenter().then((center) => {
        console.log("Map center:", center);
      });
    };

    // Access MapLibre methods via mapRef
    handleRegionChange();
  }, [mapRef, isLoaded]);

  return null;
}

// Usage
<Map center={[-74.006, 40.7128]} zoom={10}>
  <MapContent />
</Map>

This example shows how to toggle map layers dynamically with React state. Control which routes and markers are visible on the map.

Add custom GeoJSON data as layers with fill and outline styles using MapLibre's native layer system.

When displaying hundreds or thousands of markers, use GeoJSON layers with CircleLayer and SymbolLayer instead of MapMarker components for better performance.

You can extend this to build custom features like:

• Real-time tracking - Live location updates for delivery, rides, or fleet management
• Geofencing - Trigger actions when users enter or leave specific areas
• Heatmaps - Visualize density data like population, crime, or activity hotspots
• Drawing tools - Let users draw polygons, lines, or place markers for custom areas
• 3D buildings - Extrude building footprints for urban visualization
• Animations - Animate markers along routes or create fly-through experiences
• Custom data layers - Overlay weather, traffic, or satellite imagery