Skip to content

Commit

Permalink
Merge pull request #877 from stadtnavi/feat/sort-map-layers-dialog
Browse files Browse the repository at this point in the history 
feat(layer-dialog): sort entries by layer config order
  • Loading branch information
@andreashelms
andreashelms authored Jan 9, 2025
2 parents 36e6951 + c779758 commit 7532003
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 22 deletions.
87 changes: 65 additions & 22 deletions app/component/MapLayersDialogContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,16 +137,16 @@ class MapLayersDialogContent extends React.Component {
(l.category === undefined || l.category === category),
)
.map(layer => {
const key = layer.id || layer.url;
const id = layer.id || layer.url;
return {
key,
key: layer.code || id,
checked:
(layer.isOffByDefault && geoJson[key] === true) ||
(!layer.isOffByDefault && geoJson[key] !== false), // todo: is active?
(layer.isOffByDefault && geoJson[id] === true) ||
(!layer.isOffByDefault && geoJson[id] !== false), // todo: is active?
defaultMessage: layer.name?.[lang] || layer.defaultMessage,
labelId: layer.labelId, // todo: rename?
icon: layer.icon,
settings: { geoJson: key },
settings: { geoJson: id },
};
}) || []
);
Expand Down Expand Up @@ -211,7 +211,7 @@ class MapLayersDialogContent extends React.Component {
return {
checked,
label: translations[intl.locale],
key: `map-layer-${code}`,
key: code,
categories: categories?.map(category => ({
...category,
settings: category.code,
Expand Down Expand Up @@ -242,6 +242,24 @@ class MapLayersDialogContent extends React.Component {
({ code }) => code === 'health_and_social_services',
);

const sortLayersByKey = (a, b) => {
// Retrieve the order of the layers from the configuration.
// Top- and Sub-level category codes are considered.
const layerOrder =
config.layers
?.flatMap(category => category.categories || category)
.map(category => [
category.code,
// Retrieve order of sub-categories if they exist
...(category.categories
? category.categories.map(({ code }) => code)
: []),
])
.flat() || [];

return layerOrder.indexOf(a.key) - layerOrder.indexOf(b.key);
};

return (
<>
<button
Expand Down Expand Up @@ -276,20 +294,23 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Bus stop',
labelId: 'map-layer-stop-bus',
icon: 'icon-icon_stop_bus',
key: 'bus',
settings: { stop: 'bus' },
},
isTransportModeEnabled(transportModes.subway) && {
checked: terminal.subway,
defaultMessage: 'Subway station',
labelId: 'map-layer-terminal-subway',
icon: 'icon-icon_stop_subway',
key: 'subway',
settings: { stop: 'subway', terminal: 'subway' },
},
isTransportModeEnabled(transportModes.rail) && {
checked: terminal.rail,
defaultMessage: 'Railway station',
labelId: 'map-layer-terminal-rail',
icon: 'icon-icon_stop_rail',
key: 'rail',
settings: { stop: 'rail', terminal: 'rail' },
},
isTransportModeEnabled(transportModes.tram) && {
Expand All @@ -298,6 +319,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Tram stop',
labelId: 'map-layer-stop-tram',
icon: 'icon-icon_stop_tram',
key: 'tram',
settings: { stop: 'tram' },
},
isTransportModeEnabled(transportModes.funicular) && {
Expand All @@ -313,6 +335,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Ferry',
labelId: 'map-layer-stop-ferry',
icon: 'icon-icon_stop_ferry',
key: 'ferry',
settings: { stop: 'ferry' },
},
this.context.config.vehicles && {
Expand All @@ -321,9 +344,10 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Moving vehicles',
labelId: 'map-layer-vehicles',
icon: 'icon-icon_moving_bus',
key: 'vehicles',
settings: 'vehicles',
},
]}
].sort(sortLayersByKey)}
/>
<LayerCategoryDropdown
icon="icon-icon_bike_car"
Expand All @@ -339,6 +363,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Bike parks',
labelId: 'map-layer-bike-parks', // todo: rename?
icon: 'icon-bike-park',
key: 'parkAndRideForBikes',
settings: 'parkAndRideForBikes',
},
]
Expand All @@ -357,6 +382,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Roadworks',
labelId: 'map-layer-roadworks',
icon: 'icon-icon_roadworks',
key: 'roadworks',
settings: 'roadworks',
},
this.context.config.weatherStations &&
Expand All @@ -365,6 +391,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Weather stations',
labelId: 'map-layer-weather-stations',
icon: 'icon-icon_stop_monitor',
key: 'weatherStations',
settings: 'weatherStations',
},
this.context.config.parkAndRide &&
Expand All @@ -375,6 +402,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Park &amp; ride',
labelId: 'map-layer-park-and-ride',
icon: 'icon-icon_open_carpark',
key: 'parkAndRide',
settings: 'parkAndRide',
},
this.context.config.chargingStations &&
Expand All @@ -383,6 +411,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Charging stations',
labelId: 'map-layer-charging-stations',
icon: 'icon-icon_stop_car_charging_station',
key: 'chargingStations',
settings: 'chargingStations',
},
])
Expand All @@ -395,7 +424,8 @@ class MapLayersDialogContent extends React.Component {
),
)
.concat(datahubBicycleLayers)
.concat(getPoiLayers(bikeCarLayer))}
.concat(getPoiLayers(bikeCarLayer))
.sort(sortLayersByKey)}
/>
<LayerCategoryDropdown
icon="icon-icon_material_bike_scooter"
Expand All @@ -412,6 +442,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Rental Bikes',
labelId: 'map-layer-sharing-bicycle',
icon: 'icon-icon_rental_bicycle',
key: 'bicycle',
settings: { rental: 'bicycle' },
},
this.context.config?.cityBike?.showCityBikes &&
Expand All @@ -421,6 +452,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Rental Scooters',
labelId: 'map-layer-sharing-scooter',
icon: 'icon-icon_rental_scooter',
key: 'scooter',
settings: { rental: 'scooter' },
},
this.context.config?.cityBike?.showCityBikes &&
Expand All @@ -430,6 +462,7 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Rental Cargo-Bikes',
labelId: 'map-layer-sharing-cargo_bicycle',
icon: 'icon-icon_rental_cargo_bicycle',
key: 'cargo_bicycle',
settings: { rental: 'cargo_bicycle' },
},
this.context.config?.cityBike?.showCityBikes &&
Expand All @@ -439,16 +472,20 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Rental Cars',
labelId: 'map-layer-sharing-car',
icon: 'icon-icon_rental_car',
key: 'car',
settings: { rental: 'car' },
},
isTransportModeEnabled(transportModes.carpool) && {
checked: terminal.carpool,
defaultMessage: 'Carpool stops',
labelId: 'map-layer-carpool',
icon: 'icon-icon_carpool_stops',
key: 'carpool',
settings: { stop: 'carpool', terminal: 'carpool' },
},
].concat(getPoiLayers(sharingServicesLayer))}
]
.concat(getPoiLayers(sharingServicesLayer))
.sort(sortLayersByKey)}
/>
<LayerCategoryDropdown
icon="icon-icon_leisure_tourism"
Expand All @@ -457,16 +494,16 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Leisure & Tourism',
})}
onChange={this.updateSetting}
options={[]
.concat(getPoiLayers(leisureAndTourismLayer))
options={getPoiLayers(leisureAndTourismLayer)
.concat(
this.layerOptionsByCategory(
'leisure_and_tourism',
config.geoJson?.layers,
geoJson,
this.props.lang,
),
)}
)
.sort(sortLayersByKey)}
/>
<LayerCategoryDropdown
icon="icon-icon_shopping_services"
Expand All @@ -475,7 +512,9 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Shopping & Services',
})}
onChange={this.updateSetting}
options={getPoiLayers(shoppingAndServicesLayer)}
options={getPoiLayers(shoppingAndServicesLayer).sort(
sortLayersByKey,
)}
/>
<LayerCategoryDropdown
icon="icon-icon_public_facilities"
Expand All @@ -484,7 +523,9 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Public Facilities',
})}
onChange={this.updateSetting}
options={getPoiLayers(publicFacilitiesLayer)}
options={getPoiLayers(publicFacilitiesLayer).sort(
sortLayersByKey,
)}
/>
<LayerCategoryDropdown
icon="icon-icon_health_social_services"
Expand All @@ -493,14 +534,16 @@ class MapLayersDialogContent extends React.Component {
defaultMessage: 'Health & Social Services',
})}
onChange={this.updateSetting}
options={getPoiLayers(healthAndSocialServicesLayer).concat(
this.layerOptionsByCategory(
'health_and_social_services',
config.geoJson?.layers,
geoJson,
this.props.lang,
),
)}
options={getPoiLayers(healthAndSocialServicesLayer)
.concat(
this.layerOptionsByCategory(
'health_and_social_services',
config.geoJson?.layers,
geoJson,
this.props.lang,
),
)
.sort(sortLayersByKey)}
/>
</div>

Expand Down
6 changes: 6 additions & 0 deletions app/configurations/config.herrenberg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,7 @@ export default configMerger(parentConfig, {
layers: [
// bicycleinfrastructure includes repair stations,
{
code: 'bike_repair',
name: {
fi: '',
en: 'Bicycle service stations',
Expand All @@ -381,6 +382,7 @@ export default configMerger(parentConfig, {
},
// Bicycle network layer
{
code: 'cycle_network',
name: {
fi: '',
en: "Bicycle network",
Expand All @@ -397,6 +399,7 @@ export default configMerger(parentConfig, {
},
// LoRaWan map layer
{
code: 'loarawan_gateways',
name: {
fi: '',
en: 'LoRaWAN Gateways',
Expand All @@ -409,6 +412,7 @@ export default configMerger(parentConfig, {
},
// Nette Toilette layer
{
code: 'friendly_toilet',
name: {
fi: '',
en: 'Public Toilets',
Expand All @@ -420,6 +424,7 @@ export default configMerger(parentConfig, {
icon: 'icon-icon_public_toilets',
},
{
code: 'sights',
name: {
fi: '',
en: 'sights',
Expand All @@ -431,6 +436,7 @@ export default configMerger(parentConfig, {
icon: 'icon-icon_sights',
},
{
code: 'school_route_map',
name: {
fi: '',
en: 'School route map',
Expand Down

0 comments on commit 7532003

Please sign in to comment.