Change language or content of Mapbox cooperative Gestures overlay

Question

I'm using the "disable zoom while scrolling" option from mapbox with the cooperativeGestures parameter, which is working fine.

Since I'm working on a multilanguage page, I'm trying to alter the overlay text shown when scrolling the window.

Is there an automatic way of translation or is it possible to translate it manually?

Answer 1

Use the locale property:

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [-74.5, 40],
  zoom: 9,
  locale: {
    "ScrollZoomBlocker.CtrlMessage": "Use ctrl + scroll to zoom the map",
    "ScrollZoomBlocker.CmdMessage": "Use ⌘ + scroll to zoom the map"
  },
});

Full list of parameters that can be translated:

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [-74.5, 40],
  zoom: 9,
  locale: {
    "AttributionControl.ToggleAttribution": "Toggle attribution",
    "AttributionControl.MapFeedback": "Map feedback",
    "FullscreenControl.Enter": "Enter fullscreen",
    "FullscreenControl.Exit": "Exit fullscreen",
    "GeolocateControl.FindMyLocation": "Find my location",
    "GeolocateControl.LocationNotAvailable": "Location not available",
    "LogoControl.Title": "Mapbox logo",
    "Map.Title": "Map",
    "NavigationControl.ResetBearing": "Reset bearing to north",
    "NavigationControl.ZoomIn": "Zoom in",
    "NavigationControl.ZoomOut": "Zoom out",
    "ScrollZoomBlocker.CtrlMessage": "Use ctrl + scroll to zoom the map",
    "ScrollZoomBlocker.CmdMessage": "Use ⌘ + scroll to zoom the map",
    "TouchPanBlocker.Message": "Use two fingers to move the map",
  },
});