From bee60f7f6a0610240b8974f2d6c299010656aea4 Mon Sep 17 00:00:00 2001 From: Akihiro MATOBA Date: Wed, 3 Jan 2024 18:40:13 +0900 Subject: [PATCH 1/3] fallback if layer/group_setting lacks in assets/config/__map__.json --- components/PrintableMap.vue | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/PrintableMap.vue b/components/PrintableMap.vue index 14d5aa4d..f16c248a 100644 --- a/components/PrintableMap.vue +++ b/components/PrintableMap.vue @@ -21,22 +21,22 @@ div template(slot="marker") div.marker span( - :style="{background:mapConfig.layer_settings[marker.category].color}" + :style="{background:mapConfig.layer_settings[marker.category]?.color}" :class="{show: isDisplayAllCategory || activeCategory === marker.category}" ) i( - :class="[mapConfig.layer_settings[marker.category].icon_class, mapConfig.layer_settings[marker.category].class]" - :style="{backgroundColor:mapConfig.layer_settings[marker.category].color}" + :class="[mapConfig.layer_settings[marker.category]?.icon_class, mapConfig.layer_settings[marker.category]?.class]" + :style="{backgroundColor:mapConfig.layer_settings[marker.category]?.color}" ) b.number( - :style="{background:mapConfig.layer_settings[marker.category].bg_color}" + :style="{background:mapConfig.layer_settings[marker.category]?.bg_color}" ) {{inBoundsMarkers.indexOf(marker) + 1}} MglPopup div div.popup-type i( - :class="[mapConfig.layer_settings[marker.category].icon_class, mapConfig.layer_settings[marker.category].class]" - :style="{backgroundColor:mapConfig.layer_settings[marker.category].color}" + :class="[mapConfig.layer_settings[marker.category]?.icon_class, mapConfig.layer_settings[marker.category]?.class]" + :style="{backgroundColor:mapConfig.layer_settings[marker.category]?.color}" ) span.popup-poi-type | {{getMarkerCategoryText(marker.category, $i18n.locale)}} @@ -117,11 +117,11 @@ div :class='{show: isDisplayAllCategory || activeCategory === getMarkerCategoryText(group.category, $i18n.locale)}' ) h2.list-title( - :style="{backgroundColor:mapConfig.layer_settings[group.category].color}" + :style="{backgroundColor:mapConfig.layer_settings[group.category]?.color}" ) span.list-title-mark i( - :class="mapConfig.layer_settings[group.category].icon_class" + :class="mapConfig.layer_settings[group.category]?.icon_class" ) span {{getMarkerCategoryText(group.category, $i18n.locale)}} ul.list-items.grid-noGutter From 6e74b5b627b48172105ed012fe91352be918db7b Mon Sep 17 00:00:00 2001 From: Akihiro MATOBA Date: Wed, 3 Jan 2024 18:40:26 +0900 Subject: [PATCH 2/3] fix to use IconStyle color --- components/PrintableMap.vue | 4 ++-- lib/MapHelper.ts | 15 +++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/components/PrintableMap.vue b/components/PrintableMap.vue index f16c248a..e70633cb 100644 --- a/components/PrintableMap.vue +++ b/components/PrintableMap.vue @@ -21,12 +21,12 @@ div template(slot="marker") div.marker span( - :style="{background:mapConfig.layer_settings[marker.category]?.color}" + :style="{background:mapConfig.layer_settings[marker.category]?.color||marker.feature.properties['marker-color']||'red'}" :class="{show: isDisplayAllCategory || activeCategory === marker.category}" ) i( :class="[mapConfig.layer_settings[marker.category]?.icon_class, mapConfig.layer_settings[marker.category]?.class]" - :style="{backgroundColor:mapConfig.layer_settings[marker.category]?.color}" + :style="{backgroundColor:mapConfig.layer_settings[marker.category]?.color, display:mapConfig.layer_settings[marker.category]?'inline':'none'}" ) b.number( :style="{background:mapConfig.layer_settings[marker.category]?.bg_color}" diff --git a/lib/MapHelper.ts b/lib/MapHelper.ts index 93b8539d..56799ea1 100644 --- a/lib/MapHelper.ts +++ b/lib/MapHelper.ts @@ -139,7 +139,7 @@ export default class MapHelper implements IPrintableMap { } let markers = []; Array.prototype.forEach.call(folders, (folder) => { - let category = readCategoryOfFolder(folder, data).name; + let category = readCategoryOfFolder(folder, data); if (tj.kml(folder).type == "FeatureCollection") { let geojsondata: geoJson.FeatureCollection = tj.kml(folder, {styles: true}); @@ -147,14 +147,16 @@ export default class MapHelper implements IPrintableMap { //that.addFeatureCollection(geojsondata, category); const result = geojsondata.features.map((feature: geoJson.Feature) => { if (feature.geometry.type == "Point") { - markers.push({feature, category}); + feature.properties['marker-color'] = category.color; + markers.push({feature, category: category.name}); } }); return result; } } else { let geojsondata: geoJson.Feature = tj.kml(folder, {styles: true}); - markers.push({geojsondata, category}); + geojsondata.properties['marker-color'] = category.color; + markers.push({geojsondata, category: category.name}); } }); return [markers, updated_at]; @@ -229,7 +231,12 @@ export function readCategoryOfFolder(folder:Element, document:Document):Category let styleUrl = elem.querySelector("styleUrl").textContent; let style = document.querySelector(styleUrl); try{ - color = "#" + style.querySelector("IconStyle color").textContent.substr(0,6); // dirty fix + const c: String = style.querySelector("IconStyle color").textContent; + const a = parseInt('0x'+c.substring(0,2)) + const b = parseInt('0x'+c.substring(2,4)) + const g = parseInt('0x'+c.substring(4,6)) + const r = parseInt('0x'+c.substring(6,8)) + color = `rgba(${r},${g},${b},${a})` }catch(e){ color = DEFAULT_ICON_COLOR; } From 030de1935076dd458d2225f1cfdbb0e16586c88c Mon Sep 17 00:00:00 2001 From: Akihiro MATOBA Date: Wed, 3 Jan 2024 18:56:32 +0900 Subject: [PATCH 3/3] fix a range of css alpha value, 0..255 to 0.0..1.0 --- lib/MapHelper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/MapHelper.ts b/lib/MapHelper.ts index 56799ea1..79848cd8 100644 --- a/lib/MapHelper.ts +++ b/lib/MapHelper.ts @@ -232,7 +232,7 @@ export function readCategoryOfFolder(folder:Element, document:Document):Category let style = document.querySelector(styleUrl); try{ const c: String = style.querySelector("IconStyle color").textContent; - const a = parseInt('0x'+c.substring(0,2)) + const a = parseInt('0x'+c.substring(0,2)) / 255 const b = parseInt('0x'+c.substring(2,4)) const g = parseInt('0x'+c.substring(4,6)) const r = parseInt('0x'+c.substring(6,8))