Merge pull request #1 from tumapav/ft-extraTileControl

Add extraTileControl() for more customisation

README.md

@@ -117,6 +117,7 @@ Option | Type   | Default                                       | Description
 `tilesUrl(string)` | string | http://tile.openstreetmap.org/{z}/{x}/{y}.png | Tiles service/provider url.
 `showZoomControl(bool)` | bool   | false                                         | Show or hide Zoom control of the map.
 `extraControl(array)` | array  | []                                         | Add extra map controls (please refer to leaflet)
+`extraTileControl(array)` | array  | []                                         | Add extra tileLayer controls (please refer to leaflet tileLayer())
 
 # License
 

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/humaidem/map-picker/map-picker.js": "/humaidem/map-picker/map-picker.js?id=d5e65ec4a2c166edb3a2",
-    "/humaidem/map-picker/map-picker.css": "/humaidem/map-picker/map-picker.css?id=cd5eec2b100f31b86f69"
+    "/humaidem/map-picker/map-picker.js": "/humaidem/map-picker/map-picker.js?id=57589bc2fe7dc1200c752294a060d243",
+    "/humaidem/map-picker/map-picker.css": "/humaidem/map-picker/map-picker.css?id=016942598af1e431d1cc4e25b89f2809"
 }

resources/js/map-picker.js

@@ -22,10 +22,12 @@ window.mapPicker = ($wire, config) => {
             }
 
             this.tile = L.tileLayer(config.tilesUrl, {
-                attribution: null,
+                attribution: config.attribution,
+                minZoom: config.minZoom,
                 maxZoom: config.maxZoom,
-                tileSize: 512,
-                zoomOffset: -1
+                tileSize: config.tileSize,
+                zoomOffset: config.zoomOffset,
+                detectRetina: config.detectRetina,
             }).addTo(this.map);
 
 

src/Fields/OSMMap.php

@@ -18,10 +18,16 @@ class OSMMap extends Field implements MapOptions
      * @var array
      */
     private array $mapConfig = [
-        'statePath'  => '',
-        'draggable'  => false,
-        'showMarker' => false,
-        'tilesUrl'   => 'http://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        'statePath'    => '',
+        'draggable'    => false,
+        'showMarker'   => false,
+        'tilesUrl'     => 'http://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        'attribution'  => null,
+        'zoomOffset'   => -1,
+        'tileSize'     => 512,
+        'detectRetina' => false,
+        'minZoom'      => 0,
+        'maxZoom'      => 18,
     ];
 
     /**
@@ -153,6 +159,17 @@ public function extraControl(array $control): self
         return $this;
     }
 
+    /**
+     * Append extra controls to be passed to leaflet tileLayer object
+     * @param array $control
+     * @return $this
+     */
+    public function extraTileControl(array $control): self
+    {
+        $this->mapConfig = array_merge($this->mapConfig, $control);
+        return $this;
+    }
+
     public function hasJs(): bool
     {
         return true;

src/Interfaces/MapOptions.php

@@ -22,6 +22,8 @@ public function showZoomControl(bool $show = true): self;
 
     public function extraControl(array $control): self;
 
+    public function extraTileControl(array $control): self;
+
     public function hasJs(): bool;
 
     public function jsUrl(): string;