Implement the extra markers icons.

assets/maps/contao-leaflet.js

@@ -1 +1 @@
-L.Contao=L.Class.extend({includes:L.Mixin.Events,statics:{ATTRIBUTION:' | <a href="https://netzmacht.de/contao-leaflet" title="Powered by Leaflet extension for Contao CMS developed by netzmacht David Molineus">netzmacht</a>'},maps:{},icons:{},initialize:function(){L.Icon.Default.imagePath="assets/leaflet/libs/leaflet/images/",this.setGeoJsonListeners(L.GeoJSON)},addMap:function(t,o){return this.maps[t]=o,this.fire("map:added",{id:t,map:o}),this},getMap:function(t){return"undefined"==typeof this.maps[t]?null:this.maps[t]},addIcon:function(t,o){return this.icons[t]=o,this.fire("icon:added",{id:t,icon:o}),this},loadIcons:function(t){for(var o=0;o<t.length;o++){var e=L[t[o].type](t[o].options);this.addIcon(t[o].id,e)}},getIcon:function(t){return"undefined"==typeof this.icons[t]?null:this.icons[t]},load:function(t,o,e,n,i){var s=this.createRequestUrl(t,i),a=omnivore[o](s,e,n);return i&&(L.stamp(a),i.options.dynamicLoad&&"fit"==a.options.boundsMode&&(a.options.requestHash=t,i.on("moveend",a.refreshData,a),i.on("layerremove",function(t){t.layer===a&&i.off("moveend",a.updateBounds,a)})),i.fire("dataloading",{layer:a}),a.on("ready",function(){i.calculateFeatureBounds(a),i.fire("dataload",{layer:a})}),a.on("error",function(){i.fire("dataload",{layer:a})})),a},pointToLayer:function(t,o){var e="marker",n=null;if(t.properties&&(t.properties.bounds=!0,t.properties.type&&(e=t.properties.type),t.properties.arguments&&(n=L[e].apply(L[e],t.properties.arguments),L.Util.setOptions(n,t.properties.options))),null===n&&(n=L[e](o,t.properties.options)),t.properties){if(t.properties.radius&&n.setRadius(t.properties.radius),t.properties.icon){var i=this.getIcon(t.properties.icon);i&&n.setIcon(i)}this.bindPopupFromFeature(n,t)}return this.fire("point:added",{marker:n,feature:t,latlng:o,type:e}),n},onEachFeature:function(t,o){t.properties&&(L.Util.setOptions(o,t.properties.options),this.bindPopupFromFeature(o,t),this.fire("feature:added",{feature:t,layer:o}))},bindPopupFromFeature:function(t,o){o.properties&&(o.properties.popup?t.bindPopup(o.properties.popup,o.properties.popupOptions):o.properties.popupContent&&t.bindPopup(o.properties.popupContent,o.properties.popupOptions))},setGeoJsonListeners:function(t){t&&t.prototype&&(t.prototype.options={pointToLayer:this.pointToLayer.bind(this),onEachFeature:this.onEachFeature.bind(this)})},createRequestUrl:function(t,o){var e,n="leaflet",i=document.location.search.substr(1).split("&");if(t=encodeURIComponent(t),""==i)t=document.location.pathname+"?"+[n,t].join("=");else{for(var s,a=i.length;a--;)if(s=i[a].split("="),s[0]==n){s[1]=t,i[a]=s.join("=");break}a<0&&(i[i.length]=[n,t].join("=")),t=document.location.pathname+"?"+i.join("&")}return o&&o.options.dynamicLoad&&(e=o.getBounds(),t+="&f=bbox&v=",t+=e.getSouth()+","+e.getWest(),t+=","+e.getNorth()+","+e.getEast()),t}}),L.contao=new L.Contao,L.Control.Attribution.addInitHook(function(){this.options.prefix+=L.Contao.ATTRIBUTION}),L.Control.Attribution.include({setPrefix:function(t){return t.indexOf(L.Contao.ATTRIBUTION)===-1&&(t+=L.Contao.ATTRIBUTION),this.options.prefix=t,this._update(),this}}),L.GeoJSON.include({refreshData:function(t){var o=L.geoJson(),e=this;o.on("ready",function(){var t,o=e.getLayers();for(t=0;t<o.length;t++)e.removeLayer(o[t]);for(o=this.getLayers(),t=0;t<o.length;t++)this.removeLayer(o[t]),e.addLayer(o[t])}),omnivore.geojson(L.contao.createRequestUrl(this.options.requestHash,t.target),null,o)}}),L.Map.include({_dynamicBounds:null,calculateFeatureBounds:function(t,o){if(t){if(!this.options.adjustBounds&&!o)return;this._scanForBounds(t)}else this.eachLayer(this._scanForBounds,this);this._dynamicBounds&&this.fitBounds(this._dynamicBounds,this.getBoundsOptions())},getBoundsOptions:function(){return options={},this.options.boundsPadding?options.padding=this.options.boundsPadding:(this.options.boundsPaddingTopLeft&&(options.paddingTopLeft=this.options.boundsPaddingTopLeft),this.options.boundsPaddingBottomRight&&(options.paddingBottomRight=this.options.boundsPaddingBottomRight)),options},_scanForBounds:function(t){var o;!t.feature||t.feature.properties&&t.feature.properties.ignoreForBounds?L.MarkerClusterGroup&&t instanceof L.MarkerClusterGroup&&t.options.boundsMode&&"extend"==t.options.boundsMode?(o=t.getBounds(),o.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o.getSouthWest(),o.getNorthEast()))):(!t.options||t.options&&t.options.boundsMode&&!t.options.ignoreForBounds)&&t.eachLayer&&t.eachLayer(this._scanForBounds,this):t.getBounds?(o=t.getBounds(),o.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o.getSouthWest(),o.getNorthEast()))):t.getLatLng&&(o=t.getLatLng(),this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o,o))}}),L.LatLngBounds.prototype.toOverpassBBoxString=function(){var t=this._southWest,o=this._northEast;return[t.lat,t.lng,o.lat,o.lng].join(",")},L.OverPassLayer=L.FeatureGroup.exLine truncated
+L.Contao=L.Class.extend({includes:L.Mixin.Events,statics:{ATTRIBUTION:' | <a href="https://netzmacht.de/contao-leaflet" title="Powered by Leaflet extension for Contao CMS developed by netzmacht David Molineus">netzmacht</a>'},maps:{},icons:{},initialize:function(){L.Icon.Default.imagePath="assets/leaflet/libs/leaflet/images/",this.setGeoJsonListeners(L.GeoJSON)},addMap:function(t,o){return this.maps[t]=o,this.fire("map:added",{id:t,map:o}),this},getMap:function(t){return"undefined"==typeof this.maps[t]?null:this.maps[t]},addIcon:function(t,o){return this.icons[t]=o,this.fire("icon:added",{id:t,icon:o}),this},loadIcons:function(t){for(var o=0;o<t.length;o++){var e;e="extraMarkers.icon"===t[o].type?L.ExtraMarkers.icon(t[o].options):L[t[o].type](t[o].options),this.addIcon(t[o].id,e)}},getIcon:function(t){return"undefined"==typeof this.icons[t]?null:this.icons[t]},load:function(t,o,e,n,i){var s=this.createRequestUrl(t,i),r=omnivore[o](s,e,n);return i&&(L.stamp(r),i.options.dynamicLoad&&"fit"==r.options.boundsMode&&(r.options.requestHash=t,i.on("moveend",r.refreshData,r),i.on("layerremove",function(t){t.layer===r&&i.off("moveend",r.updateBounds,r)})),i.fire("dataloading",{layer:r}),r.on("ready",function(){i.calculateFeatureBounds(r),i.fire("dataload",{layer:r})}),r.on("error",function(){i.fire("dataload",{layer:r})})),r},pointToLayer:function(t,o){var e="marker",n=null;if(t.properties&&(t.properties.bounds=!0,t.properties.type&&(e=t.properties.type),t.properties.arguments&&(n=L[e].apply(L[e],t.properties.arguments),L.Util.setOptions(n,t.properties.options))),null===n&&(n=L[e](o,t.properties.options)),t.properties){if(t.properties.radius&&n.setRadius(t.properties.radius),t.properties.icon){var i=this.getIcon(t.properties.icon);i&&n.setIcon(i)}this.bindPopupFromFeature(n,t)}return this.fire("point:added",{marker:n,feature:t,latlng:o,type:e}),n},onEachFeature:function(t,o){t.properties&&(L.Util.setOptions(o,t.properties.options),this.bindPopupFromFeature(o,t),this.fire("feature:added",{feature:t,layer:o}))},bindPopupFromFeature:function(t,o){o.properties&&(o.properties.popup?t.bindPopup(o.properties.popup,o.properties.popupOptions):o.properties.popupContent&&t.bindPopup(o.properties.popupContent,o.properties.popupOptions))},setGeoJsonListeners:function(t){t&&t.prototype&&(t.prototype.options={pointToLayer:this.pointToLayer.bind(this),onEachFeature:this.onEachFeature.bind(this)})},createRequestUrl:function(t,o){var e,n="leaflet",i=document.location.search.substr(1).split("&");if(t=encodeURIComponent(t),""==i)t=document.location.pathname+"?"+[n,t].join("=");else{for(var s,r=i.length;r--;)if(s=i[r].split("="),s[0]==n){s[1]=t,i[r]=s.join("=");break}r<0&&(i[i.length]=[n,t].join("=")),t=document.location.pathname+"?"+i.join("&")}return o&&o.options.dynamicLoad&&(e=o.getBounds(),t+="&f=bbox&v=",t+=e.getSouth()+","+e.getWest(),t+=","+e.getNorth()+","+e.getEast()),t}}),L.contao=new L.Contao,L.Control.Attribution.addInitHook(function(){this.options.prefix+=L.Contao.ATTRIBUTION}),L.Control.Attribution.include({setPrefix:function(t){return t.indexOf(L.Contao.ATTRIBUTION)===-1&&(t+=L.Contao.ATTRIBUTION),this.options.prefix=t,this._update(),this}}),L.GeoJSON.include({refreshData:function(t){var o=L.geoJson(),e=this;o.on("ready",function(){var t,o=e.getLayers();for(t=0;t<o.length;t++)e.removeLayer(o[t]);for(o=this.getLayers(),t=0;t<o.length;t++)this.removeLayer(o[t]),e.addLayer(o[t])}),omnivore.geojson(L.contao.createRequestUrl(this.options.requestHash,t.target),null,o)}}),L.Map.include({_dynamicBounds:null,calculateFeatureBounds:function(t,o){if(t){if(!this.options.adjustBounds&&!o)return;this._scanForBounds(t)}else this.eachLayer(this._scanForBounds,this);this._dynamicBounds&&this.fitBounds(this._dynamicBounds,this.getBoundsOptions())},getBoundsOptions:function(){return options={},this.options.boundsPadding?options.padding=this.options.boundsPadding:(this.options.boundsPaddingTopLeft&&(options.paddingTopLeft=this.options.boundsPaddingTopLeft),this.options.boundsPaddingBottomRight&&(options.paddingBottomRight=this.options.boundsPaddingBottomRight)),options},_scanForBounds:function(t){var o;!t.feature||t.feature.properties&&t.feature.properties.ignoreForBounds?L.MarkerClusterGroup&&t instanceof L.MarkerClusterGroup&&t.options.boundsMode&&"extend"==t.options.boundsMode?(o=t.getBounds(),o.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o.getSouthWest(),o.getNorthEast()))):(!t.options||t.options&&t.options.boundsMode&&!t.options.ignoreForBounds)&&t.eachLayer&&t.eachLayer(this._scanForBounds,this):t.getBounds?(o=t.getBounds(),o.isValid()&&(this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o.getSouthWest(),o.getNorthEast()))):t.getLatLng&&(o=t.getLatLng(),this._dynamicBounds?this._dynamicBounds.extend(o):this._dynamicBounds=L.latLngBounds(o,o))}}),L.LatLngBounds.prototype.toOverpassBBoxString=function(){var t=this._southWest,o=this._northEast;return[tLine truncated

assets/maps/src/Contao.js

@@ -89,7 +89,14 @@ L.Contao = L.Class.extend({
      */
     loadIcons: function (icons) {
         for (var i = 0; i < icons.length; i++) {
-            var icon = L[icons[i].type](icons[i].options);
+            var icon;
+
+            if (icons[i].type === 'extraMarkers.icon') {
+                icon = L.ExtraMarkers.icon(icons[i].options);
+            } else {
+                icon = L[icons[i].type](icons[i].options);
+            }
+
             this.addIcon(icons[i].id, icon);
         }
     },

assets/maps/src/OverpassLayer.js

@@ -103,7 +103,6 @@ L.OverPassLayer = L.FeatureGroup.extend({
                 && feature.properties.tags.amenity
                 && this.options.amenityIcons[feature.properties.tags.amenity]
             ) {
-                console.log(this.options.amenityIcons[feature.properties.tags.amenity]);
                 icon = L.contao.getIcon(this.options.amenityIcons[feature.properties.tags.amenity]);
             }
 

module/config/config.php

@@ -154,6 +154,7 @@ $GLOBALS['LEAFLET_MAPPERS'][] = function () {
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\UI\PopupMapper';
 $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\Type\ExtraMarkersIconMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = 'Netzmacht\Contao\Leaflet\Mapper\Style\FixedStyleMapper';
 $GLOBALS['LEAFLET_MAPPERS'][] = function () {
     return new \Netzmacht\Contao\Leaflet\Mapper\UI\MarkerMapper(
@@ -301,7 +302,7 @@ $GLOBALS['LEAFLET_CONTROLS']   = array('zoom', 'layers', 'scale', 'attribution',
  *
  * Supported leaflet icon types. Register you type for the database driven definition here.
  */
-$GLOBALS['LEAFLET_ICONS'] = array('image', 'div');
+$GLOBALS['LEAFLET_ICONS'] = array('image', 'div', 'extra');
 
 
 /*

module/dca/tl_leaflet_icon.php

@@ -150,7 +150,21 @@ $GLOBALS['TL_DCA']['tl_leaflet_icon'] = array
             'active' => array(
                 'active'
             )
-        )
+        ),
+
+        'extra extends default' => array(
+            'config' => array(
+                'icon',
+                'prefix',
+                'shape',
+                'markerColor',
+                'number',
+                'iconColor',
+            ),
+            'active' => array(
+                'active'
+            )
+        ),
     ),
 
     'fields' => array
@@ -351,5 +365,82 @@ $GLOBALS['TL_DCA']['tl_leaflet_icon'] = array
             ),
             'sql'       => "mediumtext NULL"
         ),
+        'icon'  => array
+        (
+            'label'         => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['icon'],
+            'exclude'       => true,
+            'inputType'     => 'text',
+            'eval'          => array(
+                'maxlength'   => 64,
+                'tl_class'    => 'w50',
+                'nullIfEmpty' => true,
+            ),
+            'sql'           => "varchar(64) NULL"
+        ),
+        'prefix'  => array
+        (
+            'label'         => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['prefix'],
+            'exclude'       => true,
+            'inputType'     => 'text',
+            'eval'          => array(
+                'maxlength'   => 64,
+                'tl_class'    => 'w50',
+                'nullIfEmpty' => true,
+            ),
+            'sql'           => "varchar(64) NULL"
+        ),
+        'shape'  => array
+        (
+            'label'         => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['shape'],
+            'exclude'       => true,
+            'inputType'     => 'select',
+            'default'       => 'circle',
+            'options'       => ['circle', 'square', 'star', 'penta'],
+            'eval'          => array(
+                'tl_class'    => 'w50',
+            ),
+            'sql'           => "varchar(64) NULL"
+        ),
+        'iconColor'  => array
+        (
+            'label'         => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['iconColor'],
+            'exclude'       => true,
+            'inputType'     => 'text',
+            'eval'          => array(
+                'maxlength'   => 64,
+                'tl_class'    => 'w50',
+                'nullIfEmpty' => true,
+            ),
+            'sql'           => "varchar(16) NULL"
+        ),
+        'markerColor'  => array
+        (
+            'label'         => &$GLOBALS['TL_LANG']['tl_leaflet_icon']['markerColor'],
+            'exclude'       => true,
+            'inputType'     => 'select',
+            'default'       => 'circle',
+            'options'       => [
+                'blue',
+                'red',
+                'orange-dark',
+                'orange',
+                'yellow',
+                'blue-dark',
+                'cyan',
+                'purple',
+                'violet',
+                'pink',
+                'green-dark',
+                'green',
+                'green-light',
+                'black',
+                'white'
+            ],
+            'eval'          => array(
+                'tl_class'    => 'w50',
+                'nullIfEmpty' => true,
+            ),
+            'sql'           => "varchar(16) NULL"
+        ),
     ),
 );

src/Netzmacht/Contao/Leaflet/Mapper/Type/ExtraMarkersIconMapper.php

@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * @package    contao-leaflet-maps
+ * @author     David Molineus <david.molineus@netzmacht.de>
+ * @copyright  2014-2016 netzmacht David Molineus
+ * @license    LGPL 3.0
+ * @filesource
+ *
+ */
+
+namespace Netzmacht\Contao\Leaflet\Mapper\Type;
+
+use Netzmacht\Contao\Leaflet\Filter\Filter;
+use Netzmacht\Contao\Leaflet\Mapper\DefinitionMapper;
+use Netzmacht\LeafletPHP\Definition;
+use Netzmacht\LeafletPHP\Definition\Type\DivIcon;
+
+/**
+ * Class DivIconMapper maps the icon model to the div icon definition.
+ *
+ * @package Netzmacht\Contao\Leaflet\Mapper\Type
+ */
+class ExtraMarkersIconMapper extends AbstractIconMapper
+{
+    /**
+     * Class of the definition being created.
+     *
+     * @var string
+     */
+    protected static $definitionClass = 'Netzmacht\LeafletPHP\Plugins\ExtraMarkers\ExtraMarkersIcon';
+
+    /**
+     * Layer type.
+     *
+     * @var string
+     */
+    protected static $type = 'extra';
+
+    /**
+     * {@inheritdoc}
+     */
+    protected function initialize()
+    {
+        parent::initialize();
+
+        $this->optionsBuilder->addOptions(['icon', 'iconColor', 'markerColor', 'shape', 'number', 'prefix']);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    protected function build(
+        Definition $definition,
+        \Model $model,
+        DefinitionMapper $mapper,
+        Filter $filter = null,
+        Definition $parent = null
+    ) {
+        parent::build($definition, $model, $mapper, $filter);
+
+        if ($definition instanceof DivIcon && $model->iconSize) {
+            $definition->setIconSize(explode(',', $model->iconSize, 2));
+        }
+    }
+}