forked from MapComplete/MapComplete
Fix popup which doesn't show up in the case of duplicate elements on the map
This commit is contained in:
parent
54edcf793b
commit
ab05979b81
2 changed files with 19 additions and 4 deletions
|
@ -6,6 +6,7 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
|
||||||
import FeatureInfoBox from "../Popup/FeatureInfoBox";
|
import FeatureInfoBox from "../Popup/FeatureInfoBox";
|
||||||
import State from "../../State";
|
import State from "../../State";
|
||||||
import {ShowDataLayerOptions} from "./ShowDataLayerOptions";
|
import {ShowDataLayerOptions} from "./ShowDataLayerOptions";
|
||||||
|
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||||
|
|
||||||
export default class ShowDataLayer {
|
export default class ShowDataLayer {
|
||||||
|
|
||||||
|
@ -28,9 +29,13 @@ export default class ShowDataLayer {
|
||||||
*/
|
*/
|
||||||
private readonly leafletLayersPerId = new Map<string, { feature: any, leafletlayer: any }>()
|
private readonly leafletLayersPerId = new Map<string, { feature: any, leafletlayer: any }>()
|
||||||
|
|
||||||
|
private readonly showDataLayerid : number;
|
||||||
|
private static dataLayerIds = 0
|
||||||
|
|
||||||
constructor(options: ShowDataLayerOptions & { layerToShow: LayerConfig }) {
|
constructor(options: ShowDataLayerOptions & { layerToShow: LayerConfig }) {
|
||||||
this._leafletMap = options.leafletMap;
|
this._leafletMap = options.leafletMap;
|
||||||
|
this.showDataLayerid = ShowDataLayer.dataLayerIds;
|
||||||
|
ShowDataLayer.dataLayerIds++
|
||||||
this._enablePopups = options.enablePopups ?? true;
|
this._enablePopups = options.enablePopups ?? true;
|
||||||
if (options.features === undefined) {
|
if (options.features === undefined) {
|
||||||
throw "Invalid ShowDataLayer invocation"
|
throw "Invalid ShowDataLayer invocation"
|
||||||
|
@ -221,9 +226,8 @@ export default class ShowDataLayer {
|
||||||
|
|
||||||
let infobox: FeatureInfoBox = undefined;
|
let infobox: FeatureInfoBox = undefined;
|
||||||
|
|
||||||
const id = `popup-${feature.properties.id}-${feature.geometry.type}-${this._cleanCount}`
|
const id = `popup-${feature.properties.id}-${feature.geometry.type}-${this.showDataLayerid}-${this._cleanCount}`
|
||||||
popup.setContent(`<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type}</div>`)
|
popup.setContent(`<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type} ${id} is loading</div>`)
|
||||||
|
|
||||||
leafletLayer.on("popupopen", () => {
|
leafletLayer.on("popupopen", () => {
|
||||||
if (infobox === undefined) {
|
if (infobox === undefined) {
|
||||||
const tags = State.state.allElements.getEventSourceById(feature.properties.id);
|
const tags = State.state.allElements.getEventSourceById(feature.properties.id);
|
||||||
|
|
|
@ -502,7 +502,18 @@ There are also some technicalities in your theme to keep in mind:
|
||||||
const text = args[2]
|
const text = args[2]
|
||||||
const autoapply = args[3]?.toLowerCase() === "true"
|
const autoapply = args[3]?.toLowerCase() === "true"
|
||||||
const overwrite = args[4]?.toLowerCase() === "true"
|
const overwrite = args[4]?.toLowerCase() === "true"
|
||||||
const featureIds : UIEventSource<string[]> = tagsSource.map(tags => JSON.parse(tags[featureIdsKey]))
|
const featureIds : UIEventSource<string[]> = tagsSource.map(tags => {
|
||||||
|
const ids = tags[featureIdsKey]
|
||||||
|
try{
|
||||||
|
if(ids === undefined){
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
return JSON.parse(ids);
|
||||||
|
}catch(e){
|
||||||
|
console.warn("Could not parse ", ids, "as JSON to extract IDS which should be shown on the map.")
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
})
|
||||||
return new MultiApply(
|
return new MultiApply(
|
||||||
{
|
{
|
||||||
featureIds,
|
featureIds,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue