Asset Map

Interactive map for Oil and Gas assets. Render wells, facilities, and custom asset types with clustering, color schemes, drawing tools, and overlay uploads.

Preview

Loading well data...

<Map
  assets={djBasinWells}
  mapboxAccessToken={MAPBOX_TOKEN}
  colorBy="status"
  height="500px"
  enableOverlayUpload
  showDetailCard
  controls={["pan", "zoom", "fullscreen", "center", "draw-polygon", "layers"]}
  layers={["assets", "lines"]}
/>

Installation

bash

pnpm add @aai-agency/og-components mapbox-gl

Usage

tsx

import { Map } from "@aai-agency/og-components";
import "mapbox-gl/dist/mapbox-gl.css";

export function AssetMap({ assets }) {
  return (
    <Map
      assets={assets}
      mapboxAccessToken={import.meta.env.VITE_MAPBOX_TOKEN}
      colorBy="status"
      height="700px"
      enableOverlayUpload
      showDetailCard
      controls={[
        "pan", "zoom", "fullscreen", "center",
        "draw-polygon", "draw-rectangle", "draw-circle",
        "layers", "labels",
      ]}
      layers={["assets", "overlays"]}
    />
  );
}

Props

Prop	Type	Default	Description
`assets`	`Asset[]`	-	Array of asset objects to display on the map.
`mapboxAccessToken`	`string`	-	Your Mapbox GL access token.
`mapStyle`	`string`	`"mapbox://styles/mapbox/light-v11"`	Mapbox style URL.
`colorBy`	`ColorScheme`	`"status"`	Color scheme for asset markers. One of: status, type, production, waterCut, wellType, operator, basin.
`onColorByChange`	`(scheme: ColorScheme) => void`	-	Callback when color scheme changes via legend.
`height`	`string \| number`	`"500px"`	Map container height.
`cluster`	`boolean`	`false`	Enable marker clustering at low zoom levels.
`enableOverlayUpload`	`boolean`	`false`	Enable drag-and-drop overlay upload (KMZ, KML, GeoJSON, Shapefile).
`showDetailCard`	`boolean`	`true`	Show asset detail card on click.
`showControls`	`boolean`	`true`	Show the map controls toolbar.
`controls`	`MapControlId[]`	-	Which controls to show: pan, zoom, fullscreen, center, draw-polygon, draw-rectangle, draw-circle, layers, labels.
`layers`	`MapLayerId[]`	-	Toggleable layers: assets, clusters, overlays, labels.
`onAssetClick`	`(asset: Asset) => void`	-	Callback when an asset is clicked.
`onAssetHover`	`(asset: Asset \| null) => void`	-	Callback when an asset is hovered.
`onViewStateChange`	`(viewState: MapViewState) => void`	-	Callback on pan or zoom.

PreviousInstallation

NextAsset Detail Card