@bruin-mbv/mapping-lib NPM

Bruin Map Component

This project provides:

the BruinMap component that can be used in Bruin to display a set of
BruinMarkers for each location / site to be shown.

The types you should be aware of are:

export type BruinMarker = {
  markerId: number;
  position: google.maps.LatLngLiteral;
  title: string;
  displayValue: string;
  scale?: number;
  status?: SiteStatus;
  serviceStatus?: ServiceStatus;
};

export type BruinMarkerClickHandler = (markerId: number) => void;

export type MarkerStyle = "starlink" | "pin" | "serviceStatus";

export type ServiceStatus =
  | "Healthy"
  | "PartiallyDegraded"
  | "Degraded"
  | "Outage"
  | "Unknown";

export type SiteStatus = "Active" | "Offline" | "Flagged";

export type BruinMapProps = {
  /** The Google platform API key */
  apiKey: string;
  /** An array of markers to display on the map */
  markers: Array<BruinMarker>;
  /** Style of markers to use - Starlink | Pin */
  markerStyle?: MarkerStyle;
  /** Whether to show a toggle switch to change the map style */
  displayStyleToggle?: boolean;
  /** An optional string to display in the marker infowindow's action button */
  markerViewDetailsActionLabel?: string;
  /** Whether to set the map bounds to fit the markers */
  setBoundsToFitMarkers?: boolean;
  /** Whether to prevent the zoom and other map controls from being displayed */
  hideMapControls?: boolean;
  /** The initial zoom level to use for the map - which is ignored for single location satellite views*/
  initialZoom?: number;
  /** A callback function to handle marker details click */
  onMarkerDetailsClick?: BruinMarkerClickHandler;
};

Installation

Type pnpm add @bruin-mbv/mapping-lib in your project (or use your favorite package manager in place of pnpm)

Usage

You will need to provide a usable Google API key to the component - one that is tied to the map style that is used internally by the inner Google Map component.