MapLibre

pnpm add @accelint/map-toolkit maplibre-gl

// Import hook
import { useMapLibre } from '@accelint/map-toolkit/maplibre';

// Import RBZ handler
import { RbzHandler, DEFAULT_RBZ_STYLE } from '@accelint/map-toolkit/maplibre';

// Import constants
import { DEFAULT_VIEW_STATE } from '@accelint/map-toolkit/maplibre';

import { useMapLibre, DEFAULT_VIEW_STATE } from '@accelint/map-toolkit/maplibre';
import { useEffect, useRef } from 'react';
import 'maplibre-gl/dist/maplibre-gl.css';

export function SimpleMap() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  const map = useMapLibre({
    container: containerRef.current,
    style: 'https://demotiles.maplibre.org/style.json',
    ...DEFAULT_VIEW_STATE,
  });
  
  useEffect(() => {
    if (!map) return;
    
    // Add custom layer or markers
    map.on('load', () => {
      map.addSource('my-data', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [],
        },
      });
    });
  }, [map]);
  
  return <div ref={containerRef} className="w-full h-full" />;
}

import { useMapLibre, RbzHandler, DEFAULT_RBZ_STYLE } from '@accelint/map-toolkit/maplibre';
import { useEffect, useRef } from 'react';
import 'maplibre-gl/dist/maplibre-gl.css';

export function MapWithRbz() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  const map = useMapLibre({
    container: containerRef.current,
    style: 'https://demotiles.maplibre.org/style.json',
    center: [0, 0],
    zoom: 2,
  });
  
  useEffect(() => {
    if (!map) return;
    
    // Add rubber band zoom handler
    const rbzHandler = new RbzHandler({
      map,
      style: {
        ...DEFAULT_RBZ_STYLE,
        fillColor: 'rgba(0, 123, 255, 0.1)',
        strokeColor: 'rgba(0, 123, 255, 0.8)',
      },
    });
    
    map.addHandler('rbz', rbzHandler);
    
    return () => {
      map.removeHandler('rbz');
    };
  }, [map]);
  
  return (
    <div className="relative w-full h-full">
      <div ref={containerRef} className="w-full h-full" />
      <div className="absolute top-4 left-4 bg-white p-2 rounded shadow">
        Hold Shift + Click and drag to zoom to a rectangle
      </div>
    </div>
  );
}

import { BaseMap } from '@accelint/map-toolkit/deckgl';
import { LIGHT_BASE_MAP_STYLE } from '@accelint/map-toolkit/deckgl';
import { uuid } from '@accelint/core';

const MAP_ID = uuid();

export function HybridMap() {
  return (
    <BaseMap
      id={MAP_ID}
      className="w-full h-full"
      mapStyle={LIGHT_BASE_MAP_STYLE}
    />
  );
}