Skip to content

Instantly share code, notes, and snippets.

@lancegliser
Created April 8, 2020 00:11
Show Gist options
  • Save lancegliser/0c0ccb6ba8f433ff8b3a7c3a8e354be3 to your computer and use it in GitHub Desktop.
Save lancegliser/0c0ccb6ba8f433ff8b3a7c3a8e354be3 to your computer and use it in GitHub Desktop.
A set of common functions you can customize for your application
// @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);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment