async _updateMap()

in public/js/components/app.js [236:306]


  async _updateMap() {
    if (!this?.state) {
      return;
    }

    // Getting the necessary data to update the map
    const { selectedTileLayer, selectedLanguage } = this.state;
    const source = await (selectedTileLayer.getVectorStyleSheet());
    const mlMap = this._map._maplibreMap;

    if (!selectedTileLayer || !source || !mlMap) {
      return;
    }

    // Iterate over map layers to change the layout[text-field] property
    if (selectedLanguage) {
      const langKey = selectedLanguage;
      const lang = supportedLanguages.find(l => l.key === langKey);

      try {
        this._map.waitForStyleLoaded(async () => {
          if (langKey === 'default') {
            const defaultStyle = await this.state.selectedTileLayer.getVectorStyleSheet();
            source.layers.forEach(layer => {
              const textField = defaultStyle?.layers.find(l => l.id === layer.id)?.layout?.['text-field'];
              if (textField) {
                mlMap.setLayoutProperty(layer.id, 'text-field', textField);
              }
            });
          } else {
            source.layers.forEach(layer => {
              const textField = TMSService.transformLanguageProperty(layer, langKey);
              if (textField) {
                mlMap.setLayoutProperty(layer.id, 'text-field', textField);
              }
            });
          }
        });
      } catch (error) {
        this._addToast(
          `Error switching to ${lang.label}`,
          <p><EuiCode>{error.message}</EuiCode></p>
        );
      }
    }


    const { selectedColor, selectedColorOp, selectedPercentage } = this.state;
    try {
      if (selectedColor && !chroma.valid(selectedColor)) {
        throw new Error(`${selectedColor} is not a valid color representation`);
      }

      source?.layers.forEach(layer => {
        TMSService
          .transformColorProperties(layer, selectedColor, selectedColorOp, selectedPercentage)
          .forEach(({ color, property }) => {
            mlMap.setPaintProperty(layer.id, property, color);
          });
      });

      if (mlMap && mlMap?.redraw === 'function') {
        mlMap.redraw();
      }
    } catch (error) {
      this._addToast(
        `Error blending basemap with ${selectedColor}`,
        <p><EuiCode>{error.message}</EuiCode></p>
      );
    }
  }