Skip to content

Support hiding labels #2354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jsanz wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Support hiding labels #2354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13ab140
Add label mode in tabs
jsanz Aug 19, 2025
48cf299
Remove tabs for a compressed form
jsanz Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 37 additions & 2 deletions public/js/components/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,12 @@ export const supportedLanguages = [
{ key: 'zh-cn', label: '简体中文' },
];

export const supportedlabelModes = [
{ key: 'default', label: 'Show all layers' },
{ key: 'only', label: 'Only show label layers' },
{ key: 'hide', label: 'Hide label layers' },
];

export class App extends Component {
constructor(props) {
super(props);
Expand All @@ -85,6 +91,7 @@ export class App extends Component {
selectedTileLayer: null,
selectedFileLayer: null,
selectedLanguage: 'default',
selectedLabelMode: 'default',
selectedColor: null,
selectedColorOp: null,
selectedPercentage: null,
Expand Down Expand Up @@ -135,6 +142,12 @@ export class App extends Component {
});
};

this._selectLabelMode = (mode) => {
this.setState({ selectedLabelMode: mode }, () => {
this._updateMap();
});
};

this._selectTmsLayer = async (config) => {
const source = await this._getTmsSource(config);
const { operation, percentage } = TMSService.colorOperationDefaults.find(c => c.style === config.getId());
Expand Down Expand Up @@ -248,7 +261,7 @@ export class App extends Component {
}

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

Expand All @@ -260,11 +273,31 @@ export class App extends Component {
if (selectedLanguage) {
const langKey = selectedLanguage;
const lang = supportedLanguages.find(l => l.key === langKey);
const labelMode = selectedLabelMode;

try {
this._map.waitForStyleLoaded(async () => {
const defaultStyle = await this.state.selectedTileLayer.getVectorStyleSheet();

// Reset the map layers to the default visibility
source.layers.forEach(layer => {
const defaultVisibility = defaultStyle.layers.find((dl) => dl.id == layer.id )?.visibility || 'visible';
mlMap.setLayoutProperty(layer.id, 'visibility', defaultVisibility);
});
// Set the visibility of layers based on the selected label mode
if (labelMode === 'only') {
source.layers.filter(layer => layer.type !== 'symbol' && layer.type !== 'background').forEach(layer => {
mlMap.setLayoutProperty(layer.id, 'visibility', 'none');
});
}
else if (labelMode === 'hide') {
source.layers.filter(layer => layer.type === 'symbol').forEach(layer => {
mlMap.setLayoutProperty(layer.id, 'visibility', 'none');
});
}

// Set the language property for each layer
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) {
Expand Down Expand Up @@ -388,8 +421,10 @@ export class App extends Component {
title="Tile Layer"
layerConfig={this.state.selectedTileLayer}
onLanguageChange={this._selectLanguage}
onLabelModeChange={this._selectLabelMode}
onColorChange={this._changeColor}
language={this.state.selectedLanguage}
labelMode={this.state.selectedLabelMode}
color={this.state.selectedColor}
/>
</EuiPanel>
Expand Down
92 changes: 47 additions & 45 deletions public/js/components/customize_tms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,18 @@
*/

import { TMSService } from '@elastic/ems-client/target/node';
import React, { PureComponent } from 'react';
import React, { PureComponent} from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiForm,
EuiFormRow,
EuiDescribedFormGroup,
EuiColorPicker,
EuiComboBox,
EuiPanel,
} from '@elastic/eui';

import { supportedLanguages } from './app';
import { supportedLanguages, supportedlabelModes } from './app';

export class CustomizeTMS extends PureComponent {
constructor(props) {
Expand All @@ -32,6 +31,14 @@ export class CustomizeTMS extends PureComponent {
}
};

this._onLabelChange = (selectedOptions) => {
const mode = selectedOptions[0];

if (mode) {
this.props.onLabelModeChange(mode.key);
}
};

}


Expand All @@ -43,58 +50,53 @@ export class CustomizeTMS extends PureComponent {
}

const selectedLangOptions = supportedLanguages.filter(l => l.key === this.props.language);
const selectedLabelOptions = supportedlabelModes.filter(l => l.key === this.props.labelMode);


return (
<EuiForm component="form">
<EuiFlexGroup gutterSize={'s'}>
<EuiFlexItem>
<EuiPanel hasShadow={false} hasBorder paddingSize="m">
<EuiDescribedFormGroup
title={<h3>Basemap labels</h3>}
description={
<p>
Select the language for
the basemap. Non-translated
labels will fallback to defaults.
</p>
}
>
<EuiFormRow label="Select language">
<EuiComboBox
compressed
isClearable={false}
singleSelection={{ asPlainText: true }}
options={supportedLanguages}
selectedOptions={selectedLangOptions}
onChange={this._onLanguageChange}
/>
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiFormRow label="Select language" helpText="Select the language for the basemap. Non-translated labels will fallback to defaults.">
<EuiComboBox
compressed
isClearable={false}
singleSelection={{ asPlainText: true }}
options={supportedLanguages}
selectedOptions={selectedLangOptions}
onChange={this._onLanguageChange}
/>
</EuiFormRow>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel hasShadow={false} hasBorder paddingSize='m'>
<EuiFormRow label="Select mode" helpText="Select the mode for the basemap labels, which can be either normal, only labels, or no labels.">
<EuiComboBox
compressed
isClearable={false}
singleSelection={{ asPlainText: true }}
options={supportedlabelModes}
selectedOptions={selectedLabelOptions}
onChange={this._onLabelChange}
/>
</EuiFormRow>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel hasShadow={false} hasBorder paddingSize="m">
<EuiDescribedFormGroup
title={<h3>Color filter</h3>}
description={
<p>
Choose a color filter to apply
to the basemap.
</p>
}
>
<EuiFormRow label="Pick a color">
<EuiColorPicker
compressed
isClearable={true}
onChange={this.props.onColorChange}
color={this.props.color}
format="hex"
secondaryInputDisplay="top"
placeholder="No filter"
/>
</EuiFormRow>
</EuiDescribedFormGroup>
<EuiFormRow label="Pick a color" helpText="Choose a color filter to apply to the basemap.">
<EuiColorPicker
compressed
isClearable={true}
onChange={this.props.onColorChange}
color={this.props.color}
format="hex"
secondaryInputDisplay="top"
placeholder="No filter"
/>
</EuiFormRow>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
2 changes: 2 additions & 0 deletions public/js/components/layer_details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ export class LayerDetails extends PureComponent {
layerConfig={this.props.layerConfig}
onLanguageChange={this.props.onLanguageChange}
onColorChange={this.props.onColorChange}
onLabelModeChange={this.props.onLabelModeChange}
language={this.props.language}
labelMode={this.props.labelMode}
color={this.props.color}
/>
</div>
Expand Down