diff --git a/src/assets/js/map-util.js b/src/assets/js/map-util.js
index da388ae4d557cea90b06bd042558b32c38661b03..b89c5a07dcc1d1ed39225ad038c1870d03ab3b36 100644
--- a/src/assets/js/map-util.js
+++ b/src/assets/js/map-util.js
@@ -398,7 +398,10 @@ const mapUtil = {
         if (color == undefined){
           color = featureType.color;
         }
-        const colorValue = color.value ? color.value : color;
+        const colorValue =
+          color.value && color.value.length ?
+            color.value : typeof color === 'string' && color.length ?
+              color : '#000000';
         if (geomJSON.type === 'Point') {
           if (
             customFieldOption &&
@@ -407,7 +410,10 @@ const mapUtil = {
             featureType.colors_style.value.icons &&
             !!Object.keys(featureType.colors_style.value.icons).length
           ) {
-            if (featureType.colors_style.value.icons[customFieldOption]) {
+            if (
+              featureType.colors_style.value.icons[customFieldOption] &&
+              featureType.colors_style.value.icons[customFieldOption] !== 'circle'
+            ) {
               const iconHTML = `
                 <i
                   class="fas fa-${featureType.colors_style.value.icons[customFieldOption]} fa-lg"
@@ -428,16 +434,16 @@ const mapUtil = {
                 .addTo(featureGroup);
             } else {
               L.circleMarker(geomJSON.coordinates, {
-                color: color,
+                color: colorValue,
                 radius: 4,
                 fillOpacity: 0.5,
                 weight: 3,
               })
-              .bindPopup(popupContent)
-              .addTo(featureGroup);
+                .bindPopup(popupContent)
+                .addTo(featureGroup);
             }
           } else {
-            if (featureType.icon) {
+            if (featureType.icon && featureType.icon !== 'circle') {
               const iconHTML = `
                 <i
                   class="fas fa-${featureType.icon} fa-lg"