DeckGL

pnpm add @accelint/map-toolkit

// Import base map
import { BaseMap } from '@accelint/map-toolkit/deckgl';

// Import layers
import { DisplayShapeLayer, SymbolLayer } from '@accelint/map-toolkit/deckgl';

// Import extensions
import { CoffinCornerExtension } from '@accelint/map-toolkit/deckgl';

// Import widgets
import { HtmlOverlayWidget, useHtmlOverlay } from '@accelint/map-toolkit/deckgl';

// Import utilities
import { createSavedViewport } from '@accelint/map-toolkit/deckgl';

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

const MAP_ID = uuid();

const data = [
  {
    id: '1',
    sidc: 'SFGPUCI----E---',
    position: [-122.4, 37.8],
    size: 32,
  },
];

export function MapWithSymbols() {
  return (
    <BaseMap id={MAP_ID} className="w-full h-full">
      <SymbolLayer id="symbols" data={data} />
    </BaseMap>
  );
}

import { BaseMap } from '@accelint/map-toolkit/deckgl';
import { DrawShapeLayer } from '@accelint/map-toolkit/deckgl/shapes';
import { useDrawShape } from '@accelint/map-toolkit/deckgl/shapes/draw-shape-layer';
import { uuid } from '@accelint/core';

const MAP_ID = uuid();

export function DrawingMap() {
  const { mode, setMode, shapes } = useDrawShape(MAP_ID);
  
  return (
    <div className="relative w-full h-full">
      <BaseMap id={MAP_ID} className="w-full h-full">
        <DrawShapeLayer id="drawing" mode={mode} />
      </BaseMap>
      
      <div className="absolute top-4 right-4 flex gap-2">
        <button onClick={() => setMode('drawPolygon')}>Draw Polygon</button>
        <button onClick={() => setMode('drawCircle')}>Draw Circle</button>
        <button onClick={() => setMode('select')}>Select</button>
      </div>
    </div>
  );
}

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

const MAP_ID = uuid();

const markers = [
  { id: '1', position: [-122.4, 37.8], label: 'San Francisco' },
  { id: '2', position: [-118.2, 34.0], label: 'Los Angeles' },
];

export function MapWithOverlay() {
  return (
    <BaseMap id={MAP_ID} className="w-full h-full">
      <HtmlOverlayWidget>
        {markers.map(marker => (
          <HtmlOverlayItem
            key={marker.id}
            coordinates={marker.position}
          >
            <div className="bg-white px-2 py-1 rounded shadow">
              {marker.label}
            </div>
          </HtmlOverlayItem>
        ))}
      </HtmlOverlayWidget>
    </BaseMap>
  );
}