layer_format_maplibre.mjs

/**
### mapp.layer.formats.maplibre()

@module /layer/formats/maplibre
*/

// Assign maplibre from window if already loaded.
let promise, maplibregl = window.maplibregl

async function MaplibreGL() {

  if (maplibregl) return new maplibregl.Map(...arguments);

  // Create promise to load maplibre from esm.sh
  if (!promise) promise = new Promise(async resolve => {

    try {

      const mod = await import('https://esm.sh/maplibre-gl@4.7.1')

      maplibregl = mod.default

      // Avoid loading RTL Text Plugin twice, else it will error
      if (!['deferred', 'loaded'].includes(maplibregl.getRTLTextPluginStatus())) {
        maplibregl.setRTLTextPlugin(
          'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
          true // Lazy load the plugin
        );
      }

      resolve()

    } catch {

      console.error('Failed to load maplibre-gl library.')
      resolve()
    }
  })

  await promise

  if (!maplibregl) return;

  return new maplibregl.Map(...arguments);
}

export default async layer => {

  const className = `mapp-layer-${layer.key} maplibre`

  layer.container = mapp.utils.html.node`<div 
    class=${className}
    style="visibility: hidden; position: absolute; width: 100%; height: 100%;">`

  layer.mapview.Map.getTargetElement().prepend(layer.container)

  layer.Map = await MaplibreGL({
    container: layer.container,
    pixelRatio: 1,
    style: layer.style.URL,
    attributionControl: false,
    boxZoom: false,
    doubleClickZoom: false,
    dragPan: false,
    dragRotate: false,
    interactive: false,
    keyboard: false,
    pitchWithRotate: false,
    scrollZoom: false,
    touchZoomRotate: false,
    preserveDrawingBuffer: layer.preserveDrawingBuffer,
    transformRequest: (url, resourceType) => {

      if (url.indexOf('mapbox:') === 0) {
        return transformMapboxUrl(url, resourceType, layer.accessToken)
      }

      // Do any other transforms you want
      return { url }
    }
  });

  if (!layer.Map) return;

  // The Maplibre Map control must resize with mapview Map targetElement.
  layer.mapview.Map.getTargetElement().addEventListener('resize', () => layer.Map.resize())

  // Handle layer.style.zIndex deprecation.
  if (layer.style.zIndex) {
    console.warn(`Layer: ${layer.key}, layer.style.zIndex has been deprecated. Use layer.zIndex instead.`);
  }

  layer.L = new ol.layer.Layer({
    key: layer.key,
    zIndex: layer.zIndex,
    render: frameState => {

      if (!layer.display) return

      layer.container.style.visibility = 'visible';

      // adjust view parameters in mapbox
      layer.Map.jumpTo({
        center: ol.proj.toLonLat(frameState.viewState.center),
        zoom: frameState.viewState.zoom - 1,
        bearing: (-frameState.viewState.rotation * 180) / Math.PI,
        animate: false
      })

      return layer.container;
    }
  })
}

// transformMapboxUrl and supporting functions are taken from https://github.com/rowanwins/maplibregl-mapbox-request-transformer

function transformMapboxUrl(url, resourceType, accessToken) {

  if (url.indexOf('/styles/') > -1 && url.indexOf('/sprite') === -1) {
    return {
      url: normalizeStyleURL(url, accessToken)
    }
  }

  if (url.indexOf('/sprites/') > -1) {
    return {
      url: normalizeSpriteURL(url, accessToken)
    }
  }

  if (url.indexOf('/fonts/') > -1) {
    return {
      url: normalizeGlyphsURL(url, accessToken)
    }
  }

  if (url.indexOf('/v4/') > -1) {
    return {
      url: normalizeSourceURL(url, accessToken)
    }
  }

  if (resourceType === 'Source') {
    return {
      url: normalizeSourceURL(url, accessToken)
    }
  }
}

function parseUrl(url) {

  const parts = url.match(/^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/);

  if (!parts) {
    throw new Error('Unable to parse URL object');
  }

  return {
    protocol: parts[1],
    authority: parts[2],
    path: parts[3] || '/',
    params: parts[4] ? parts[4].split('&') : []
  };
}

function formatUrl(urlObject, accessToken) {

  const apiUrlObject = parseUrl('https://api.mapbox.com');

  urlObject.protocol = apiUrlObject.protocol;
  urlObject.authority = apiUrlObject.authority;
  urlObject.params.push(`access_token=${accessToken}`);

  const params = urlObject.params.length ? `?${urlObject.params.join('&')}` : '';

  return `${urlObject.protocol}://${urlObject.authority}${urlObject.path}${params}`;
}

function normalizeStyleURL(url, accessToken) {

  const urlObject = parseUrl(url);

  urlObject.path = `/styles/v1${urlObject.path}`;

  return formatUrl(urlObject, accessToken);
}

function normalizeGlyphsURL(url, accessToken) {

  const urlObject = parseUrl(url);

  urlObject.path = `/fonts/v1${urlObject.path}`;

  return formatUrl(urlObject, accessToken);
}

function normalizeSourceURL(url, accessToken) {

  const urlObject = parseUrl(url);

  urlObject.path = `/v4/${urlObject.authority}.json`;
  urlObject.params.push('secure');

  return formatUrl(urlObject, accessToken);
}

function normalizeSpriteURL(url, accessToken) {

  const urlObject = parseUrl(url);
  const path = urlObject.path.split('.');

  urlObject.path = `/styles/v1${path[0]}/sprite.${path[1]}`;

  return formatUrl(urlObject, accessToken);
}