@kalisio/kdk 2.1.9 → 2.2.0

package/map/client/components/KLayerStyleForm.vue

@@ -3,57 +3,46 @@
     <k-icon-chooser ref="iconChooser" @icon-choosed="onIconChanged" />
     <k-color-chooser ref="colorChooser" @color-choosed="onColorChanged" />
     <q-expansion-item id="style-general-group" default-opened icon="las la-low-vision" :label="$t('KLayerStyleForm.BASE')" group="group">
-      <q-list dense class="row">
-        <q-item class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle v-model="isVisible"/>
-          </q-item-section>
-          <q-item-section class="col-11 text-left">
-            {{$t('KLayerStyleForm.DEFAULT_VISIBILITY')}}
-          </q-item-section>
+      <q-list dense class="q-pa-md">
+        <q-item class="row justify-start">
+          <q-item-section class="col-1"><q-toggle v-model="isVisible"/></q-item-section>
+          <q-item-section>{{$t('KLayerStyleForm.DEFAULT_VISIBILITY')}}</q-item-section>
         </q-item>
-        <q-item class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle id="style-toggle-minzoom" v-model="hasMinZoom"/>
-          </q-item-section>
-          <q-item-section class="col-6 text-left">
-          {{$t('KLayerStyleForm.MIN_ZOOM')}}
-          </q-item-section>
-          <q-item-section class="col-4 text-left">
+        <q-item class="row justify-start">
+          <q-item-section class="col-1"><q-toggle id="style-toggle-minzoom" v-model="hasMinZoom"/></q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.MIN_ZOOM')}}&nbsp;&nbsp;&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-2">
             <q-slider id="style-set-minzoom" v-model="minZoom" :disable="!hasMinZoom"
               :min="minViewerZoom" :max="hasMaxZoom ? maxZoom : maxViewerZoom" :step="1"
               label label-always :label-value="minZoom"/>
           </q-item-section>
         </q-item>
-        <q-item class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle id="style-toggle-maxzoom" v-model="hasMaxZoom"/>
-          </q-item-section>
-          <q-item-section class="col-6 text-left">
-          {{$t('KLayerStyleForm.MAX_ZOOM')}}
-          </q-item-section>
-          <q-item-section class="col-4">
+        <q-item class="row justify-start">
+          <q-item-section class="col-1"><q-toggle id="style-toggle-maxzoom" v-model="hasMaxZoom"/></q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.MAX_ZOOM')}}&nbsp;&nbsp;&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-2">
             <q-slider id="style-set-maxzoom" v-model="maxZoom" :disable="!hasMaxZoom"
               :min="hasMinZoom ? minZoom : minViewerZoom" :max="maxViewerZoom" :step="1"
               label label-always :label-value="maxZoom"/>
           </q-item-section>
         </q-item>
-        <q-item class="col-12" v-if="isVectorLayer">
-          <q-item-section class="col-1">
-            <q-toggle id="style-is-selectable" v-model="isSelectable"/>
-          </q-item-section>
-          <q-item-section class="col-4 text-left">
-            {{$t('KLayerStyleForm.SELECTABLE')}}
+        <q-item class="row justify-start">
+          <q-item-section class="col-1"><q-toggle id="style-toggle-clustering" v-model="clustering"/></q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.POINT_CLUSTERING')}}&nbsp;&nbsp;&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-2">
+            <q-slider id="style-set-clustering" v-model="disableClusteringAtZoom" :disable="!clustering"
+              :min="minViewerZoom" :max="maxViewerZoom" :step="1"
+              label label-always :label-value="disableClusteringAtZoom"/>
           </q-item-section>
         </q-item>
-        <q-item v-if="!hasFeatureSchema" class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle v-model="hasOpacity"/>
-          </q-item-section>
-          <q-item-section class="col-6 text-left">
-          {{$t('KLayerStyleForm.LAYER_OPACITY')}}
-          </q-item-section>
-          <q-item-section class="col-4">
+        <q-item class="row justify-start" v-if="isVectorLayer">
+          <q-item-section class="col-1"><q-toggle id="style-is-selectable" v-model="isSelectable"/></q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.SELECTABLE')}}</q-item-section>
+        </q-item>
+        <q-item v-if="!hasFeatureSchema" class="row justify-start">
+          <q-item-section class="col-1"><q-toggle v-model="hasOpacity"/></q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.LAYER_OPACITY')}}&nbsp;&nbsp;&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-2">
             <q-slider v-model="opacity" :disable="!hasOpacity"
               :min="0" :max="1" :step="0.1"
               label label-always :label-value="$t('KLayerStyleForm.OPACITY') + ' ' + opacity"/>
@@ -62,225 +51,160 @@
       </q-list>
     </q-expansion-item>
     <q-expansion-item v-if="isVectorLayer" id="style-point-group" icon="las la-map-marker-alt" :label="$t('KLayerStyleForm.POINTS')" group="group">
-      <q-list dense class="row items-center justify-around q-pa-md">
-        <q-item class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle id="style-toggle-clustering" v-model="clustering"/>
-          </q-item-section>
-          <q-item-section class="col-6 text-left">
-          {{$t('KLayerStyleForm.POINT_CLUSTERING')}}
+      <q-list dense class="q-pa-md">
+        <q-item class="row justify-start">
+          <q-item-section avatar>{{$t('KLayerStyleForm.DEFAULT_ICON_STYLE')}}</q-item-section>
+          <q-item-section avatar><q-avatar id="style-point-icon" :text-color="defaultPoint['icon.color']" :icon="defaultPoint['icon.classes'] || 'fas fa-circle'"
+            :color="defaultPoint['icon.color'] === 'white' ? 'dark' : 'white'" @click="onIconClicked(defaultPoint)"/></q-item-section>
+          <q-item-section class="col-1"><q-select id="style-icon-size" :label="$t('KLayerStyleForm.ICON_SIZE')" hide-dropdown-icon v-model="defaultPoint['icon.size']" dense :options="getSizes()" emit-value map-options/>
+          </q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.DEFAULT_POINT_STYLE')}}&nbsp;&nbsp;</q-item-section>
+          <q-item-section avatar><q-btn id="style-point-color" round style="max-width: 16px" :color="defaultPoint['color']" @click="onColorClicked(defaultPoint, 'color')"/></q-item-section>
+          &nbsp;&nbsp;&nbsp;&nbsp;
+          <q-item-section class="col-1"><q-select id="style-point-size" :label="$t('KLayerStyleForm.POINT_SIZE')" hide-dropdown-icon v-model="defaultPoint.size" dense :options="getSizes()" emit-value map-options/>
+          </q-item-section>
+          <q-item-section avatar><q-select id="style-point-shape" :label="$t('KLayerStyleForm.POINT_SHAPE')" hide-dropdown-icon v-model="defaultPoint.shape" dense :options="getShapes()" emit-value map-options bottom-slots>
+            <template v-slot:selected-item="scope"><KShape :options="scope.opt"/></template>
+            <template v-slot:option="scope"><KShape class="row justify-center" v-bind="scope.itemProps" :options="scope.opt"/></template>
+          </q-select></q-item-section>
+        </q-item>
+        <q-item v-if="hasFeatureSchema" v-for="iconStyle in iconStyles" :key="iconStyle.key" class="row justify-start">
+          <q-item-section avatar><q-btn flat round color="primary" icon="las la-trash" @click="onRemoveIconStyle(iconStyle)">
+            <q-tooltip>{{$t('KLayerStyleForm.REMOVE_POINT_STYLE')}}</q-tooltip></q-btn>
           </q-item-section>
-          <q-item-section class="col-4">
-            <q-slider id="style-point-clustering" v-model="disableClusteringAtZoom" :disable="!clustering"
-              :min="minViewerZoom" :max="maxViewerZoom" :step="1"
-              label label-always :label-value="disableClusteringAtZoom"/>
+          <q-item-section avatar>{{$t('KLayerStyleForm.PROPERTY_ICON_STYLE')}}</q-item-section>
+          <q-item-section avatar><q-avatar :text-color="iconStyle['icon.color']" :icon="iconStyle['icon.classes']" color="white" @click="onIconClicked(iconStyle)"/></q-item-section>
+          <q-item-section class="col-1"><q-select :label="$t('KLayerStyleForm.ICON_SIZE')" hide-dropdown-icon v-model="iconStyle['icon.size']" dense :options="getSizes()" emit-value map-options/>
           </q-item-section>
-        </q-item>
-        <q-item class="col-12">
-          <q-item-section avatar>
-            <q-chip id="style-point-icons" clickable v-ripple text-color="white"
-              :icon="defaultIcon['icon-classes']" :color="defaultIcon['marker-color']" @click="onIconClicked(defaultIcon)"/>
+          <q-item-section avatar>{{$t('KLayerStyleForm.PROPERTY_POINT_STYLE')}}&nbsp;&nbsp;</q-item-section>
+          <q-item-section avatar><q-btn round style="max-width: 16px" :color="iconStyle['color']" @click="onColorClicked(iconStyle, 'color')"></q-btn></q-item-section>
+          &nbsp;&nbsp;&nbsp;&nbsp;
+          <q-item-section class="col-1"><q-select id="style-point-size" :label="$t('KLayerStyleForm.POINT_SIZE')" hide-dropdown-icon v-model="iconStyle.size" dense :options="getSizes()" emit-value map-options/>
           </q-item-section>
-          <q-item-section>
-            {{$t('KLayerStyleForm.DEFAULT_POINT_STYLE')}}
+          <q-item-section avatar><q-select id="style-point-shape" :label="$t('KLayerStyleForm.POINT_SHAPE')" hide-dropdown-icon v-model="iconStyle.shape" dense :options="getShapes()" emit-value map-options bottom-slots>
+            <template v-slot:selected-item="scope"><KShape :options="scope.opt"/></template>
+            <template v-slot:option="scope"><KShape class="row justify-center" v-bind="scope.itemProps" :options="scope.opt"/></template>
+          </q-select></q-item-section>
+          <q-item-section class="col-2"><q-select v-if="iconStyle.operator" v-model="iconStyle.operator" dense :options="getOperators(iconStyle)" emit-value map-options>
+              <template v-slot:prepend><span class="text-body2">{{$t('KLayerStyleForm.WHEN_PROPERTY_IS_POINT_STYLE', { property: iconStyle.property })}}</span></template></q-select>
           </q-item-section>
-        </q-item>
-        <q-item v-bind:id="'point-feature-schema-' + color" v-if="hasFeatureSchema" v-for="iconStyle in iconStyles" :key="iconStyle.key" class="col-12">
-          <q-item-section avatar>
-            <q-chip clickable v-ripple text-color="white"
-              :icon="iconStyle['icon-classes']" :color="iconStyle['marker-color']" @click="onIconClicked(iconStyle)"/>
-          </q-item-section>
-          <q-item-section avatar class="col-4">
-            <q-select v-if="iconStyle.operator" v-model="iconStyle.operator" :label="iconStyle.property" stack-label :options="getOperators(iconStyle)" emit-value map-options/>
-          </q-item-section>
-          <q-item-section class="col-5">
-            <component
-              :is="iconStyle.component"
-              :ref="iconStyle.onComponentCreated"
-              :properties="iconStyle.properties"
-              :display="{ icon: false, label: false }"
-              @field-changed="iconStyle.onValueChanged"
-            />
-          </q-item-section>
-          <q-item-section avatar>
-            <q-btn flat color="primary" icon="las la-trash" @click="onRemoveIconStyle(iconStyle)">
-              <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
-                {{$t('KLayerStyleForm.REMOVE_POINT_STYLE')}}
-              </q-tooltip>
-            </q-btn>
+          <q-item-section><component :is="iconStyle.component" :ref="iconStyle.onComponentCreated" :properties="iconStyle.properties" @field-changed="iconStyle.onValueChanged"/>
           </q-item-section>
         </q-item>
-        <q-item v-if="hasFeatureSchema" class="col-12">
-          <q-item-section avatar class="col-6 text-left">
-            {{$t('KLayerStyleForm.ADD_POINT_STYLE')}}
-          </q-item-section>
+        <q-item v-if="hasFeatureSchema" class="row justify-start">
           <q-item-section class="col-6">
             <q-select v-model="property" :options="properties">
-              <template v-slot:after>
-                <q-btn v-if="property" round dense flat icon="las la-plus" @click="onAddIconStyle(property)"/>
-              </template>
+              <template v-slot:prepend><span class="text-body2">{{$t('KLayerStyleForm.ADD_POINT_STYLE')}}</span></template>
+              <template v-slot:before><q-btn v-if="property" round dense flat icon="las la-plus" @click="onAddIconStyle(property)"/></template>
             </q-select>
           </q-item-section>
         </q-item>
       </q-list>
     </q-expansion-item>
     <q-expansion-item v-if="isVectorLayer" id="style-line-group" icon="las la-grip-lines" :label="$t('KLayerStyleForm.LINES')" group="group">
-      <q-list dense class="row items-center justify-around q-pa-md">
-        <q-item class="col-12">
-          <q-item-section class="col-6 text-left">
-            {{$t('KLayerStyleForm.DEFAULT_LINE_STYLE')}}
+      <q-list dense class="q-pa-md">
+        <q-item class="row justify-start">
+          <q-item-section avatar>{{$t('KLayerStyleForm.DEFAULT_LINE_STYLE')}}&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-1"><q-slider id="style-line-width" v-model="defaultLine['width']" :min="1" :max="20" :step="1"
+              dense label label-always :label-value="$t('KLayerStyleForm.LINE_WIDTH') + defaultLine['width'] + 'px'"/>
           </q-item-section>
-          <q-item-section class="col-1">
-            <q-btn id="style-line-color" round small :color="defaultLine['stroke-color']" @click="onColorClicked(defaultLine, 'stroke-color')">
-            </q-btn>
-          </q-item-section>
-          <q-item-section class="col-2">
-            <q-slider id="style-line-width" v-model="defaultLine['stroke-width']"
-              :min="1" :max="20" :step="1"
-              label label-always :label-value="$t('KLayerStyleForm.LINE_WIDTH') + defaultLine['stroke-width'] + 'px'"/>
-          </q-item-section>
-          <q-item-section class="col-2">
-            <q-slider id="style-line-opacity" v-model="defaultLine['stroke-opacity']"
-              :min="0" :max="1" :step="0.1"
-              label label-always :label-value="$t('KLayerStyleForm.LINE_OPACITY') + defaultLine['stroke-opacity']"/>
+          <q-item-section class="col-1"><q-slider id="style-line-opacity" v-model="defaultLine['opacity']" :min="0" :max="1" :step="0.1"
+              label label-always :label-value="$t('KLayerStyleForm.LINE_OPACITY') + defaultLine['opacity']"/>
           </q-item-section>
+          <q-item-section class="col-1"><q-btn id="style-line-color" round style="max-width: 16px" :color="defaultLine['color']" @click="onColorClicked(defaultLine, 'color')"/></q-item-section>
         </q-item>
-        <q-item v-if="hasFeatureSchema" v-for="lineStyle in lineStyles" :key="lineStyle.key" class="col-12">
-          <q-item-section avatar class="col-3">
-            <q-select v-if="lineStyle.operator" v-model="lineStyle.operator" :label="lineStyle.property" stack-label :options="getOperators(lineStyle)" emit-value map-options/>
-          </q-item-section>
-          <q-item-section class="col-3">
-            <component
-              :is="lineStyle.component"
-              :ref="lineStyle.onComponentCreated"
-              :properties="lineStyle.properties"
-              :display="{ icon: false, label: false }"
-              @field-changed="lineStyle.onValueChanged"
-            />
-          </q-item-section>
-          <q-item-section class="col-1">
-            <q-btn round small :color="lineStyle['stroke-color']" @click="onColorClicked(lineStyle, 'stroke-color')">
-            </q-btn>
+        <q-item v-if="hasFeatureSchema" v-for="lineStyle in lineStyles" :key="lineStyle.key" class="row justify-start">
+          <q-item-section avatar><q-btn flat round color="primary" icon="las la-trash" @click="onRemoveLineStyle(lineStyle)">
+            <q-tooltip>{{$t('KLayerStyleForm.REMOVE_LINE_STYLE')}}</q-tooltip></q-btn>
           </q-item-section>
-          <q-item-section class="col-2">
-            <q-slider v-model="lineStyle['stroke-width']"
-              :min="1" :max="20" :step="1"
-              label label-always :label-value="$t('KLayerStyleForm.LINE_WIDTH') + lineStyle['stroke-width'] + 'px'"/>
+          <q-item-section avatar>{{$t('KLayerStyleForm.PROPERTY_LINE_STYLE')}}</q-item-section>
+          <q-item-section class="col-1"><q-slider v-model="lineStyle['width']" :min="1" :max="20" :step="1"
+              label label-always :label-value="$t('KLayerStyleForm.LINE_WIDTH') + lineStyle['width'] + 'px'"/>
           </q-item-section>
-          <q-item-section class="col-2">
-            <q-slider v-model="lineStyle['stroke-opacity']"
-              :min="0" :max="1" :step="0.1"
-              label label-always :label-value="$t('KLayerStyleForm.LINE_OPACITY') + lineStyle['stroke-opacity']"/>
+          <q-item-section class="col-1"><q-slider v-model="lineStyle['opacity']" :min="0" :max="1" :step="0.1"
+              label label-always :label-value="$t('KLayerStyleForm.LINE_OPACITY') + lineStyle['opacity']"/>
           </q-item-section>
-          <q-item-section avatar>
-            <q-btn flat color="primary" icon="las la-trash" @click="onRemoveLineStyle(lineStyle)">
-              <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
-                {{$t('KLayerStyleForm.REMOVE_LINE_STYLE')}}
-              </q-tooltip>
-            </q-btn>
+          <q-item-section class="col-1"><q-btn round style="max-width: 16px" :color="lineStyle['color']" @click="onColorClicked(lineStyle, 'color')"/></q-item-section>
+          <q-item-section class="col-2"><q-select v-if="lineStyle.operator" v-model="lineStyle.operator" dense :options="getOperators(lineStyle)" emit-value map-options>
+              <template v-slot:prepend><span class="text-body2">{{$t('KLayerStyleForm.WHEN_PROPERTY_IS_LINE_STYLE', { property: lineStyle.property })}}</span></template></q-select>
           </q-item-section>
-        </q-item>
-        <q-item v-if="hasFeatureSchema" class="col-12">
-          <q-item-section avatar class="col-6 text-left">
-            {{$t('KLayerStyleForm.ADD_LINE_STYLE')}}
+          <q-item-section class="col-5"><component :is="lineStyle.component" :ref="lineStyle.onComponentCreated" :properties="lineStyle.properties" @field-changed="lineStyle.onValueChanged"/>
           </q-item-section>
+        </q-item>
+        <q-item v-if="hasFeatureSchema" class="row justify-start">
           <q-item-section class="col-6">
             <q-select v-model="property" :options="properties">
-              <template v-slot:after>
-                <q-btn v-if="property" round dense flat icon="las la-plus" @click="onAddLineStyle(property)"/>
-              </template>
+              <template v-slot:prepend><span class="text-body2">{{$t('KLayerStyleForm.ADD_LINE_STYLE')}}</span></template>
+              <template v-slot:before><q-btn v-if="property" round dense flat icon="las la-plus" @click="onAddLineStyle(property)"/></template>
             </q-select>
           </q-item-section>
         </q-item>
       </q-list>
     </q-expansion-item>
     <q-expansion-item v-if="isVectorLayer" id="style-polygon-group" icon="las la-draw-polygon" :label="$t('KLayerStyleForm.POLYGONS')" group="group">
-      <q-list dense class="row items-center justify-around q-pa-md">
-        <q-item class="col-12">
-          <q-item-section class="col-7">
-            {{$t('KLayerStyleForm.DEFAULT_POLYGON_FILL_STYLE')}}
+      <q-list dense class="q-pa-md">
+        <q-item class="row justify-start">
+          <q-item-section avatar>{{$t('KLayerStyleForm.DEFAULT_POLYGON_LINE_STYLE')}}&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-1"><q-slider id="style-polygon-line-width" v-model="defaultPolygon['stroke.width']" :min="1" :max="20" :step="1"
+              label label-always :label-value="$t('KLayerStyleForm.POLYGON_LINE_WIDTH') + defaultPolygon['stroke.width'] + 'px'"/>
           </q-item-section>
-          <q-item-section class="col-1">
-            <q-btn id="style-polygon-color" round small :color="defaultPolygon['fill-color']" @click="onColorClicked(defaultPolygon, 'fill-color')">
-            </q-btn>
+          <q-item-section class="col-1"><q-slider id="style-polygon-line-opacity" v-model="defaultPolygon['stroke.opacity']" :min="0" :max="1" :step="0.1"
+              label label-always :label-value="$t('KLayerStyleForm.POLYGON_LINE_OPACITY') + defaultPolygon['stroke.opacity']"/>
           </q-item-section>
-          <q-item-section class="col-2">
-            <q-slider id="style-fill-opacity" v-model="defaultPolygon['fill-opacity']"
-              :min="0" :max="1" :step="0.1"
-              label label-always :label-value="$t('KLayerStyleForm.POLYGON_FILL_OPACITY') + defaultPolygon['fill-opacity']"/>
+          <q-item-section class="col-1"><q-btn id="style-polygon-line-color" round style="max-width: 16px" :color="defaultPolygon['stroke.color']" @click="onColorClicked(defaultPolygon, 'stroke.color')"/>
+          </q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.DEFAULT_POLYGON_FILL_STYLE')}}&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-1"><q-slider id="style-polygon-opacity" v-model="defaultPolygon['opacity']" :min="0" :max="1" :step="0.1"
+              label label-always :label-value="$t('KLayerStyleForm.POLYGON_FILL_OPACITY') + defaultPolygon['opacity']"/>
+          </q-item-section>
+          <q-item-section class="col-1"><q-btn id="style-polygon-color" round style="max-width: 16px" :color="defaultPolygon['color']" @click="onColorClicked(defaultPolygon, 'color')"/>
           </q-item-section>
         </q-item>
-        <q-item v-if="hasFeatureSchema" v-for="polygonStyle in polygonStyles" :key="polygonStyle.key" class="col-12">
-          <q-item-section avatar class="col-3">
-            <q-select v-if="polygonStyle.operator" v-model="polygonStyle.operator" :label="polygonStyle.property" stack-label :options="getOperators(polygonStyle)" emit-value map-options/>
-          </q-item-section>
-          <q-item-section class="col-4">
-            <component
-              :is="polygonStyle.component"
-              :ref="polygonStyle.onComponentCreated"
-              :properties="polygonStyle.properties"
-              :display="{ icon: false, label: false }"
-              @field-changed="polygonStyle.onValueChanged"
-            />
-          </q-item-section>
-          <q-item-section class="col-1">
-            <q-btn round small :color="polygonStyle['fill-color']" @click="onColorClicked(polygonStyle, 'fill-color')">
-            </q-btn>
+        <q-item v-if="hasFeatureSchema" v-for="polygonStyle in polygonStyles" :key="polygonStyle.key" class="row justify-start">
+          <q-item-section avatar><q-btn flat round color="primary" icon="las la-trash" @click="onRemovePolygonStyle(polygonStyle)">
+            <q-tooltip>{{$t('KLayerStyleForm.REMOVE_POLYGON_STYLE')}}</q-tooltip></q-btn>
           </q-item-section>
-          <q-item-section class="col-2">
-            <q-slider v-model="polygonStyle['fill-opacity']"
-              :min="0" :max="1" :step="0.1"
-              label label-always :label-value="$t('KLayerStyleForm.POLYGON_FILL_OPACITY') + polygonStyle['fill-opacity']"/>
+          <q-item-section avatar>{{$t('KLayerStyleForm.PROPERTY_POLYGON_LINE_STYLE')}}</q-item-section>
+          <q-item-section class="col-1"><q-slider v-model="polygonStyle['stroke.width']" :min="1" :max="20" :step="1"
+              label label-always :label-value="$t('KLayerStyleForm.POLYGON_LINE_WIDTH') + polygonStyle['stroke.width'] + 'px'"/>
           </q-item-section>
-          <q-item-section avatar>
-            <q-btn flat color="primary" icon="las la-trash" @click="onRemovePolygonStyle(polygonStyle)">
-              <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
-                {{$t('KLayerStyleForm.REMOVE_POLYGON_STYLE')}}
-              </q-tooltip>
-            </q-btn>
+          <q-item-section class="col-1"><q-slider v-model="polygonStyle['stroke.opacity']" :min="0" :max="1" :step="0.1"
+              label label-always :label-value="$t('KLayerStyleForm.POLYGON_LINE_OPACITY') + polygonStyle['stroke.opacity']"/>
           </q-item-section>
-        </q-item>
-        <q-item v-if="hasFeatureSchema" class="col-12">
-          <q-item-section avatar class="col-6 text-left">
-            {{$t('KLayerStyleForm.ADD_POLYGON_STYLE')}}
+          <q-item-section><q-btn round style="max-width: 16px" :color="polygonStyle['stroke.color']" @click="onColorClicked(polygonStyle, 'stroke.color')"/>
+          </q-item-section>
+          <q-item-section avatar>{{$t('KLayerStyleForm.PROPERTY_POLYGON_FILL_STYLE')}}&nbsp;&nbsp;</q-item-section>
+          <q-item-section class="col-1"><q-slider v-model="polygonStyle['opacity']" :min="0" :max="1" :step="0.1"
+              label label-always :label-value="$t('KLayerStyleForm.POLYGON_FILL_OPACITY') + polygonStyle['opacity']"/>
+          </q-item-section>
+          <q-item-section class="col-1"><q-btn round style="max-width: 16px" :color="polygonStyle['color']" @click="onColorClicked(polygonStyle, 'color')"/>
           </q-item-section>
+          <q-item-section class="col-2"><q-select v-if="polygonStyle.operator" v-model="polygonStyle.operator" dense :options="getOperators(polygonStyle)" emit-value map-options>
+              <template v-slot:prepend><span class="text-body2">{{$t('KLayerStyleForm.WHEN_PROPERTY_IS_POLYGON_STYLE', { property: polygonStyle.property })}}</span></template></q-select>
+          </q-item-section>
+          <q-item-section class="col-3"><component :is="polygonStyle.component" :ref="polygonStyle.onComponentCreated" :properties="polygonStyle.properties" @field-changed="polygonStyle.onValueChanged"/>
+          </q-item-section>
+        </q-item>
+        <q-item v-if="hasFeatureSchema" class="row justify-start">
           <q-item-section class="col-6">
             <q-select v-model="property" :options="properties">
-              <template v-slot:after>
-                <q-btn v-if="property" round dense flat icon="las la-plus" @click="onAddPolygonStyle(property)"/>
-              </template>
+              <template v-slot:prepend><span class="text-body2">{{$t('KLayerStyleForm.ADD_POLYGON_STYLE')}}</span></template>
+              <template v-slot:before><q-btn v-if="property" round dense flat icon="las la-plus" @click="onAddPolygonStyle(property)"/></template>
             </q-select>
           </q-item-section>
         </q-item>
       </q-list>
     </q-expansion-item>
     <q-expansion-item v-if="hasFeatureSchema" ref="popup" id="style-popup-group" icon="las la-comment-alt" :label="$t('KLayerStyleForm.POPUP')" group="group">
-      <q-list dense class="row items-center justify-around q-pa-md">
-
-        <q-item class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle id="style-toggle-popup" v-model="popup"/>
-          </q-item-section>
-          <q-item-section class="col-11">
-            <q-select
-              for="style-popup-field"
-              id="style-popup-field"
-              :disable="!popup"
-              use-chips
-              v-model="popupProperties"
-              multiple
-              :options="properties"
-              :label="$t('KLayerStyleForm.ADD_POPUP')"
-            >
+      <q-list dense class="q-pa-md">
+        <q-item class="row justify-start">
+          <q-item-section class="col-1"><q-toggle id="style-toggle-popup" v-model="popup"/></q-item-section>
+          <q-item-section class="col-6"><q-select for="style-popup-field" id="style-popup-field" :disable="!popup" use-chips
+              v-model="popupProperties" multiple :options="properties" :label="$t('KLayerStyleForm.ADD_POPUP')">
               <!-- Options display -->
               <template v-slot:option="scope">
-                <q-item
-                  v-bind="scope.itemProps"
-                  :id="getPopupId(scope.opt)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ scope.opt.label }}</q-item-label>
-                  </q-item-section>
+                <q-item v-bind="scope.itemProps" :id="getPopupId(scope.opt)">
+                  <q-item-section> <q-item-label>{{ scope.opt.label }}</q-item-label> </q-item-section>
                 </q-item>
               </template>
             </q-select>
@@ -289,29 +213,15 @@
       </q-list>
     </q-expansion-item>
     <q-expansion-item v-if="hasFeatureSchema" ref="tooltip" id="style-tooltip-group" icon="las la-mouse-pointer" :label="$t('KLayerStyleForm.TOOLTIP')" group="group">
-      <q-list dense class="row items-center justify-around q-pa-md">
-        <q-item class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle id="style-toggle-tooltip" v-model="tooltip"/>
-          </q-item-section>
-          <q-item-section class="col-11">
-            <q-select
-              for="style-tooltip-field"
-              id="style-tooltip-field"
-              :disable="!tooltip"
-              v-model="tooltipProperty"
-              :options="properties"
-              :label="$t('KLayerStyleForm.ADD_TOOLTIP')"
-            >
+      <q-list dense class="q-pa-md">
+        <q-item class="row justify-start">
+          <q-item-section class="col-1"><q-toggle id="style-toggle-tooltip" v-model="tooltip"/></q-item-section>
+          <q-item-section class="col-6"><q-select for="style-tooltip-field" id="style-tooltip-field" :disable="!tooltip"
+              v-model="tooltipProperty" :options="properties" :label="$t('KLayerStyleForm.ADD_TOOLTIP')">
               <!-- Options display -->
               <template v-slot:option="scope">
-                <q-item
-                  v-bind="scope.itemProps"
-                  :id="getPopupId(scope.opt)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ scope.opt.label }}</q-item-label>
-                  </q-item-section>
+                <q-item v-bind="scope.itemProps" :id="getPopupId(scope.opt)" >
+                  <q-item-section> <q-item-label>{{ scope.opt.label }}</q-item-label> </q-item-section>
                 </q-item>
               </template>
             </q-select>
@@ -320,31 +230,15 @@
       </q-list>
     </q-expansion-item>
     <q-expansion-item v-if="hasFeatureSchema" ref="infobox" id="style-infobox-group" icon="las la-th-list" :label="$t('KLayerStyleForm.INFOBOX')" group="group">
-      <q-list dense class="row items-center justify-around q-pa-md">
-        <q-item class="col-12">
-          <q-item-section class="col-1">
-            <q-toggle id="style-toggle-infobox" v-model="infobox"/>
-          </q-item-section>
-          <q-item-section class="col-11">
-            <q-select
-              for="style-infobox-field"
-              id="style-infobox-field"
-              :disable="!infobox"
-              use-chips
-              v-model="infoboxProperties"
-              multiple
-              :options="properties"
-              :label="$t('KLayerStyleForm.ADD_INFOBOX')"
-            >
+      <q-list dense class="q-pa-md">
+        <q-item class="row justify-start">
+          <q-item-section class="col-1"><q-toggle id="style-toggle-infobox" v-model="infobox"/> </q-item-section>
+          <q-item-section class="col-6"><q-select for="style-infobox-field" id="style-infobox-field" :disable="!infobox" use-chips
+            v-model="infoboxProperties" multiple :options="properties" :label="$t('KLayerStyleForm.ADD_INFOBOX')" >
               <!-- Options display -->
               <template v-slot:option="scope">
-                <q-item
-                  v-bind="scope.itemProps"
-                  :id="getPopupId(scope.opt)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ scope.opt.label }}</q-item-label>
-                  </q-item-section>
+                <q-item v-bind="scope.itemProps" :id="getPopupId(scope.opt)" >
+                  <q-item-section> <q-item-label>{{ scope.opt.label }}</q-item-label> </q-item-section>
                 </q-item>
               </template>
             </q-select>
@@ -354,12 +248,8 @@
     </q-expansion-item>
     <q-list v-show="hasError" dense class="row items-center justify-around q-pa-md">
       <q-item>
-        <q-item-section side>
-          <q-icon name="las la-exclamation-circle" color="negative" />
-        </q-item-section>
-        <q-item-section class="text-negative">
-        {{error}}
-        </q-item-section>
+        <q-item-section side> <q-icon name="las la-exclamation-circle" color="negative" /> </q-item-section>
+        <q-item-section class="text-negative">{{error}} </q-item-section>
       </q-item>
     </q-list>
   </div>
@@ -370,13 +260,15 @@ import _ from 'lodash'
 import logger from 'loglevel'
 import { uid } from 'quasar'
 import { mixins as kCoreMixins, utils as kCoreUtils } from '../../../core/client'
-import { KIconChooser, KColorChooser } from '../../../core/client/components'
+import { KIconChooser, KColorChooser, KShape } from '../../../core/client/components'
+import { processStyleTemplates, generateStyleTemplates } from '../utils/utils.style.js'
 
 export default {
   name: 'k-layer-style-form',
   components: {
     KIconChooser,
-    KColorChooser
+    KColorChooser,
+    KShape
   },
   emits: [
     'form-ready'
@@ -402,9 +294,9 @@ export default {
     properties () {
       const properties = []
       _.forOwn(this.fields, (value, key) => {
-        // Use helper or ID
+        // Use label or ID
         properties.push({
-          label: _.get(value, 'field.helper', key),
+          label: _.get(value, 'field.label', key),
           value: key
         })
       })
@@ -441,22 +333,11 @@ export default {
       infoboxProperties: [],
       clustering: true,
       disableClusteringAtZoom: 18,
-      // Required to detail style properties upfront for reactivity
-      defaultIcon: {
-        'marker-color': 'blue',
-        'icon-classes': 'fas fa-circle'
-      },
+      defaultPoint: {},
       iconStyles: [],
-      defaultLine: {
-        'stroke-color': 'red',
-        'stroke-width': 3,
-        'stroke-opacity': 1
-      },
+      defaultLine: {},
       lineStyles: [],
-      defaultPolygon: {
-        'fill-color': 'green',
-        'fill-opacity': 1
-      },
+      defaultPolygon: {},
       polygonStyles: [],
       hasError: false,
       error: ''
@@ -492,7 +373,7 @@ export default {
         properties.field.options = values.map(value => ({ value, label: (_.isNil(value) ? 'NIL' : value) }))
       }
       // Remove label as we add it on top of the operator
-      properties.field.helper = ''
+      properties.field.label = ''
       // Load the required component
       const component = kCoreUtils.loadComponent(componentName)
       const style = {
@@ -507,6 +388,17 @@ export default {
       }
       return Object.assign(style, options)
     },
+    getSizes () {
+      // From 8 to 64 by step of 8
+      return Array(8).fill().map((_, i) => ({
+        label: `${8 * i + 8}px`,
+        value: 8 * i + 8
+      }))
+    },
+    getShapes () {
+      return ['none', 'circle', 'triangle-down', 'triangle', 'triangle-right', 'triangle-left', 'rect', 'diamond', 'star', 'marker-pin', 'square-pin']
+        .map(shape => ({ value: shape, shape, size: 32, opacity: 0.1, color: 'primary', stroke: { color: 'primary', width: 2 } }))
+    },
     getOperators (style) {
       let operators = [{
         label: this.$t('KLayerStyleForm.EQUAL'),
@@ -526,120 +418,13 @@ export default {
       }
       return operators
     },
-    async processTemplates (values, properties, defaultStyle, styles) {
-      // We have styles for a set of feature property values templated using if statements
-      // For instance if I want all linear features with property 'A' equals 'V' to be green,
-      // all linear features with property 'B' equals 'U' to be red, and all others to be blue (default style),
-      // the 'stroke' style property value once converted to template will be the following:
-      // if (properties.A === "V") { %>#00FF00<% } else
-      // if (properties.B === "U") { %>#FF0000<% } else
-      // { %>#0000FF<% }
-
-      // First split after the last else statement to get default style values, then split after each if/else statement
-      // We will have an array of template statements, actually one for each style property (i.e. stroke-width, marker-color, etc.)
-      const templates = {}
-      properties.forEach((property, index) => {
-        const templateStatements = _.get(values, `leaflet.${property}`).split('} else {')
-        templates[property] = templateStatements[0].split(' else ').concat(templateStatements[1])
-      })
-      // Process default style values
-      properties.forEach((property) => {
-        // Default style value is contained in the last template statement
-        let template = templates[property].pop()
-        // Extract it using a regex
-        template = template.match(/%>([^<%]+)<%/)[1]
-        // Conversion from palette to RGB color is required
-        const value = (property.includes('color') ? kCoreUtils.getPaletteFromColor(template) : template)
-        // Convert to number whenever required
-        if (property.includes('width') || property.includes('opacity')) {
-          defaultStyle[property] = _.toNumber(value)
-        } else {
-          defaultStyle[property] = value
-        }
-      })
-      // Then process all templated if statements
-      // As all templates have the same conditional structure use the first template to extract property values
-      const templatesStructure = templates[properties[0]]
-      for (let index = 0; index < templatesStructure.length; index++) {
-        const template = templatesStructure[index]
-        // Identify used operator first
-        const operators = ['===', '!==', '>', '<']
-        const operator = _.find(operators, operator => template.includes(` ${operator} `))
-        // Match properties + operator to get property name part
-        const propertyNameRegex = new RegExp(`properties.([^${operator}]+)${operator}`, 'g')
-        let propertyName = propertyNameRegex.exec(template)[1].trim()
-        const isNumber = !propertyName.includes('.toString()')
-        propertyName = propertyName.replace('.toString()', '')
-        // Split at operator
-        let propertyValue = template.split(` ${operator} `)[1]
-        // Match until last parenthesis of the if expression to get property value part
-        propertyValue = propertyValue.slice(0, propertyValue.indexOf(')'))
-        // Omit enclosing quotes for strings
-        propertyValue = propertyValue.replaceAll('"', '').trim()
-        if (isNumber) propertyValue = _.toNumber(propertyValue)
-        let style = { value: propertyValue, operator }
-        properties.forEach(property => {
-          // Match %> <% block to get style values, e.g. icon colors/names
-          const match = /%>([^<%]+)<%/g.exec(templates[property][index])
-          const value = (match ? match[1].trim() : '')
-          // Conversion from palette to RGB color is required
-          style[property] = (property.includes('color')
-            ? kCoreUtils.getPaletteFromColor(value)
-            : (_.isNumber(value) ? Number(value) : value))
-        })
-        style = await this.createStyle(propertyName, style)
-        styles.push(style)
+    async processTemplates (values, properties, styleType, defaultStyle, styles) {
+      processStyleTemplates(values.leaflet, properties, styleType, defaultStyle, styles)
+      // Jump from style object to internal requirements for UI with additional component, etc.
+      for (let i = 0; i < styles.length; i++) {
+        styles[i] = await this.createStyle(styles[i].property, styles[i])
       }
     },
-    generateTemplates (properties, defaultStyle, styles) {
-      const hasStyles = (styles.length > 0)
-      const values = {}
-      const templates = properties.map(property => '')
-      // Process all styles, a style is a matching feature property value associated with a style property values.
-      // It is expressed as a if statement in the final template expression of the style property.
-      // For instance if I want all linear features with property 'A' equals 'V' to be green,
-      // all linear features with property 'B' equals 'U' to be red, and all others to be blue (default style),
-      // the 'stroke' style property value once converted to template will be the following:
-      // if (properties.A === "V") { %>#00FF00<% } else
-      // if (properties.B === "U") { %>#FF0000<% } else
-      // { %>#0000FF<% }
-      styles.forEach(style => {
-        // Process all properties, for each property
-        properties.forEach((property, index) => {
-          // Conversion from palette to RGB color is required
-          const value = (property.includes('color')
-            ? kCoreUtils.getColorFromPalette(style[property])
-            : style[property])
-          let propertyName = style.property
-          let propertyValue = style.value
-          const propertyOperator = style.operator
-          if (typeof propertyValue !== 'number') {
-            propertyName = `${propertyName}.toString()`
-            propertyValue = `"${propertyValue}"`
-          }
-          // Generate style value for given property value
-          templates[index] += `if (properties.${propertyName} ${propertyOperator} ${propertyValue}) { %>${value}<% } else `
-        })
-      })
-      // Process default style for each style property
-      // If there are some styles based on feature property values it will be the last else statement
-      // otherwise it will simply be the sole value in the template expression
-      properties.forEach((property, index) => {
-        // Conversion from palette to RGB color is required
-        const value = (property.includes('color')
-          ? kCoreUtils.getColorFromPalette(defaultStyle[property])
-          : defaultStyle[property])
-        // Avoid converting numbers to string on default values
-        if (hasStyles) templates[index] += `{ %>${value}<% }`
-        else templates[index] = value
-      })
-      // Set all templates
-      properties.forEach((property, index) => {
-        values[`leaflet.${property}`] = (hasStyles ? `<% ${templates[index]} %>` : templates[index])
-      })
-      values['leaflet.template'] = (hasStyles ? properties : [])
-      return values
-    },
     fillBaseStyle (values) {
       this.isVisible = _.get(values, 'leaflet.isVisible', true)
       this.hasMinZoom = !!_.get(values, 'leaflet.minZoom')
@@ -659,44 +444,69 @@ export default {
       this.iconStyles = []
       const templates = _.get(values, 'leaflet.template', [])
       // When no template we have a single default icon
-      if (!templates.includes('marker-color') && !templates.includes('icon-classes')) {
+      if (!templates.includes('style.point.color')) {
         // Conversion from palette to RGB color is required for markers
-        this.defaultIcon['marker-color'] = kCoreUtils.getPaletteFromColor(_.get(values, 'leaflet.marker-color',
-          _.get(this.options, 'pointStyle.icon.options.markerColor', 'blue')))
-        this.defaultIcon['icon-classes'] = _.get(values, 'leaflet.icon-classes',
-          _.get(this.options, 'pointStyle.icon.options.iconClasses', 'fas fa-circle'))
+        this.defaultPoint.color = kCoreUtils.getPaletteFromColor(
+          _.get(values, 'leaflet.style.point.color',
+            _.get(this.options, 'style.point.color', kCoreUtils.getColorFromPalette('red'))))
+        this.defaultPoint.size = _.get(values, 'leaflet.style.point.size',
+          _.get(this.options, 'style.point.size', 24))
+        this.defaultPoint.shape = _.get(values, 'leaflet.style.point.shape',
+          _.get(this.options, 'style.point.shape', 'circle'))
+        this.defaultPoint['icon.classes'] =
+          _.get(values, 'leaflet.style.point.icon.classes',
+            _.get(this.options, 'style.point.icon.classes', ''))
+        this.defaultPoint['icon.color'] = kCoreUtils.getPaletteFromColor(
+          _.get(values, 'leaflet.style.point.icon.color',
+            _.get(this.options, 'style.point.icon.color', kCoreUtils.getColorFromPalette('black'))))
+        this.defaultPoint['icon.size'] = _.get(values, 'leaflet.style.point.icon.size',
+          _.get(this.options, 'style.point.icon.size', 12))
       } else {
-        await this.processTemplates(values, ['marker-color', 'icon-classes'], this.defaultIcon, this.iconStyles)
+        await this.processTemplates(values, ['color', 'size', 'shape', 'icon.classes', 'icon.color', 'icon.size'], 'point', this.defaultPoint, this.iconStyles)
       }
     },
     async fillLineStyles (values) {
       this.lineStyles = []
       const templates = _.get(values, 'leaflet.template', [])
       // When no template we have a single default style
-      if (!templates.includes('stroke-color') && !templates.includes('stroke-width') && !templates.includes('stroke-opacity')) {
+      if (!templates.includes('style.line.color')) {
         // Conversion from palette to RGB color is required for path style
-        this.defaultLine['stroke-color'] = kCoreUtils.getPaletteFromColor(_.get(values, 'leaflet.stroke-color',
-          kCoreUtils.getColorFromPalette(_.get(this.options, 'featureStyle.color'), 'red')))
-        this.defaultLine['stroke-width'] = _.get(values, 'leaflet.stroke-width',
-          _.get(this.options, 'featureStyle.weight', 3))
-        this.defaultLine['stroke-opacity'] = _.get(values, 'leaflet.stroke-opacity',
-          _.get(this.options, 'featureStyle.opacity', 1))
+        this.defaultLine.color = kCoreUtils.getPaletteFromColor(
+          _.get(values, 'leaflet.style.line.color',
+            _.get(this.options, 'style.line.color'), kCoreUtils.getColorFromPalette('red')))
+        this.defaultLine.width =
+          _.get(values, 'leaflet.style.line.width',
+            _.get(this.options, 'style.line.width', 3))
+        this.defaultLine.opacity =
+          _.get(values, 'leaflet.style.line.opacity',
+            _.get(this.options, 'style.line.opacity', 1))
       } else {
-        await this.processTemplates(values, ['stroke-color', 'stroke-width', 'stroke-opacity'], this.defaultLine, this.lineStyles)
+        await this.processTemplates(values, ['color', 'width', 'opacity'], 'line', this.defaultLine, this.lineStyles)
       }
     },
     async fillPolygonStyles (values) {
       this.polygonStyles = []
       const templates = _.get(values, 'leaflet.template', [])
       // When no template we have a single default style
-      if (!templates.includes('fill-color') && !templates.includes('fill-opacity')) {
+      if (!templates.includes('style.polygon.color')) {
         // Conversion from palette to RGB color is required for path style
-        this.defaultPolygon['fill-color'] = kCoreUtils.getPaletteFromColor(_.get(values, 'leaflet.fill-color',
-          kCoreUtils.getColorFromPalette(_.get(this.options, 'featureStyle.fillColor', 'green'))))
-        this.defaultPolygon['fill-opacity'] = _.get(values, 'leaflet.fill-opacity',
-          _.get(this.options, 'featureStyle.fillOpacity', 1))
+        this.defaultPolygon.color = kCoreUtils.getPaletteFromColor(
+          _.get(values, 'leaflet.style.polygon.color',
+            _.get(this.options, 'style.polygon.color', kCoreUtils.getColorFromPalette('red'))))
+        this.defaultPolygon.opacity =
+          _.get(values, 'leaflet.style.polygon.opacity',
+            _.get(this.options, 'style.polygon.opacity', 1))
+        this.defaultPolygon['stroke.color'] = kCoreUtils.getPaletteFromColor(
+          _.get(values, 'leaflet.style.polygon.stroke.color',
+            _.get(this.options, 'style.polygon.stroke.color', kCoreUtils.getColorFromPalette('red'))))
+        this.defaultPolygon['stroke.width'] =
+          _.get(values, 'leaflet.style.polygon.stroke.width',
+            _.get(this.options, 'style.polygon.stroke.width', 3))
+        this.defaultPolygon['stroke.opacity'] =
+          _.get(values, 'leaflet.style.polygon.stroke.opacity',
+            _.get(this.options, 'style.polygon.stroke.opacity', 1))
       } else {
-        await this.processTemplates(values, ['fill-color', 'fill-opacity'], this.defaultPolygon, this.polygonStyles)
+        await this.processTemplates(values, ['color', 'opacity', 'stroke.color', 'stroke.width', 'stroke.opacity'], 'polygon', this.defaultPolygon, this.polygonStyles)
       }
     },
     async fillPopupStyles (values) {
@@ -785,29 +595,38 @@ export default {
       }
     },
     iconStylesValues () {
-      const values = this.generateTemplates(['marker-color', 'icon-classes'], this.defaultIcon, this.iconStyles)
-      values['leaflet.icon-color'] = '#FFFFFF'
-      return values
+      // Use dot notation as it will be used to update style values using a patch operation
+      const templates = generateStyleTemplates(['color', 'size', 'shape', 'icon.classes', 'icon.color', 'icon.size'], 'point', this.defaultPoint, this.iconStyles)
+      // Globe does only support simple styling and maki icon right now
+      return Object.assign({}, _.mapKeys(templates, (value, key) => `leaflet.${key}`),
+        _.mapKeys(_.pick(templates, ['style.point.shape', 'style.point.size', 'style.point.color']), (value, key) => `cesium.${key}`))
     },
     lineStylesValues () {
-      return this.generateTemplates(['stroke-color', 'stroke-width', 'stroke-opacity'], this.defaultLine, this.lineStyles)
+      // Use dot notation as it will be used to update style values using a patch operation
+      const templates = generateStyleTemplates(['color', 'width', 'opacity'], 'line', this.defaultLine, this.lineStyles)
+      return Object.assign({}, _.mapKeys(templates, (value, key) => `leaflet.${key}`), _.mapKeys(templates, (value, key) => `cesium.${key}`))
     },
     polygonStylesValues () {
-      return this.generateTemplates(['fill-color', 'fill-opacity'], this.defaultPolygon, this.polygonStyles)
+      // Use dot notation as it will be used to update style values using a patch operation
+      const templates = generateStyleTemplates(['color', 'opacity', 'stroke.color', 'stroke.width', 'stroke.opacity'], 'polygon', this.defaultPolygon, this.polygonStyles)
+      return Object.assign({}, _.mapKeys(templates, (value, key) => `leaflet.${key}`), _.mapKeys(templates, (value, key) => `cesium.${key}`))
     },
     popupStylesValues () {
       return {
-        'leaflet.popup': (this.popup ? { pick: this.popupProperties.map(property => property.value) } : false)
+        'leaflet.popup': (this.popup ? { pick: this.popupProperties.map(property => property.value) } : false),
+        'cesium.popup': (this.popup ? { pick: this.popupProperties.map(property => property.value) } : false)
       }
     },
     tooltipStylesValues () {
       return {
-        'leaflet.tooltip': (this.tooltip ? { property: this.tooltipProperty.value } : false)
+        'leaflet.tooltip': (this.tooltip ? { property: this.tooltipProperty.value } : false),
+        'cesium.tooltip': (this.tooltip ? { property: this.tooltipProperty.value } : false)
       }
     },
     infoBoxStylesValues () {
       return {
-        'leaflet.infobox': (this.infobox ? { pick: this.infoboxProperties.map(property => property.value) } : false)
+        'leaflet.infobox': (this.infobox ? { pick: this.infoboxProperties.map(property => property.value) } : false),
+        'cesium.infobox': (this.infobox ? { pick: this.infoboxProperties.map(property => property.value) } : false)
       }
     },
     values () {
@@ -837,11 +656,15 @@ export default {
     },
     async onAddIconStyle (property) {
       // Default icon
-      let color = _.get(this.options, 'pointStyle.icon.options.markerColor')
+      let color = _.get(this.options, 'style.point.color')
       if (color) color = kCoreUtils.getPaletteFromColor(color)
       const style = await this.createStyle(property.value, {
-        'icon-classes': _.get(this.options, 'pointStyle.icon.options.iconClasses', 'fas fa-circle'),
-        'marker-color': color || 'blue'
+        'icon.classes': _.get(this.options, 'style.point.icon.classes', 'fas fa-circle'),
+        'icon.color': _.get(this.options, 'style.point.icon.color', 'black'),
+        'icon.size': _.get(this.options, 'style.point.icon.size', 12),
+        color: color || 'red',
+        size: _.get(this.options, 'style.point.size', 24),
+        shape: _.get(this.options, 'style.point.shape', 'circle')
       })
       this.iconStyles.push(style)
     },
@@ -852,14 +675,14 @@ export default {
     onIconClicked (style) {
       this.editedStyle = style
       this.$refs.iconChooser.open({
-        name: style['icon-classes'],
-        color: style['marker-color']
+        name: style['icon.classes'],
+        color: style['icon.color']
       })
     },
     onIconChanged (icon) {
       Object.assign(this.editedStyle, {
-        'marker-color': icon.color,
-        'icon-classes': icon.name
+        'icon.color': icon.color,
+        'icon.classes': icon.name
       })
     },
     onColorClicked (style, color) {
@@ -873,9 +696,9 @@ export default {
     async onAddLineStyle (property) {
       const style = await this.createStyle(property.value, {
         // Default line
-        'stroke-color': _.get(this.options, 'featureStyle.color', 'red'),
-        'stroke-width': _.get(this.options, 'featureStyle.weight', 1),
-        'stroke-opacity': _.get(this.options, 'featureStyle.opacity', 1)
+        color: _.get(this.options, 'style.line.color', 'red'),
+        width: _.get(this.options, 'style.line.width', 1),
+        opacity: _.get(this.options, 'style.line.opacity', 1)
       })
       this.lineStyles.push(style)
     },
@@ -886,8 +709,11 @@ export default {
     async onAddPolygonStyle (property) {
       const style = await this.createStyle(property.value, {
         // Default line
-        'fill-color': _.get(this.options, 'featureStyle.fillColor', 'green'),
-        'fill-opacity': _.get(this.options, 'featureStyle.fillOpacity', 1)
+        color: _.get(this.options, 'style.polygon.color', 'green'),
+        opacity: _.get(this.options, 'style.polygon.opacity', 1),
+        'stroke.color': _.get(this.options, 'style.polygon.stroke.color', 'red'),
+        'stroke.width': _.get(this.options, 'style.polygon.stroke.width', 1),
+        'stroke.opacity': _.get(this.options, 'style.polygon.stroke.opacity', 1)
       })
       this.polygonStyles.push(style)
     },