A set of common functions you can customize for your application

mapbox-utilities.ts

// @ts-ignore - Wish this didn't suck, but it does and I'm moving on.
import MapiClient, { SdkConfig } from "@mapbox/mapbox-sdk";
import MapboxGeocoder, {
  GeocodeService,
  GeocodeRequest,
  GeocodeResponse,
} from "@mapbox/mapbox-sdk/services/geocoding";
import mapboxgl, {
  EventData,
  LngLat,
  MapboxGeoJSONFeature,
  MapMouseEvent,
} from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import {
  MapboxStyleSwitcherControl,
  MapboxStyleDefinition,
} from "mapbox-gl-style-switcher";
import "mapbox-gl-style-switcher/styles.css";
import "./mapbox.css";

export const setMapCursorPointer = (
  event: MapMouseEvent & {
    features?: MapboxGeoJSONFeature[] | undefined;
  } & EventData
) => {
  event.target.getCanvas().style.cursor = "pointer";
};

export const unsetMapCursorPointer = (
  event: MapMouseEvent & {
    features?: MapboxGeoJSONFeature[] | undefined;
  } & EventData
) => {
  event.target.getCanvas().style.cursor = "";
};

/*
 * Map controls
 */
export const addDefaultControls = (
  map: mapboxgl.Map
): {
  navigationControl: mapboxgl.NavigationControl;
  styleSwitcherControl: MapboxStyleSwitcherControl;
} => {
  const navigationControl = addNavigationControl(map);
  const styleSwitcherControl = addStyleSwitcherControl(map);
  return {
    navigationControl,
    styleSwitcherControl,
  };
};

export const addNavigationControl = (
  map: mapboxgl.Map
): mapboxgl.NavigationControl => {
  const control = new mapboxgl.NavigationControl();
  map.addControl(control);
  return control;
};

const mapboxStylesOptions: MapboxStyleDefinition[] = [
  {
    title: "Default",
    uri: MapboxStyles.dark_v10,
  },
  {
    title: "Satellite",
    uri: MapboxStyles.satellite_streets_v11,
  },
  {
    title: "Outdoors",
    uri: MapboxStyles.outdoors_v11,
  },
];
export const addStyleSwitcherControl = (
  map: mapboxgl.Map
): MapboxStyleSwitcherControl => {
  const control = new MapboxStyleSwitcherControl(mapboxStylesOptions);
  map.addControl(control);
  return control;
};

export const fitMapToMarkers = (
  map: mapboxgl.Map,
  markers: mapboxgl.Marker[],
  options: Partial<mapboxgl.FitBoundsOptions> = {}
) => {
  const bounds = new mapboxgl.LngLatBounds();
  markers.forEach((marker) => {
    bounds.extend(marker.getLngLat());
  });

  map.fitBounds(bounds, {
    padding: 10,
    center: markers[0].getLngLat(),
    ...options,
  });
};

export const removeLayerIfExists = (map: mapboxgl.Map, id: string) => {
  if (map.getLayer(id)) map.removeLayer(id);
};
export const removeSourceIfExists = (map: mapboxgl.Map, id: string) => {
  if (map.getSource(id)) map.removeSource(id);
};