Add vector style management.

2025-11-28 11:04:08 +01:00 · 2015-01-09 11:53:58 +01:00
parent 9c689b072d
commit 37851110b0
23 changed files with 955 additions and 218 deletions
--- a/module/assets/img/style.png
+++ b/module/assets/img/style.png
--- a/module/config/config.php
+++ b/module/config/config.php
@@ -3,17 +3,37 @@
 /*
 * Backend module.
 */
-$GLOBALS['BE_MOD']['content']['leaflet'] = array(
-    'tables' => array(
-        'tl_leaflet_map',
-        'tl_leaflet_layer',
-        'tl_leaflet_control',
-        'tl_leaflet_marker',
-        'tl_leaflet_vector',
-        'tl_leaflet_icon',
-    ),
-    'icon'       => 'system/modules/leaflet/assets/img/leaflet.png',
-    'stylesheet' => 'system/modules/leaflet/assets/css/backend.css',
+array_insert(
+    $GLOBALS['BE_MOD'],
+    1,
+    array(
+        'leaflet' => array
+        (
+            'leaflet_map' => array
+            (
+                'tables' => array
+                (
+                    'tl_leaflet_map',
+                    'tl_leaflet_control',
+                ),
+                'icon'       => 'system/modules/leaflet/assets/img/leaflet.png',
+                'stylesheet' => 'system/modules/leaflet/assets/css/backend.css',
+            ),
+            'leaflet_layer' => array
+            (
+                'tables' => array
+                (
+                    'tl_leaflet_layer',
+                    'tl_leaflet_marker',
+                    'tl_leaflet_vector',
+                    'tl_leaflet_icon',
+                    'tl_leaflet_style',
+                ),
+                'icon'       => 'system/modules/leaflet/assets/img/layers.png',
+                'stylesheet' => 'system/modules/leaflet/assets/css/backend.css',
+            )
+        )
+    )
 );

 /*
@@ -30,6 +50,7 @@ $GLOBALS['TL_MODELS']['tl_leaflet_icon']    = 'Netzmacht\Contao\Leaflet\Model\Ic
 $GLOBALS['TL_MODELS']['tl_leaflet_layer']   = 'Netzmacht\Contao\Leaflet\Model\LayerModel';
 $GLOBALS['TL_MODELS']['tl_leaflet_map']     = 'Netzmacht\Contao\Leaflet\Model\MapModel';
 $GLOBALS['TL_MODELS']['tl_leaflet_marker']  = 'Netzmacht\Contao\Leaflet\Model\MarkerModel';
+$GLOBALS['TL_MODELS']['tl_leaflet_style']   = 'Netzmacht\Contao\Leaflet\Model\StyleModel';
 $GLOBALS['TL_MODELS']['tl_leaflet_vector']  = 'Netzmacht\Contao\Leaflet\Model\VectorModel';


@@ -40,18 +61,21 @@ $GLOBALS['TL_MODELS']['tl_leaflet_vector']  = 'Netzmacht\Contao\Leaflet\Model\Ve
 */
 $GLOBALS['LEAFLET_MAPPERS']   = array();
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\MapMapper';
+
+// Layer mappers.
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Layer\ProviderLayerMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Layer\MarkersLayerMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Layer\GroupLayerMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Layer\VectorsLayerMapper';
+
+// Control mappers.
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Control\ZoomControlMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Control\ScaleControlMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Control\LayersControlMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Control\AttributionControlMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Control\LoadingControlMapper';
-$GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\UI\MarkerMapper';
-$GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Type\ImageIconMapper';
-$GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Type\DivIconMapper';
+
+// Vector mappers.
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Vector\PolylineMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Vector\MultiPolylineMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Vector\PolygonMapper';
@@ -60,6 +84,12 @@ $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Vector\CircleMa
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Vector\CircleMarkerMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Vector\RectangleMapper';

+// Miscellaneous mappers.
+$GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\UI\MarkerMapper';
+$GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Type\ImageIconMapper';
+$GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Type\DivIconMapper';
+$GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Style\FixedStyleMapper';
+
 /*
 * Leaflet encoders.
 *
@@ -128,6 +158,15 @@ $GLOBALS['LEAFLET_CONTROLS']   = array('zoom', 'layers', 'scale', 'attribution',
 $GLOBALS['LEAFLET_ICONS'] = array('image', 'div');


+/*
+ * The style concept is not part of the LeafletJS library. Styles are extracted from the Path options. Instead
+ * of defining the style for every vector again, manage them at one place.
+ *
+ * The goal is to provide different style strategies. For instance a random style chooser, one which uses a color
+ * range and so one.
+ */
+$GLOBALS['LEAFLET_STYLES'] = array('fixed');
+
 /*
 * Leaflet vectors.
 *
--- a/module/dca/tl_leaflet_control.php
+++ b/module/dca/tl_leaflet_control.php
@@ -180,6 +180,7 @@ $GLOBALS['TL_DCA']['tl_leaflet_control'] = array
            'exclude'   => true,
            'inputType' => 'select',
            'filter'    => true,
+            'sorting'   => true,
            'options'   => array('topleft', 'topright', 'bottomleft', 'bottomright'),
            'reference' => &$GLOBALS['TL_LANG']['tl_leaflet_control'],
            'eval'      => array('mandatory' => true, 'maxlength' => 255, 'tl_class' => 'w50', 'helpwizard' => true),
--- a/module/dca/tl_leaflet_icon.php
+++ b/module/dca/tl_leaflet_icon.php
@@ -31,13 +31,6 @@ $GLOBALS['TL_DCA']['tl_leaflet_icon'] = array
        ),
        'global_operations' => array
        (
-            'map' => array
-            (
-                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['map'],
-                'href'                => 'table=tl_leaflet_map',
-                'icon'                => 'system/modules/leaflet/assets/img/leaflet.png',
-                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="m"'
-            ),
            'layers' => array
            (
                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['layersBtn'],
@@ -45,6 +38,13 @@ $GLOBALS['TL_DCA']['tl_leaflet_icon'] = array
                'icon'                => 'system/modules/leaflet/assets/img/layers.png',
                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="e"'
            ),
+            'styles' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['styles'],
+                'href'                => 'table=tl_leaflet_style',
+                'icon'                => 'system/modules/leaflet/assets/img/style.png',
+                'attributes'          => 'onclick="Backend.getScrollOffset();"'
+            ),
            'all' => array
            (
                'label'               => &$GLOBALS['TL_LANG']['MSC']['all'],
--- a/module/dca/tl_leaflet_layer.php
+++ b/module/dca/tl_leaflet_layer.php
@@ -34,26 +34,26 @@ $GLOBALS['TL_DCA']['tl_leaflet_layer'] = array
        ),
        'global_operations' => array
        (
-            'map' => array
+            'styles' => array
            (
-                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_layer']['map'],
-                'href'                => 'table=tl_leaflet_map',
-                'icon'                => 'system/modules/leaflet/assets/img/leaflet.png',
-                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="m"'
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_layer']['styles'],
+                'href'                => 'table=tl_leaflet_style',
+                'icon'                => 'system/modules/leaflet/assets/img/style.png',
+                'attributes'          => 'onclick="Backend.getScrollOffset();"'
            ),
            'icons' => array
            (
                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_layer']['icons'],
                'href'                => 'table=tl_leaflet_icon',
                'icon'                => 'system/modules/leaflet/assets/img/icons.png',
-                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="e"'
+                'attributes'          => 'onclick="Backend.getScrollOffset();"'
            ),
            'all' => array
            (
                'label'               => &$GLOBALS['TL_LANG']['MSC']['all'],
                'href'                => 'act=select',
                'class'               => 'header_edit_all',
-                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="e"'
+                'attributes'          => 'onclick="Backend.getScrollOffset();"'
            )
        ),
        'operations' => array
--- a/module/dca/tl_leaflet_map.php
+++ b/module/dca/tl_leaflet_map.php
@@ -31,20 +31,6 @@ $GLOBALS['TL_DCA']['tl_leaflet_map'] = array
        ),
        'global_operations' => array
        (
-            'layers' => array
-            (
-                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_map']['layersBtn'],
-                'href'                => 'table=tl_leaflet_layer',
-                'icon'                => 'system/modules/leaflet/assets/img/layers.png',
-                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="e"'
-            ),
-            'icons' => array
-            (
-                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_map']['icons'],
-                'href'                => 'table=tl_leaflet_icon',
-                'icon'                => 'system/modules/leaflet/assets/img/icons.png',
-                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="e"'
-            ),
            'all' => array
            (
                'label'               => &$GLOBALS['TL_LANG']['MSC']['all'],
--- a/module/dca/tl_leaflet_style.php
+++ b/module/dca/tl_leaflet_style.php
@@ -0,0 +1,273 @@
+<?php
+
+$GLOBALS['TL_DCA']['tl_leaflet_style'] = array
+(
+    'config' => array(
+        'dataContainer'    => 'Table',
+        'enableVersioning' => true,
+        'sql'              => array
+        (
+            'keys' => array
+            (
+                'id' => 'primary'
+            )
+        )
+    ),
+
+    'list' => array
+    (
+        'sorting' => array
+        (
+            'mode'                    => 1,
+            'fields'                  => array('title'),
+            'flag'                    => 1,
+            'panelLayout'             => 'limit',
+            'headerFields'            => array('title', 'type'),
+        ),
+        'label' => array
+        (
+            'fields'                  => array('title', 'type'),
+            'format'                  => '%s <span class="tl_gray">[%s]</span>',
+        ),
+        'global_operations' => array
+        (
+            'layers' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_style']['layersBtn'],
+                'href'                => 'table=tl_leaflet_layer',
+                'icon'                => 'system/modules/leaflet/assets/img/layers.png',
+                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="e"'
+            ),
+            'icons' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_style']['icons'],
+                'href'                => 'table=tl_leaflet_icon',
+                'icon'                => 'system/modules/leaflet/assets/img/icons.png',
+                'attributes'          => 'onclick="Backend.getScrollOffset();"'
+            ),
+            'all' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['MSC']['all'],
+                'href'                => 'act=select',
+                'class'               => 'header_edit_all',
+                'attributes'          => 'onclick="Backend.getScrollOffset();" accesskey="e"'
+            ),
+        ),
+        'operations' => array
+        (
+            'edit' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_style']['edit'],
+                'href'                => 'act=edit',
+                'icon'                => 'edit.gif'
+            ),
+            'copy' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_style']['copy'],
+                'href'                => 'act=copy',
+                'icon'                => 'copy.gif'
+            ),
+            'delete' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_style']['delete'],
+                'href'                => 'act=delete',
+                'icon'                => 'delete.gif',
+                'attributes'          => 'onclick="if(!confirm(\'' . $GLOBALS['TL_LANG']['MSC']['deleteConfirm'] . '\'))return false;Backend.getScrollOffset()"'
+            ),
+            'toggle' => array
+            (
+                'label'           => &$GLOBALS['TL_LANG']['tl_leaflet_style']['toggle'],
+                'icon'            => 'visible.gif',
+                'attributes'      => 'onclick="Backend.getScrollOffset();return AjaxRequest.toggleVisibility(this,%s)"',
+                'button_callback' => \Netzmacht\Contao\DevTools\Dca::createToggleIconCallback(
+                    'tl_leaflet_style',
+                    'active'
+                )
+            ),
+            'show' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_style']['show'],
+                'href'                => 'act=show',
+                'icon'                => 'show.gif'
+            )
+        )
+    ),
+
+    'palettes' => array(
+        '__selector__' => array('type')
+    ),
+
+    'metapalettes'    => array(
+        'default' => array(
+            'title'  => array('title', 'alias', 'type'),
+            'config' => array(),
+            'active' => array('active'),
+        ),
+        'fixed extends default' => array(
+            'config' => array('stroke', 'fill'),
+        ),
+    ),
+
+    'metasubpalettes' => array(
+        'stroke'    => array('color', 'weight', 'opacity', 'dashArray', 'lineCap', 'lineJoin'),
+        'fill'      => array('fillColor', 'fillOpacity',)
+    ),
+
+    'fields' => array
+    (
+        'id'           => array
+        (
+            'sql' => "int(10) unsigned NOT NULL auto_increment"
+        ),
+        'tstamp'       => array
+        (
+            'sql' => "int(10) unsigned NOT NULL default '0'"
+        ),
+        'title'        => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['title'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'eval'      => array('mandatory' => true, 'maxlength' => 255, 'tl_class' => 'w50'),
+            'sql'       => "varchar(255) NOT NULL default ''"
+        ),
+        'alias'        => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['alias'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'eval'      => array('mandatory' => false, 'maxlength' => 255, 'tl_class' => 'w50'),
+            'sql'       => "varchar(255) NOT NULL default ''"
+        ),
+        'type'                  => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['type'],
+            'exclude'   => true,
+            'inputType' => 'select',
+            'eval'      => array(
+                'mandatory'          => true,
+                'tl_class'           => 'w50',
+                'includeBlankOption' => true,
+                'submitOnChange'     => true,
+                'chosen'             => true,
+            ),
+            'options'   => &$GLOBALS['LEAFLET_STYLES'],
+            'reference' => &$GLOBALS['TL_LANG']['leaflet_style'],
+            'sql'       => "varchar(32) NOT NULL default ''"
+        ),
+        'stroke'                => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['stroke'],
+            'exclude'   => true,
+            'inputType' => 'checkbox',
+            'default'   => true,
+            'eval'      => array('tl_class' => 'w50', 'submitOnChange' => true),
+            'sql'       => "char(1) NOT NULL default '1'"
+        ),
+        'color'                 => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['color'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'wizard'    => array(
+                \Netzmacht\Contao\DevTools\Dca::createColorPickerCallback(),
+            ),
+            'eval'      => array(
+                'tl_class'       => 'w50 wizard clr',
+                'maxlength'      => 7,
+                'decodeEntities' => true
+            ),
+            'sql'       => "varchar(8) NOT NULL default ''"
+        ),
+        'weight'  => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['weight'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'default'   => 5,
+            'eval'      => array('mandatory' => false, 'maxlength' => 4, 'rgxp' => 'digit', 'tl_class' => 'w50'),
+            'sql'       => "int(4) NOT NULL default '5'"
+        ),
+        'opacity'  => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['opacity'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'default'   => '0.5',
+            'eval'      => array('mandatory' => false, 'maxlength' => 4, 'rgxp' => 'digit', 'tl_class' => 'w50'),
+            'sql'       => "varchar(4) NOT NULL default '0.5'"
+        ),
+        'fill'                => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['fill'],
+            'exclude'   => true,
+            'inputType' => 'checkbox',
+            'eval'      => array('tl_class' => 'clr w50', 'submitOnChange' => true),
+            'sql'       => "char(1) NOT NULL default ''"
+        ),
+        'fillColor'                 => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['fillColor'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'wizard'    => array(
+                \Netzmacht\Contao\DevTools\Dca::createColorPickerCallback(),
+            ),
+            'eval'      => array(
+                'tl_class'       => 'clr w50 wizard',
+                'maxlength'      => 7,
+                'decodeEntities' => true
+            ),
+            'sql'       => "varchar(8) NOT NULL default ''"
+        ),
+        'fillOpacity'  => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['fillOpacity'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'default'   => '0.2',
+            'eval'      => array('mandatory' => false, 'maxlength' => 4, 'rgxp' => 'digit', 'tl_class' => 'w50'),
+            'sql'       => "varchar(4) NOT NULL default '0.2'"
+        ),
+        'dashArray'        => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['dashArray'],
+            'exclude'   => true,
+            'inputType' => 'text',
+            'eval'      => array('mandatory' => false, 'maxlength' => 32, 'tl_class' => 'w50'),
+            'sql'       => "varchar(32) NOT NULL default ''"
+        ),
+        'lineCap'        => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['lineCap'],
+            'exclude'   => true,
+            'inputType' => 'select',
+            'options'   => array('butt', 'round', 'square', 'inherit'),
+            'reference' => &$GLOBALS['TL_LANG']['tl_leaflet_style']['lineCaps'],
+            'eval'      => array('mandatory' => false, 'tl_class' => 'w50 clr', 'includeBlankOption' => true, 'helpwizard'),
+            'sql'       => "varchar(8) NOT NULL default ''"
+        ),
+        'lineJoin'        => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['lineJoin'],
+            'exclude'   => true,
+            'inputType' => 'select',
+            'options'   => array('miter', 'round', 'bevel', 'inherit'),
+            'reference' => &$GLOBALS['TL_LANG']['tl_leaflet_style']['lineJoins'],
+            'eval'      => array('mandatory' => false, 'tl_class' => 'w50', 'includeBlankOption' => true, 'helpwizard'),
+            'sql'       => "varchar(8) NOT NULL default ''"
+        ),
+        'active'                => array
+        (
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_style']['active'],
+            'exclude'   => true,
+            'inputType' => 'checkbox',
+            'filter'    => true,
+            'sorting'   => true,
+            'search'    => false,
+            'flag'      => 12,
+            'eval'      => array('tl_class' => 'w50'),
+            'sql'       => "char(1) NOT NULL default ''"
+        ),
+    ),
+);
--- a/module/dca/tl_leaflet_vector.php
+++ b/module/dca/tl_leaflet_vector.php
@@ -35,6 +35,14 @@ $GLOBALS['TL_DCA']['tl_leaflet_vector'] = array
        ),
        'global_operations' => array
        (
+            'style' => array
+            (
+                'label'               => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['style'],
+                'href'                => 'table=tl_leaflet_style',
+                'icon'                => 'system/modules/leaflet/assets/img/style.png',
+                'attributes'          => 'onclick="Backend.getScrollOffset();"'
+            ),
+
            'all' => array
            (
                'label'               => &$GLOBALS['TL_LANG']['MSC']['all'],
@@ -98,9 +106,8 @@ $GLOBALS['TL_DCA']['tl_leaflet_vector'] = array
        'default' => array(
            'title'  => array('title', 'alias', 'type'),
            'data'   => array(),
-            'style'  => array(':hide', 'stroke', 'fill'),
            'popup'  => array(':hide','addPopup'),
-            'config' => array(':hide', 'clickable', 'className'),
+            'config' => array(':hide', 'style', 'className', 'clickable'),
            'active' => array('active')
        ),

@@ -130,8 +137,6 @@ $GLOBALS['TL_DCA']['tl_leaflet_vector'] = array
    ),
    'metasubpalettes' => array(
        'addPopup'  => array('popupContent'),
-        'stroke'    => array('color', 'weight', 'opacity', 'dashArray', 'lineCap', 'lineJoin'),
-        'fill'      => array('fillColor', 'fillOpacity',)
    ),

    'fields' => array
@@ -225,107 +230,19 @@ $GLOBALS['TL_DCA']['tl_leaflet_vector'] = array
            'explanation' => 'insertTags',
            'sql'         => "mediumtext NULL"
        ),
-        'stroke'                => array
+        'style'         => array
        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['stroke'],
-            'exclude'   => true,
-            'inputType' => 'checkbox',
-            'default'   => true,
-            'eval'      => array('tl_class' => 'w50', 'submitOnChange' => true),
-            'sql'       => "char(1) NOT NULL default '1'"
-        ),
-        'color'                 => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['color'],
-            'exclude'   => true,
-            'inputType' => 'text',
-            'wizard'    => array(
-                \Netzmacht\Contao\DevTools\Dca::createColorPickerCallback(),
-            ),
-            'eval'      => array(
-                'tl_class'       => 'w50 wizard clr',
-                'maxlength'      => 7,
-                'decodeEntities' => true
-            ),
-            'sql'       => "varchar(8) NOT NULL default ''"
-        ),
-        'weight'  => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['weight'],
-            'exclude'   => true,
-            'inputType' => 'text',
-            'default'   => 5,
-            'eval'      => array('mandatory' => false, 'maxlength' => 4, 'rgxp' => 'digit', 'tl_class' => 'w50'),
-            'sql'       => "int(4) NOT NULL default '5'"
-        ),
-        'opacity'  => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['opacity'],
-            'exclude'   => true,
-            'inputType' => 'text',
-            'default'   => '0.5',
-            'eval'      => array('mandatory' => false, 'maxlength' => 4, 'rgxp' => 'digit', 'tl_class' => 'w50'),
-            'sql'       => "varchar(4) NOT NULL default '0.5'"
-        ),
-        'fill'                => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['fill'],
-            'exclude'   => true,
-            'inputType' => 'checkbox',
-            'eval'      => array('tl_class' => 'clr w50', 'submitOnChange' => true),
-            'sql'       => "char(1) NOT NULL default ''"
-        ),
-        'fillColor'                 => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['fillColor'],
-            'exclude'   => true,
-            'inputType' => 'text',
-            'wizard'    => array(
-                \Netzmacht\Contao\DevTools\Dca::createColorPickerCallback(),
-            ),
-            'eval'      => array(
-                'tl_class'       => 'clr w50 wizard',
-                'maxlength'      => 7,
-                'decodeEntities' => true
-            ),
-            'sql'       => "varchar(8) NOT NULL default ''"
-        ),
-        'fillOpacity'  => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['fillOpacity'],
-            'exclude'   => true,
-            'inputType' => 'text',
-            'default'   => '0.2',
-            'eval'      => array('mandatory' => false, 'maxlength' => 4, 'rgxp' => 'digit', 'tl_class' => 'w50'),
-            'sql'       => "varchar(4) NOT NULL default '0.2'"
-        ),
-        'dashArray'        => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['dashArray'],
-            'exclude'   => true,
-            'inputType' => 'text',
-            'eval'      => array('mandatory' => false, 'maxlength' => 32, 'tl_class' => 'w50'),
-            'sql'       => "varchar(32) NOT NULL default ''"
-        ),
-        'lineCap'        => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineCap'],
+            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['style'],
            'exclude'   => true,
            'inputType' => 'select',
-            'options'   => array('butt', 'round', 'square', 'inherit'),
-            'reference' => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineCaps'],
-            'eval'      => array('mandatory' => false, 'tl_class' => 'w50 clr', 'includeBlankOption' => true, 'helpwizard'),
-            'sql'       => "varchar(8) NOT NULL default ''"
-        ),
-        'lineJoin'        => array
-        (
-            'label'     => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineJoin'],
-            'exclude'   => true,
-            'inputType' => 'select',
-            'options'   => array('miter', 'round', 'bevel', 'inherit'),
-            'reference' => &$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineJoins'],
-            'eval'      => array('mandatory' => false, 'tl_class' => 'w50', 'includeBlankOption' => true, 'helpwizard'),
-            'sql'       => "varchar(8) NOT NULL default ''"
+            'options_callback' => array('Netzmacht\Contao\Leaflet\Dca\Vector', 'getStyles'),
+            'eval'      => array(
+                'mandatory'  => false,
+                'tl_class'   => 'w50',
+                'chosen'     => true,
+                'includeBlankOption' => true,
+            ),
+            'sql'       => "int(10) unsigned NOT NULL default '0'",
        ),
        'clickable'    => array
        (
--- a/module/languages/en/modules.php
+++ b/module/languages/en/modules.php
@@ -1,7 +1,11 @@
 <?php

-$GLOBALS['TL_LANG']['MOD']['leaflet'][0] = 'Leaflet Maps';
-$GLOBALS['TL_LANG']['MOD']['leaflet'][1] = 'Manage Leaflet maps';
+$GLOBALS['TL_LANG']['MOD']['leaflet'][0] = 'Leaflet';
+$GLOBALS['TL_LANG']['MOD']['leaflet'][1] = 'Leaflet extension for Contao';
+$GLOBALS['TL_LANG']['MOD']['leaflet_map'][0] = 'Leaflet Maps';
+$GLOBALS['TL_LANG']['MOD']['leaflet_map'][1] = 'Manage Leaflet maps';
+$GLOBALS['TL_LANG']['MOD']['leaflet_layer'][0] = 'Map Layers';
+$GLOBALS['TL_LANG']['MOD']['leaflet_layer'][1] = 'Manage map layers';

 $GLOBALS['TL_LANG']['MOD']['tl_leaflet_map']     = 'Maps';
 $GLOBALS['TL_LANG']['MOD']['tl_leaflet_layer']   = 'Layers';
--- a/module/languages/en/tl_leaflet_icon.php
+++ b/module/languages/en/tl_leaflet_icon.php
@@ -1,28 +1,30 @@
 <?php

-$GLOBALS['TL_LANG']['tl_leaflet_icon']['title_legend'] = 'Title';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['title_legend']  = 'Title';
 $GLOBALS['TL_LANG']['tl_leaflet_icon']['config_legend'] = 'Configuration';
 $GLOBALS['TL_LANG']['tl_leaflet_icon']['shadow_legend'] = 'Shadow';
 $GLOBALS['TL_LANG']['tl_leaflet_icon']['active_legend'] = 'Activation';

-$GLOBALS['TL_LANG']['tl_leaflet_icon']['layersBtn'][0]          = 'Manage layers';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['layersBtn'][1]          = 'Manage leaflet layers';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['new'][0]                = 'Create icon';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['new'][1]                = 'Create new icon';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['edit'][0]               = 'Edit icon';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['edit'][1]               = 'Edit icon ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['copy'][0]               = 'Copy icon';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['copy'][1]               = 'Copy icon ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['controls'][0]           = 'Manage controls';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['controls'][1]           = 'Manage controls of icon ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['map'][0]              = 'Manage maps';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['map'][1]              = 'Manage leaflet maps.';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['delete'][0]             = 'Delete icon';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['delete'][1]             = 'Delete icon ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['show'][0]               = 'Show details';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['show'][1]               = 'Show icon ID %s details';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['toggle'][0]             = 'Toggle activation';
-$GLOBALS['TL_LANG']['tl_leaflet_icon']['toggle'][1]             = 'Toggle icon ID %s activation';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['layersBtn'][0] = 'Manage layers';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['layersBtn'][1] = 'Manage leaflet layers';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['styles'][0]    = 'Manage styles';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['styles'][1]    = 'Manage vector styles';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['new'][0]       = 'Create icon';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['new'][1]       = 'Create new icon';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['edit'][0]      = 'Edit icon';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['edit'][1]      = 'Edit icon ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['copy'][0]      = 'Copy icon';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['copy'][1]      = 'Copy icon ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['controls'][0]  = 'Manage controls';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['controls'][1]  = 'Manage controls of icon ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['map'][0]       = 'Manage maps';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['map'][1]       = 'Manage leaflet maps.';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['delete'][0]    = 'Delete icon';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['delete'][1]    = 'Delete icon ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['show'][0]      = 'Show details';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['show'][1]      = 'Show icon ID %s details';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['toggle'][0]    = 'Toggle activation';
+$GLOBALS['TL_LANG']['tl_leaflet_icon']['toggle'][1]    = 'Toggle icon ID %s activation';

 $GLOBALS['TL_LANG']['tl_leaflet_icon']['title'][0]             = 'Title';
 $GLOBALS['TL_LANG']['tl_leaflet_icon']['title'][1]             = 'Title of the icon.';
--- a/module/languages/en/tl_leaflet_layer.php
+++ b/module/languages/en/tl_leaflet_layer.php
@@ -6,7 +6,9 @@ $GLOBALS['TL_LANG']['tl_leaflet_layer']['active_legend'] = 'Activation';
 $GLOBALS['TL_LANG']['tl_leaflet_layer']['map'][0]    = 'Manage maps';
 $GLOBALS['TL_LANG']['tl_leaflet_layer']['map'][1]    = 'Manage leaflet maps';
 $GLOBALS['TL_LANG']['tl_leaflet_layer']['icons'][0]  = 'Manage icons';
-$GLOBALS['TL_LANG']['tl_leaflet_layer']['icons'][1]  = 'Manage marker icons.';
+$GLOBALS['TL_LANG']['tl_leaflet_layer']['icons'][1]  = 'Manage marker icons';
+$GLOBALS['TL_LANG']['tl_leaflet_layer']['styles'][0] = 'Manage styles';
+$GLOBALS['TL_LANG']['tl_leaflet_layer']['styles'][1] = 'Manage vector styles';
 $GLOBALS['TL_LANG']['tl_leaflet_layer']['new'][0]    = 'Create layer';
 $GLOBALS['TL_LANG']['tl_leaflet_layer']['new'][1]    = 'Create new layer';
 $GLOBALS['TL_LANG']['tl_leaflet_layer']['edit'][0]   = 'Edit layer';
--- a/module/languages/en/tl_leaflet_map.php
+++ b/module/languages/en/tl_leaflet_map.php
@@ -5,10 +5,8 @@ $GLOBALS['TL_LANG']['tl_leaflet_map']['interaction_legend'] = 'Interaction contr
 $GLOBALS['TL_LANG']['tl_leaflet_map']['zoom_legend']        = 'Center and zoom';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['controls_legend']    = 'Control widgets';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['expert_legend']      = 'Expert settings';
-$GLOBALS['TL_LANG']['tl_leaflet_map']['behaviour_legend']      = 'Behaviour';
+$GLOBALS['TL_LANG']['tl_leaflet_map']['behaviour_legend']   = 'Behaviour';

-$GLOBALS['TL_LANG']['tl_leaflet_map']['layersBtn'][0]          = 'Manage layers';
-$GLOBALS['TL_LANG']['tl_leaflet_map']['layersBtn'][1]          = 'Manage leaflet layers';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['new'][0]                = 'Create map';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['new'][1]                = 'Create new map';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['edit'][0]               = 'Edit map';
@@ -17,8 +15,6 @@ $GLOBALS['TL_LANG']['tl_leaflet_map']['copy'][0]               = 'Copy map';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['copy'][1]               = 'Copy map ID %s';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['controls'][0]           = 'Manage controls';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['controls'][1]           = 'Manage controls of map ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_map']['icons'][0]              = 'Manage icons';
-$GLOBALS['TL_LANG']['tl_leaflet_map']['icons'][1]              = 'Manage marker icons.';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['delete'][0]             = 'Delete map';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['delete'][1]             = 'Delete map ID %s';
 $GLOBALS['TL_LANG']['tl_leaflet_map']['show'][0]               = 'Show details';
--- a/module/languages/en/tl_leaflet_style.php
+++ b/module/languages/en/tl_leaflet_style.php
@@ -0,0 +1,49 @@
+<?php
+
+$GLOBALS['TL_LANG']['tl_leaflet_style']['title_legend']  = 'Title and type';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['active_legend'] = 'Activation';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['config_legend'] = 'Configuration';
+
+$GLOBALS['TL_LANG']['tl_leaflet_style']['layersBtn'][0] = 'Manage layers';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['layersBtn'][1] = 'Manage leaflet layers';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['icons'][0]     = 'Manage icons';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['icons'][1]     = 'Manage marker icons';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['new'][0]       = 'Create style';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['new'][1]       = 'Create new style';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['edit'][0]      = 'Edit style';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['edit'][1]      = 'Edit style ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['copy'][0]      = 'Copy style';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['copy'][1]      = 'Copy style ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['delete'][0]    = 'Delete style';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['delete'][1]    = 'Delete style ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['show'][0]      = 'Show details';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['show'][1]      = 'Show style ID %s details';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['toggle'][0]    = 'Toggle activation';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['toggle'][1]    = 'Toggle style ID %s activation';
+
+$GLOBALS['TL_LANG']['tl_leaflet_style']['title'][0]       = 'Title';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['title'][1]       = 'Title of the style.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['alias'][0]       = 'Alias';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['alias'][1]       = 'Alias of the style.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['type'][0]        = 'Type';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['type'][1]        = 'Choose the style type.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['stroke'][0]      = 'Draw a stroke';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['stroke'][1]      = 'Whether to draw stroke along the path. Disable it to hide borders on polygons or circles.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['color'][0]       = 'Stroke color';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['color'][1]       = 'Custom stroke color. Leaf empty to use default. Value is a ful hex value (with #).';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['weight'][0]      = 'Stroke width';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['weight'][1]      = 'Stroke width in pixels.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['opacity'][0]     = 'Stroke opacity';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['opacity'][1]     = 'Stroke opacity as a value between 0 and 1.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['dashArray'][0]   = 'Stroke dash pattern';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['dashArray'][1]   = 'A string that defines the stroke <a href="https://developer.mozilla.org/en/SVG/Attribute/stroke-dasharray" target="_blank">dash pattern</a>.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['fill'][0]        = 'Fill vector';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['fill'][1]        = 'Whether to fill the path with color.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['fillColor'][0]   = 'Fill color';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['fillColor'][1]   = 'Custom stroke color. Leaf empty to use default. Value is a ful hex value (with #).';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['fillOpacity'][0] = 'Fill opacity';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['fillOpacity'][1] = 'Fill opacity as a value between 0 and 1.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['lineCap'][0]     = 'Stroke line cap';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['lineCap'][1]     = 'A string that defines <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap" target="_blank">shape to be used at the end</a> of the stroke.';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['lineJoin'][0]    = 'Stroke line join';
+$GLOBALS['TL_LANG']['tl_leaflet_style']['lineJoin'][1]    = 'A string that defines <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin" target="_blank">shape to be used at the corners</a> of the stroke.';
--- a/module/languages/en/tl_leaflet_vector.php
+++ b/module/languages/en/tl_leaflet_vector.php
@@ -4,23 +4,22 @@ $GLOBALS['TL_LANG']['tl_leaflet_vector']['title_legend']  = 'Title and type';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['active_legend'] = 'Activation';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['config_legend'] = 'Configuration';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['data_legend']   = 'Vector data';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['popup_legend']   = 'Popup';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['style_legend']   = 'Styling';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['popup_legend']  = 'Popup';

-$GLOBALS['TL_LANG']['tl_leaflet_vector']['new'][0]    = 'Create vector';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['new'][1]    = 'Create new vector';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['edit'][0]   = 'Edit vector';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['edit'][1]   = 'Edit vector ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['copy'][0]   = 'Copy vector';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['copy'][1]   = 'Copy vector ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['delete'][0] = 'Delete vector';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['delete'][1] = 'Delete vector ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['show'][0]   = 'Show details';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['show'][1]   = 'Show vector ID %s details';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['cut'][0]    = 'Move vector';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['cut'][1]    = 'Move vector ID %s';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['toggle'][0] = 'Toggle activation';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['toggle'][1] = 'Toggle vector ID %s activation';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['new'][0]       = 'Create vector';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['new'][1]       = 'Create new vector';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['edit'][0]      = 'Edit vector';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['edit'][1]      = 'Edit vector ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['copy'][0]      = 'Copy vector';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['copy'][1]      = 'Copy vector ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['delete'][0]    = 'Delete vector';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['delete'][1]    = 'Delete vector ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['show'][0]      = 'Show details';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['show'][1]      = 'Show vector ID %s details';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['cut'][0]       = 'Move vector';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['cut'][1]       = 'Move vector ID %s';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['toggle'][0]    = 'Toggle activation';
+$GLOBALS['TL_LANG']['tl_leaflet_vector']['toggle'][1]    = 'Toggle vector ID %s activation';

 $GLOBALS['TL_LANG']['tl_leaflet_vector']['title'][0]        = 'Title';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['title'][1]        = 'Title of the vector.';
@@ -32,26 +31,6 @@ $GLOBALS['TL_LANG']['tl_leaflet_vector']['type'][0]         = 'Type';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['type'][1]         = 'Choose the vector type.';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['data'][0]         = 'Vector data';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['data'][1]         = 'Define each coordinate of the vector on a line. Each line is a comma separated value (latitude, longitude [, altitude]).';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['stroke'][0]       = 'Draw a stroke';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['stroke'][1]       = 'Whether to draw stroke along the path. Disable it to hide borders on polygons or circles.';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['color'][0]       = 'Stroke color';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['color'][1]       = 'Custom stroke color. Leaf empty to use default. Value is a ful hex value (with #).';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['weight'][0]       = 'Stroke width';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['weight'][1]       = 'Stroke width in pixels.';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['opacity'][0]       = 'Stroke opacity';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['opacity'][1]       = 'Stroke opacity as a value between 0 and 1.';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['dashArray'][0]       = 'Stroke dash pattern';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['dashArray'][1]       = 'A string that defines the stroke <a href="https://developer.mozilla.org/en/SVG/Attribute/stroke-dasharray" target="_blank">dash pattern</a>.';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['fill'][0]         = 'Fill vector';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['fill'][1]         = 'Whether to fill the path with color.';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['fillColor'][0]       = 'Fill color';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['fillColor'][1]       = 'Custom stroke color. Leaf empty to use default. Value is a ful hex value (with #).';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['fillOpacity'][0]       = 'Fill opacity';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['fillOpacity'][1]       = 'Fill opacity as a value between 0 and 1.';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineCap'][0]       = 'Stroke line cap';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineCap'][1]       = 'A string that defines <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap" target="_blank">shape to be used at the end</a> of the stroke.';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineJoin'][0]       = 'Stroke line join';
-$GLOBALS['TL_LANG']['tl_leaflet_vector']['lineJoin'][1]       = 'A string that defines <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin" target="_blank">shape to be used at the corners</a> of the stroke.';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['addPopup'][0]     = 'Add popup';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['addPopup'][1]     = 'Add a popup to the vector.';
 $GLOBALS['TL_LANG']['tl_leaflet_vector']['popupContent'][0] = 'Popup content';
--- a/src/Netzmacht/Contao/Leaflet/Dca/Vector.php
+++ b/src/Netzmacht/Contao/Leaflet/Dca/Vector.php
@@ -12,10 +12,25 @@
 namespace Netzmacht\Contao\Leaflet\Dca;


+use Netzmacht\Contao\DevTools\Dca\Options\OptionsBuilder;
+use Netzmacht\Contao\Leaflet\Model\StyleModel;
+
 class Vector
 {
    public function generateRow($row)
    {
        return sprintf('%s <span class="tl_gray">[%s]</span>', $row['title'], $row['type']);
    }
+
+    /**
+     * Get all styles.
+     *
+     * @return array
+     */
+    public function getStyles()
+    {
+        $collection = StyleModel::findAll(array('order' => 'title'));
+
+        return OptionsBuilder::fromCollection($collection, 'id', 'title')->getOptions();
+    }
 }
--- a/src/Netzmacht/Contao/Leaflet/Definition/Style.php
+++ b/src/Netzmacht/Contao/Leaflet/Definition/Style.php
@@ -0,0 +1,32 @@
+<?php
+
+/**
+ * @package    dev
+ * @author     David Molineus <david.molineus@netzmacht.de>
+ * @copyright  2015 netzmacht creative David Molineus
+ * @license    LGPL 3.0
+ * @filesource
+ *
+ */
+
+namespace Netzmacht\Contao\Leaflet\Definition;
+
+use Netzmacht\LeafletPHP\Definition;
+use Netzmacht\LeafletPHP\Definition\Vector\Path;
+
+/**
+ * Interface Style describes a style definition.
+ *
+ * @package Netzmacht\Contao\Leaflet\Definition
+ */
+interface Style extends Definition
+{
+    /**
+     * Apply style to a given vector.
+     *
+     * @param Path $vector The vector path.
+     *
+     * @return $this
+     */
+    public function apply(Path $vector);
+}
--- a/src/Netzmacht/Contao/Leaflet/Definition/Style/FixedStyle.php
+++ b/src/Netzmacht/Contao/Leaflet/Definition/Style/FixedStyle.php
@@ -0,0 +1,287 @@
+<?php
+
+/**
+ * @package    dev
+ * @author     David Molineus <david.molineus@netzmacht.de>
+ * @copyright  2015 netzmacht creative David Molineus
+ * @license    LGPL 3.0
+ * @filesource
+ *
+ */
+
+namespace Netzmacht\Contao\Leaflet\Definition\Style;
+
+
+use Netzmacht\Contao\Leaflet\Definition\Style;
+use Netzmacht\LeafletPHP\Definition\AbstractDefinition;
+use Netzmacht\LeafletPHP\Definition\OptionsTrait;
+use Netzmacht\LeafletPHP\Definition\Vector\Path;
+
+class FixedStyle extends AbstractDefinition implements Style
+{
+    use OptionsTrait;
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function getType()
+    {
+        return 'Style';
+    }
+
+    /**
+     * Set the stroke value.
+     *
+     * @param bool $value If true a stroke is drwan.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-stroke
+     */
+    public function setStroke($value)
+    {
+        return $this->setOption('stroke', (bool) $value);
+    }
+
+    /**
+     * Check if stroke is enabled.
+     *
+     * @return bool
+     * @see    http://leafletjs.com/reference.html#path-stroke
+     */
+    public function hasStroke()
+    {
+        return $this->getOption('stroke', true);
+    }
+
+    /**
+     * Set the stroke color.
+     *
+     * @param string $value Stroke color.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-color
+     */
+    public function setColor($value)
+    {
+        return $this->setOption('color', $value);
+    }
+
+    /**
+     * Get the stroke color.
+     *
+     * @return string
+     * @see    http://leafletjs.com/reference.html#path-color
+     */
+    public function getColor()
+    {
+        return $this->getOption('color', '#03f');
+    }
+
+    /**
+     * Set the stroke weight.
+     *
+     * @param int $value Stroke weight.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-weight
+     */
+    public function setWeight($value)
+    {
+        return $this->setOption('weight', (int) $value);
+    }
+
+    /**
+     * Get the stroke weight.
+     *
+     * @return int
+     * @see    http://leafletjs.com/reference.html#path-weight
+     */
+    public function getWeight()
+    {
+        return $this->getOption('weight', 5);
+    }
+
+    /**
+     * Set the opacity.
+     *
+     * @param float $value Path opacity.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-opacity
+     */
+    public function setOpacity($value)
+    {
+        return $this->setOption('opacity', (float) $value);
+    }
+
+    /**
+     * Get opacity.
+     *
+     * @return float
+     * @see    http://leafletjs.com/reference.html#path-opacity
+     */
+    public function getOpacity()
+    {
+        return $this->getOption('opacity', 0.5);
+    }
+
+    /**
+     * Fill the path.
+     *
+     * @param bool|string $value If true a fill is drwan.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-fill
+     */
+    public function setFill($value)
+    {
+        return $this->setOption('fill', (bool) $value);
+    }
+
+    /**
+     * Check if fill is enabled.
+     *
+     * @return bool|string
+     * @see    http://leafletjs.com/reference.html#path-fill
+     */
+    public function isFill()
+    {
+        return $this->getOption('fill', 'depends');
+    }
+
+    /**
+     * Set the stroke fill color.
+     *
+     * @param string $value Stroke fill color.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-fillcolor
+     */
+    public function setFillColor($value)
+    {
+        return $this->setOption('fillColor', $value);
+    }
+
+    /**
+     * Get the stroke fill color.
+     *
+     * @return string
+     * @see    http://leafletjs.com/reference.html#path-fillcolor
+     */
+    public function getFillColor()
+    {
+        return $this->getOption('fillColor', '#03f');
+    }
+
+    /**
+     * Set the fill opacity.
+     *
+     * @param float $value Fill opacity.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-fillopacity
+     */
+    public function setFillOpacity($value)
+    {
+        return $this->setOption('fillOpacity', (float) $value);
+    }
+
+    /**
+     * Get fill opacity.
+     *
+     * @return float
+     * @see    http://leafletjs.com/reference.html#path-fillopacity
+     */
+    public function getFillOpacity()
+    {
+        return $this->getOption('fillOpacity', 0.2);
+    }
+
+    /**
+     * Set the stroke dash pattern.
+     *
+     * @param string $value The dash pattern.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-dasharray
+     * @see    https://developer.mozilla.org/en/SVG/Attribute/stroke-dasharray
+     */
+    public function setDashArray($value)
+    {
+        return $this->setOption('dashArray', $value);
+    }
+
+    /**
+     * Get stroke dash pattern.
+     *
+     * @return float
+     * @see    http://leafletjs.com/reference.html#path-dasharray
+     * @see    https://developer.mozilla.org/en/SVG/Attribute/stroke-dasharray
+     */
+    public function getDashArray()
+    {
+        return $this->getOption('dashArray', null);
+    }
+
+    /**
+     * Set line cap string.
+     *
+     * @param string $value The line cap.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-linecap
+     * @see    https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap
+     */
+    public function setLineCap($value)
+    {
+        return $this->setOption('lineCap', $value);
+    }
+
+    /**
+     * Get the line cap string.
+     *
+     * @return float
+     * @see    http://leafletjs.com/reference.html#path-linecap
+     * @see    https://developer.mozilla.org/en/SVG/Attribute/stroke-linecap
+     */
+    public function getLineCap()
+    {
+        return $this->getOption('lineCap', null);
+    }
+
+    /**
+     * Set line cap string.
+     *
+     * @param string $value The line cap.
+     *
+     * @return $this
+     * @see    http://leafletjs.com/reference.html#path-linejoin
+     * @see    https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin
+     */
+    public function setLineJoin($value)
+    {
+        return $this->setOption('lineJoin', $value);
+    }
+
+    /**
+     * Get the line cap string.
+     *
+     * @return float
+     * @see    http://leafletjs.com/reference.html#path-linejoin
+     * @see    https://developer.mozilla.org/en/SVG/Attribute/stroke-linejoin
+     */
+    public function getLineJoin()
+    {
+        return $this->getOption('lineJoin', null);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function apply(Path $vector)
+    {
+        $vector->setOptions($this->getOptions());
+
+        return $this;
+    }
+}
--- a/src/Netzmacht/Contao/Leaflet/Mapper/Style/AbstractStyleMapper.php
+++ b/src/Netzmacht/Contao/Leaflet/Mapper/Style/AbstractStyleMapper.php
@@ -0,0 +1,24 @@
+<?php
+
+/**
+ * @package    dev
+ * @author     David Molineus <david.molineus@netzmacht.de>
+ * @copyright  2015 netzmacht creative David Molineus
+ * @license    LGPL 3.0
+ * @filesource
+ *
+ */
+
+namespace Netzmacht\Contao\Leaflet\Mapper\Style;
+
+use Netzmacht\Contao\Leaflet\Mapper\AbstractTypeMapper;
+
+abstract class AbstractStyleMapper extends AbstractTypeMapper
+{
+    /**
+     * Class of the model being build.
+     *
+     * @var string
+     */
+    protected static $modelClass = 'Netzmacht\Contao\Leaflet\Model\StyleModel';
+}
--- a/src/Netzmacht/Contao/Leaflet/Mapper/Style/FixedStyleMapper.php
+++ b/src/Netzmacht/Contao/Leaflet/Mapper/Style/FixedStyleMapper.php
@@ -0,0 +1,48 @@
+<?php
+
+/**
+ * @package    dev
+ * @author     David Molineus <david.molineus@netzmacht.de>
+ * @copyright  2015 netzmacht creative David Molineus
+ * @license    LGPL 3.0
+ * @filesource
+ *
+ */
+
+namespace Netzmacht\Contao\Leaflet\Mapper\Style;
+
+use Netzmacht\LeafletPHP\Definition;
+
+class FixedStyleMapper extends AbstractStyleMapper
+{
+    /**
+     * Definition class.
+     *
+     * @var string
+     */
+    protected static $definitionClass = 'Netzmacht\Contao\Leaflet\Definition\Style\FixedStyle';
+
+    /**
+     * Style type.
+     *
+     * @var string
+     */
+    protected static $type = 'fixed';
+
+    /**
+     * {@inheritdoc}
+     */
+    protected function initialize()
+    {
+        parent::initialize();
+
+        $this
+            ->addOptions('stroke', 'weight', 'opacity', 'clickable', 'className')
+            ->addConditionalOption('color')
+            ->addConditionalOption('lineCap')
+            ->addConditionalOption('lineJoin')
+            ->addConditionalOption('dashArray')
+            ->addConditionalOptions('fill', array('fillColor', 'fillOpacity'))
+            ->addOption('fill');
+    }
+}
--- a/src/Netzmacht/Contao/Leaflet/Mapper/Vector/AbstractVectorMapper.php
+++ b/src/Netzmacht/Contao/Leaflet/Mapper/Vector/AbstractVectorMapper.php
@@ -12,10 +12,14 @@
 namespace Netzmacht\Contao\Leaflet\Mapper\Vector;


+use Netzmacht\Contao\Leaflet\Definition\Style;
 use Netzmacht\Contao\Leaflet\Mapper\AbstractTypeMapper;
 use Netzmacht\Contao\Leaflet\Mapper\DefinitionMapper;
+use Netzmacht\Contao\Leaflet\Model\StyleModel;
 use Netzmacht\LeafletPHP\Definition;
+use Netzmacht\LeafletPHP\Definition\HasPopup;
 use Netzmacht\LeafletPHP\Definition\Type\LatLngBounds;
+use Netzmacht\LeafletPHP\Definition\Vector\Path;

 class AbstractVectorMapper extends AbstractTypeMapper
 {
@@ -30,25 +34,37 @@ class AbstractVectorMapper extends AbstractTypeMapper
    {
        parent::initialize();

-        $this
-            ->addOptions('stroke', 'weight', 'opacity', 'clickable', 'className')
-            ->addConditionalOption('color')
-            ->addConditionalOption('lineCap')
-            ->addConditionalOption('lineJoin')
-            ->addConditionalOption('dashArray')
-            ->addConditionalOptions('fill', array('fill', 'fillColor', 'fillOpacity'))
-        ;
+//        $this
+//            ->addOptions('stroke', 'weight', 'opacity', 'clickable', 'className')
+//            ->addConditionalOption('color')
+//            ->addConditionalOption('lineCap')
+//            ->addConditionalOption('lineJoin')
+//            ->addConditionalOption('dashArray')
+//            ->addConditionalOptions('fill', array('fill', 'fillColor', 'fillOpacity'))
+//        ;
    }

    protected function build(
        Definition $definition,
        \Model $model,
-        DefinitionMapper $builder,
+        DefinitionMapper $mapper,
        LatLngBounds $bounds = null
    ) {
-        parent::build($definition, $model, $builder, $bounds);
+        parent::build($definition, $model, $mapper, $bounds);

-        if ($definition instanceof Definition\HasPopup && $model->addPopup) {
+        if ($definition instanceof Path && $model->style) {
+            $styleModel = StyleModel::findActiveByPk($model->style);
+
+            if ($styleModel) {
+                $style = $mapper->handle($styleModel);
+
+                if ($style instanceof Style) {
+                    $style->apply($definition);
+                }
+            }
+        }
+
+        if ($definition instanceof HasPopup && $model->addPopup) {
            $definition->bindPopup($model->popupContent);
        }
    }
--- a/src/Netzmacht/Contao/Leaflet/Model/ActiveTrait.php
+++ b/src/Netzmacht/Contao/Leaflet/Model/ActiveTrait.php
@@ -0,0 +1,45 @@
+<?php
+
+/**
+ * @package    dev
+ * @author     David Molineus <david.molineus@netzmacht.de>
+ * @copyright  2015 netzmacht creative David Molineus
+ * @license    LGPL 3.0
+ * @filesource
+ *
+ */
+
+namespace Netzmacht\Contao\Leaflet\Model;
+
+
+trait ActiveTrait
+{
+    /**
+     *
+     * @param int   $modelId
+     * @param array $options
+     *
+     * @return \Model|null
+     */
+    public static function findActiveByPK($modelId, $options = array())
+    {
+        return static::findOneBy('active=1 AND id', $modelId, $options);
+    }
+
+    /**
+     *
+     * @param int   $modelId
+     * @param array $options
+     *
+     * @return \Model|null
+     */
+    public static function findActiveByPid($modelId, $options = array())
+    {
+        return static::findBy('active=1 AND pid', $modelId, $options);
+    }
+
+    public static function findActivated($options = array())
+    {
+        return static::findBy('active', '1', $options);
+    }
+}
--- a/src/Netzmacht/Contao/Leaflet/Model/IconModel.php
+++ b/src/Netzmacht/Contao/Leaflet/Model/IconModel.php
@@ -23,5 +23,7 @@ namespace Netzmacht\Contao\Leaflet\Model;
 */
 class IconModel extends \Model
 {
+    use ActiveTrait;
+
    protected static $strTable = 'tl_leaflet_icon';
 }
--- a/src/Netzmacht/Contao/Leaflet/Model/StyleModel.php
+++ b/src/Netzmacht/Contao/Leaflet/Model/StyleModel.php
@@ -0,0 +1,20 @@
+<?php
+
+/**
+ * @package    dev
+ * @author     David Molineus <david.molineus@netzmacht.de>
+ * @copyright  2015 netzmacht creative David Molineus
+ * @license    LGPL 3.0
+ * @filesource
+ *
+ */
+
+namespace Netzmacht\Contao\Leaflet\Model;
+
+
+class StyleModel extends \Model
+{
+    use ActiveTrait;
+
+    protected static $strTable = 'tl_leaflet_style';
+}