Merge pull request #430 from matobaa/feature/223-default-color-for-ca…

…tegories Feature/223 default color for categories
codeforjapan · Jan 4, 2024 · fabf7a7 · fabf7a7
2 parents cdf4ba9 + 030de19
commit fabf7a7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git 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||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}"
+                      :class="[mapConfig.layer_settings[marker.category]?.icon_class, mapConfig.layer_settings[marker.category]?.class]"
+                      :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}"
+                      :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

diff --git a/lib/MapHelper.ts b/lib/MapHelper.ts
@@ -139,22 +139,24 @@ 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});
         if (geojsondata.features.length > 0) {
           //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)) / 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))
+              color = `rgba(${r},${g},${b},${a})`
             }catch(e){
               color = DEFAULT_ICON_COLOR;
             }