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>
);
}
}