Allow multipart geometries (#19)

Author: JaZo

README.md

@@ -53,7 +53,7 @@ The **Geometry** field displays a leaflet map, with a set of configuration optio
 ### Geometry Field
 
 > [!IMPORTANT]  
-> This field is designed to be used in conjunction with a database column of type `POINT`, `LINESTRING`, `POLYGON` or `GEOMETRY`. It currently does not support geometry types with multiple items like `MULTIPOINT`, `MULTILINESTRING`, `MULTIPOLYGON` or `GEOMETRYCOLLECTION`. This field expects the attribute value to be a valid [GeoJSON](https://geojson.org/) string. Make sure your model attribute stores and retrieves GeoJSON data as a string.
+> This field is designed to be used in conjunction with a database column of type `(MULTI)POINT`, `(MULTI)LINESTRING`, `(MULTI)POLYGON` or `GEOMETRY`. It currently does not support geometries with mixed types i.e. `GEOMETRYCOLLECTION`. This field expects the attribute value to be a valid [GeoJSON](https://geojson.org/) string. Make sure your model attribute stores and retrieves GeoJSON data as a string.
 
 The form field can be used with no options, by simply adding this to your Filament
 form schema:
@@ -111,6 +111,7 @@ Geometry::make('location')
         DrawMode::Polygon,
         DrawMode::Rectangle,
     ])
+    ->multipart(false)
     ->drawControlPosition(ControlPosition::TopRight)
 ```
 

package-lock.json

@@ -22,6 +22,8 @@
     },
     "dependencies": {
         "@geoman-io/leaflet-geoman-free": "^2.18",
+        "@turf/combine": "^6.5.0",
+        "@turf/flatten": "^6.5.0",
         "leaflet": "^1.9",
         "leaflet-gesture-handling": "^1.2.2",
         "leaflet.fullscreen": "^4.0.0"

package.json

@@ -2,6 +2,8 @@ import * as LF from 'leaflet';
 import 'leaflet.fullscreen';
 import 'leaflet-gesture-handling';
 import '@geoman-io/leaflet-geoman-free';
+import combine from '@turf/combine';
+import flatten from '@turf/flatten';
 
 export default function filamentGeometry($wire, config) {
     return {
@@ -31,6 +33,23 @@ export default function filamentGeometry($wire, config) {
                         icon: this.createMarkerIcon(),
                     })
                 },
+                onEachFeature: (feature, layer) => {
+                    layer.pm.getShape = function () {
+                        switch (feature.type) {
+                            case 'Point':
+                            case 'MultiPoint':
+                                return 'Marker';
+                            case 'LineString':
+                            case 'MultiLineString':
+                                return 'Line';
+                            case 'Polygon':
+                            case 'MultiPolygon':
+                                return 'Polygon';
+                            default:
+                                throw new Error(`Unsupported feature type: ${feature.type}`);
+                        }
+                    }
+                },
             }).addTo(this.map)
 
             if (this.drawItems.getLayers().length > 0) {
@@ -68,11 +87,21 @@ export default function filamentGeometry($wire, config) {
                     return;
                 }
 
-                if (confirm(config.lang.warning.limit)) {
-                    this.drawItems.clearLayers()
-                } else {
-                    this.map.pm.disableDraw()
-                    this.map.pm.enableGlobalEditMode()
+                const allowedShapes = [this.drawItems.getLayers()[0].pm.getShape()];
+                if (allowedShapes[0] === 'Rectangle') {
+                    allowedShapes.push('Polygon')
+                } else if (allowedShapes[0] === 'Polygon') {
+                    allowedShapes.push('Rectangle')
+                }
+                const allowedShapeEnabled = allowedShapes.some((shape) => this.map.pm.Draw[shape].enabled())
+
+                if (!this.config.multipart || !allowedShapeEnabled) {
+                    if (confirm(this.config.multipart ? config.lang.warning.limit_multipart : config.lang.warning.limit)) {
+                        this.drawItems.clearLayers()
+                    } else {
+                        this.map.pm.disableDraw()
+                        this.map.pm.enableGlobalEditMode()
+                    }
                 }
             })
 
@@ -97,14 +126,25 @@ export default function filamentGeometry($wire, config) {
 
         updateGeoJson: function() {
             try {
-                this.$wire.set(config.statePath, this.drawItems.getLayers()[0] ? JSON.stringify(this.drawItems.getLayers()[0].toGeoJSON().geometry) : null, true)
+                let value = null;
+                if (this.drawItems.getLayers().length) {
+                    if (this.config.multipart) {
+                        value = combine(this.drawItems.toGeoJSON()).features[0].geometry;
+                    } else {
+                        value = this.drawItems.getLayers()[0].toGeoJSON().geometry;
+                    }
+                }
+
+                this.$wire.set(config.statePath, value ? JSON.stringify(value) : null, true)
             } catch (error) {
                 console.error('Error updating GeoJSON:', error)
             }
         },
 
         getGeoJsonFeature: function() {
-            return JSON.parse(this.$wire.get(config.statePath))
+            const parsed = JSON.parse(this.$wire.get(config.statePath))
+
+            return parsed ? flatten(parsed).features.map(feature => feature.geometry) : null
         },
 
         destroy: function() {

resources/dist/filament-geometry.js

@@ -3,5 +3,6 @@
 return [
     'warning' => [
         'limit' => 'You can add a maximum of 1 object. Do you want to delete the current one and start over?',
+        'limit_multipart' => 'You can use only one object type at a time. Do you want to delete the current objects and start over?',
     ],
 ];

resources/js/index.js

@@ -3,5 +3,6 @@
 return [
     'warning' => [
         'limit' => 'U kunt maximaal 1 object toevoegen. Wilt u de huidige verwijderen en opnieuw beginnen?',
+        'limit_multipart' => 'U kunt maximaal één object type tegelijk gebruiken. Wilt u de huidige objecten verwijderen en opnieuw beginnen?',
     ],
 ];

resources/lang/en/geometry.php

@@ -24,6 +24,8 @@ class Geometry extends Field
 
     private string $locale = 'en';
 
+    private bool $multipart = false;
+
     /**
      * @var array<string, mixed>
      */
@@ -86,6 +88,16 @@ public function drawModes(array $drawModes = []): self
         return $this;
     }
 
+    /**
+     * @return $this
+     */
+    public function multipart(bool $multipart = true): self
+    {
+        $this->multipart = $multipart;
+
+        return $this;
+    }
+
     /**
      * Create json configuration string
      */
@@ -97,6 +109,7 @@ public function getMapConfig(): string
             'bounds' => $this->bounds?->toArray(),
             'map' => $this->mapOptions,
             'geoman' => $this->geomanOptions,
+            'multipart' => $this->multipart,
             'locale' => $this->locale,
             'markerIcon' => $this->markerIcon->options(),
             'tileLayer' => [