Advanced

Access the MapLibre GL instance for custom features.

Custom Controls

Custom GeoJSON Layer

Add GeoJSON data with fill and outline styles. Hover for interactions.

Layer-based Markers

For 100s-1000s of markers, use GeoJSON layers instead of DOM markers for WebGL performance.

Access Methods

See the MapLibre GL JS docs for all available methods.

Using a Ref

Call map methods from event handlers or effects.

import { Map, type MapRef } from "@/components/ui/map";
import { useRef } from "react";

function MyMapComponent() {
  const mapRef = useRef<MapRef>(null);

  const handleFlyTo = () => {
    mapRef.current?.flyTo({ center: [-74, 40.7], zoom: 12 });
  };

  return (
    <>
      <button onClick={handleFlyTo}>Fly to NYC</button>
      <Map ref={mapRef} center={[-74, 40.7]} zoom={10} />
    </>
  );
}

Using the Hook

For child components inside Map, use useMap.

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

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

  useEffect(() => {
    if (!map || !isLoaded) return;
    
    const handleClick = (e) => {
      console.log("Clicked at:", e.lngLat);
    };

    map.on("click", handleClick);
    return () => map.off("click", handleClick);
  }, [map, isLoaded]);

  return null;
}

<Map center={[-74, 40.7]} zoom={10}>
  <MapEventListener />
</Map>

Build Ideas

Real-time tracking – Live location updates
Geofencing – Trigger actions on area enter/leave
3D buildings – Extrude building footprints
Animations – Animate markers along routes
Custom data layers – Weather, traffic, satellite