#576 Vector Layer shapeIcon (#577)

NASA-AMMOS · Jul 23, 2024 · c152f01 · c152f01
1 parent 3c7bae9
commit c152f01
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/configure/src/metaconfigs/layer-vector-config.json b/configure/src/metaconfigs/layer-vector-config.json
@@ -213,7 +213,7 @@
               "description": "Radius in pixels of point features.",
               "type": "slider",
               "min": 0,
-              "max": 24,
+              "max": 32,
               "step": 1,
               "width": 2
             },
@@ -249,10 +249,17 @@
                 "pin"
               ]
             },
+            {
+              "field": "style.shapeIcon",
+              "name": "Shape From Icon",
+              "description": "Shape but taken from the Material Design Icon (mdi) library. akes priority over the value in the 'shape' field. See https://pictogrammers.com/library/mdi/",
+              "type": "text",
+              "width": 3
+            },
             {
               "field": "style.shapeProp",
               "name": "Shape From Property",
-              "description": "Shape but taken from each individual feature's property. For example 'shape' or 'path.to.prop.in.properties.object'. Takes priority over the value in the 'shape' field. Shape values are formatted like the dropdown options but all lowercase.",
+              "description": "Shape but taken from each individual feature's property. For example 'shape' or 'path.to.prop.in.properties.object'. Takes priority over the value in the 'shape' and 'shape from icon' fields. Shape values are formatted like the dropdown options but all lowercase. Material Design Icon (mdi) icon names are also supported values.",
               "type": "text",
               "width": 3
             }

diff --git a/src/essence/Basics/Layers_/LayerConstructors.js b/src/essence/Basics/Layers_/LayerConstructors.js
@@ -278,7 +278,8 @@ export const constructVectorLayer = (
             }
 
             // Use style.shapeProp
-            let finalShape = layerObj.shape
+            let finalShape = layerObj.style.shapeIcon || layerObj.shape
+
             if (
                 layerObj.style.shapeProp != null &&
                 layerObj.style.shapeProp != ''
@@ -382,12 +383,36 @@ export const constructVectorLayer = (
                     ].join('\n')
                     break
                 case 'none':
-                default:
                     layer = L.circleMarker(
                         latlong,
                         leafletLayerObject.style
                     ).setRadius(layerObj.style.radius || layerObj.radius || 8)
                     break
+                default:
+                    svg = [
+                        `<div style="color: ${
+                            featureStyle.fillColor
+                        }; transform: scale(${
+                            ((layerObj.style.radius || layerObj.radius || 8) *
+                                2) /
+                            24
+                        }); text-shadow:  
+                            1px 1px 0px ${featureStyle.color}, 
+                            -1px -1px 0px ${featureStyle.color}, 
+                            1px -1px 0px ${featureStyle.color}, 
+                            -1px 1px 0px ${featureStyle.color},
+
+                            0px 1px 0px ${featureStyle.color}, 
+                            -1px 0px 0px ${featureStyle.color}, 
+                            0px -1px 0px ${featureStyle.color}, 
+                            1px 0px 0px ${featureStyle.color};
+                            display: block;
+                            text-align: center;"
+                            ><i class='mdi mdi-${finalShape.replace(
+                                /[^a-zA-Z-]/g,
+                                ''
+                            )} mdi-24px'></i></div>`,
+                    ]
             }
 
             if (markerIcon) {