setOverlayLayer()

in public/js/components/map.js [193:260]

• 53 lines of code
• 7 McCabe index (conditional complexity)

  setOverlayLayer(featureCollection, skipZoom, fillColor) {
    if (fillColor && !chroma.valid(fillColor)) {
      throw new Error(`${fillColor} is not a valid color representation`);
    }

    this._removeOverlayLayer();

    const fill = fillColor ? chroma(fillColor) :  chroma('rgb(220,220,220)');
    // highlight with the complementary color
    const highlight = fillColor ? fill.set('hsl.h', '+180') : chroma('#627BC1');

    const border = fill.darken(2);

    this._maplibreMap.addSource(this._overlaySourceId, {
      type: 'geojson',
      data: featureCollection,
    });

    //Get the first symbol layer id
    const firstSymbol = this._maplibreMap.getStyle().layers.find(l => l.type ===  'symbol');

    this._maplibreMap.addLayer({
      id: this._overlayFillLayerId,
      source: this._overlaySourceId,
      type: 'fill',
      paint: {
        'fill-color': fill.css(),
        'fill-opacity': 0.6,
      },
    }, firstSymbol?.id);

    this._maplibreMap.addLayer({
      id: this._overlayLineLayerId,
      source: this._overlaySourceId,
      type: 'line',
      paint: {
        'line-color': border.css(),
        'line-width': 1,
      },
    }, firstSymbol?.id);

    this._maplibreMap.addLayer({
      id: this._overlayFillHighlightId,
      source: this._overlaySourceId,
      type: 'fill',
      layout: {},
      paint: {
        'fill-color': highlight.css(),
        'fill-opacity': 1,
      },
      filter: ['==', 'name', ''],
    }, firstSymbol?.id);

    if (!skipZoom) {
      const bbox = turfBbox(featureCollection);

      //bug in mapbox-gl dealing with wrapping bounds
      //without normalization, maplibre will throw on the world layer
      //seems to be fixed when cropping the bounds slightly.
      if (bbox[2] - bbox[0] > 360) {
        bbox[0] = -175;
        bbox[1] = -85;
        bbox[2] = 175;
        bbox[3] = 85;
      }
      this._maplibreMap.fitBounds(bbox);
    }
  }