diff --git a/InitUiElements.ts b/InitUiElements.ts index 286d294..d6ba7b9 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -475,7 +475,7 @@ export class InitUiElements { throw "Layer " + layer + " was not substituted"; } - const generateInfo = (tagsES, feature) => { + const generateInfo = (tagsES) => { return new FeatureInfoBox( tagsES, diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index bcf71c4..c90e441 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -123,13 +123,9 @@ export class FilteredLayer { } }) } - - static fromDefinition( - definition, - showOnPopup: (tags: UIEventSource, feature: any) => UIElement): - FilteredLayer { - return new FilteredLayer( - definition, showOnPopup); + + static fromDefinition(definition, showOnPopup: (tags: UIEventSource, feature: any) => UIElement): FilteredLayer { + return new FilteredLayer(definition, showOnPopup); } @@ -239,7 +235,7 @@ export class FilteredLayer { } - // The data is split in two parts: the poinst and the rest + // The data is split in two parts: the point and the rest // The points get a special treatment in order to render them properly // Note that some features might get a point representation as well @@ -326,20 +322,23 @@ export class FilteredLayer { eventSource.addCallback(updateStyle); function openPopup(e) { - State.state.selectedElement.setData({feature: feature}); updateStyle() + + if (feature.geometry.type === "Point") { + State.state.selectedElement.setData({feature: feature}); return; // Points bind there own popups } const uiElement = self._showOnPopup(eventSource, feature); - L.popup({ autoPan: true, }).setContent(uiElement.Render()) .setLatLng(e.latlng) .openOn(State.state.bm.map); uiElement.Update(); + State.state.selectedElement.setData({feature: feature}); + if (e) { L.DomEvent.stop(e); // Marks the event as consumed } diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts index 6fe9948..fe757ca 100644 --- a/UI/FullScreenMessageBoxHandler.ts +++ b/UI/FullScreenMessageBoxHandler.ts @@ -10,41 +10,19 @@ export class FullScreenMessageBox extends UIElement { private static readonly _toTheMap_height : string = "5em"; - private _uielement: UIElement; private readonly returnToTheMap: UIElement; constructor(onClear: (() => void)) { super(State.state.fullScreenMessage); - const self = this; - State.state.fullScreenMessage.addCallbackAndRun(uiElement => { - this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle( - "display:block;"+ - "padding: 1em;"+ - "padding-bottom:6em;"+ - `margin-bottom:${FullScreenMessageBox._toTheMap_height};`+ - "box-sizing:border-box;"+ - `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+ - "overflow-y: auto;" + - "max-width:100vw;" + - "overflow-x:hidden;" + - "background:var(--background-color);" + - "color: var(--foreground-color);" - - ); - }); - - this.HideOnEmpty(true); - - State.state.fullScreenMessage.addCallback(latestData => { - if (latestData === undefined) { + State.state.fullScreenMessage.addCallbackAndRun(uiElement => { + if (uiElement === undefined) { location.hash = ""; } else { // The 'hash' makes sure a new piece of history is added. This makes the 'back-button' on android remove the popup location.hash = "#element"; } - this.Update(); - }) + }); if (window !== undefined) { window.onhashchange = function () { @@ -57,14 +35,15 @@ export class FullScreenMessageBox extends UIElement { } } + const self = this; this.returnToTheMap = new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")]) - .SetStyle("background:#7ebc6f;" + - "position: fixed;" + - "z-index: 10000;" + - "bottom: 0;" + - "left: 0;" + - `height: ${FullScreenMessageBox._toTheMap_height};` + + .SetStyle("background:#7ebc6f;" + + "position: fixed;" + + "z-index: 10000;" + + "bottom: 0;" + + "left: 0;" + + `height: ${FullScreenMessageBox._toTheMap_height};` + "width: 100vw;" + "color: white;" + "font-weight: bold;" + @@ -88,7 +67,24 @@ export class FullScreenMessageBox extends UIElement { if (State.state.fullScreenMessage.data === undefined) { return ""; } - return new Combine([this._uielement, this.returnToTheMap]) + + const el = document.getElementById(this.id); + console.warn(el, el.style.display); + + const uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle( + "display:block;" + + "padding: 1em;" + + "padding-bottom:6em;" + + `margin-bottom:${FullScreenMessageBox._toTheMap_height};` + + "box-sizing:border-box;" + + `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});` + + "overflow-y: auto;" + + "max-width:100vw;" + + "overflow-x:hidden;" + + "background:var(--background-color);" + + "color: var(--foreground-color);" + ); + return new Combine([uielement, this.returnToTheMap]) .Render(); } diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index ed66eb2..c6f59b0 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -40,6 +40,7 @@ export class FeatureInfoBox extends UIElement { } InnerRender(): string { + console.error("Inner rendering infobox for ", this._tags.data.id, this.id) return new Combine([ new Combine([this._title, this._titleIcons]) .SetClass("featureinfobox-titlebar"), diff --git a/Utils.ts b/Utils.ts index e6c1084..423ddb3 100644 --- a/Utils.ts +++ b/Utils.ts @@ -164,6 +164,7 @@ export class Utils { link.href = location; link.media = 'all'; head.appendChild(link); + console.log("Added custom layout ",location) } } diff --git a/assets/themes/surveillance_cameras/custom_theme.css b/assets/themes/surveillance_cameras/custom_theme.css index afbb787..d68e02a 100644 --- a/assets/themes/surveillance_cameras/custom_theme.css +++ b/assets/themes/surveillance_cameras/custom_theme.css @@ -1,6 +1,6 @@ html { - --subtle-detail-color: #070 !important; - --subtle-detail-color-contrast: #white !important; + --subtle-detail-color: #2c2 !important; + --subtle-detail-color-contrast: white !important; --popup-border: #00ff00 !important; --catch-detail-color: #00ff00 !important; --catch-detail-color-contrast: black !important; diff --git a/assets/themes/surveillance_cameras/surveillance_cameras.json b/assets/themes/surveillance_cameras/surveillance_cameras.json index 7d77260..c38e55e 100644 --- a/assets/themes/surveillance_cameras/surveillance_cameras.json +++ b/assets/themes/surveillance_cameras/surveillance_cameras.json @@ -111,7 +111,7 @@ }, { "question": { - "en": "What k ind of surveillance is this camera", + "en": "What kind of surveillance is this camera", "nl": "Wat soort bewaking wordt hier uitgevoerd?" }, "mappings": [ @@ -245,7 +245,12 @@ "color": { "render": "#00f" }, - "presets": [], + "presets": [ + { + "tags": ["man_made=surveillance","surveillance:type=camera"], + "title": "Surveillance camera" + } + ], "wayHandling": 2 } ], diff --git a/index.css b/index.css index 54dc235..d5c4f87 100644 --- a/index.css +++ b/index.css @@ -19,6 +19,9 @@ html, body { font-family: 'Helvetica Neue', Arial, sans-serif; } +a { + color: var(--foreground-color) +} svg { fill: var(--foreground-color) !important; @@ -38,7 +41,6 @@ svg path { .leaflet-popup-content-wrapper { background-color: var(--background-color); color: var(--foreground-color); - border: 2px solid var(--popup-border); box-shadow: 0 3px 14px var(--shadow-color) !important; } @@ -47,6 +49,12 @@ svg path { background-color: var(--background-color) !important; } +.leaflet-popup-tip { + background-color: var(--popup-border) !important; + color: var(--popup-border) !important; + box-shadow: 0 3px 14px var(--shadow-color) !important; +} + #geolocate-button { position: absolute; bottom: 25px; @@ -92,7 +100,7 @@ svg path { display: block; width: 2em; height: 2em; - padding: 1em; + padding: 0.75em; } /**************** GENERIC ****************/ @@ -284,9 +292,9 @@ svg path { background: var(--subtle-detail-color); color: var(--foreground-color); - height: 4em; - width: 4em; - padding: 1em; + height: 3.5em; + width: 3.5em; + padding: 0.75em; border-radius: 1em; }