Advanced Usage

The useMap hook provides direct access to the MapLibre GL map instance, allowing you to use any feature from the MapLibre GL JS API.

Create a child component inside Map and use the useMap hook to access the map instance.

import { Map, useMap } from "@/components/ui/map";

function MyComponent() {
  const { map, isLoaded } = useMap();

  useEffect(() => {
    if (!map || !isLoaded) return;
    
    // Access the underlying MapLibre GL map instance
    map.on("click", (e) => {
      console.log("Clicked at:", e.lngLat);
    });

    // Use any MapLibre GL method
    map.flyTo({ center: [-74, 40.7], zoom: 12 });
  }, [map, isLoaded]);

  return null;
}

This example shows how to create custom controls that manipulate the map's pitch and bearing, and listen to map events to display real-time values.

Add custom GeoJSON data as layers with fill and outline styles. This example shows NYC parks with hover interactions.

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
• Clustering - Group thousands of markers into clusters for performance