Merge pull request #38 from Patternslib/affinitic/master

feat: Add option "useCluster" for switching marker cluster on or off.
Patternslib · Apr 3, 2023 · 2645854 · 2645854
2 parents 8d2f895 + 57d1242
commit 2645854
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 41 deletions.
diff --git a/src/documentation.md b/src/documentation.md
@@ -2,30 +2,51 @@
 
 ## Description
 
-Implements `Leaflet.js` with various options.
+Implements [Leaflet.js](https://leafletjs.com/) with various options.
+
 
 ## Documentation
 
-A more detailed documentation on how to use it goes here.
+Example usage:
+
+```
+    <div id="map1" style="height:400px" class="pat-leaflet" data-pat-leaflet='
+    {
+      "fullscreencontrol": false,
+      "locatecontrol": false,
+      "zoomcontrol": true,
+      "geosearch": true,
+      "latitude": 47.33325135,
+      "longitude": 9.645877746692685
+    }'></div>
+```
+
+For more examples see the [demo page](./index.html).
+
 
 ### Options reference
 
-| Property         | Default Value | Values | Type              | Description                   |
-| -----------------| ------------- | ------ | ----------------- | ----------------------------- |
-| latitude         | 0.0           |        | Float             | latitude of the map           |
-| longitude        | 0.0           |        | Float             | longitude of the map          |
-| maxClusterRadius | 80            |        | Integer           |                               |
-| zoom             | auto          | 1 - 19 | Integer           | zoom level of he map          |
-| zoomControl      | true          |        | Boolean           | are the zoomcontols avaible   |
-| fullscreenControl| true          |        | Boolean           | is the fullscreencontrol avaible |
-| addMarker        | false         |        | Boolean           | enables adding markers        |
-| boundsPadding    | 20            |        | Integer           |                               |
-| autolocate       | false         |        | Boolean           | locates your location         |
-| geosearch        | false         |        | Boolean           | search a location via osm,esri, google, bing|
-| geosearchProvider| openstreetmap | esri, google, bing | String | select your favorit locator|
-| locatecontrol    | false         |        | Boolean           |                               |
-| minimap          | false         |        | Boolean           | enables the minimap            |
-| defaullt_map_layer | { id: "OpenStreetMap.Mapnik", options: {} } |  |Dict |                   |
-| map_layers       | []            |        | List of Dicts     |                               |
-| image_path       | 'node_modules/leaflet.awesome-markers/dist/images' |        | String            |                               |
-| geojson_ajaxurl |               |        | String            |                               |
+Some options resemble the options from leaflet.
+You might also check [their documentation](https://leafletjs.com/reference.html).
+
+
+| Property           | Default Value | Values | Type              | Description                                      |
+| ------------------ | ------------- | ------ | ----------------- | ------------------------------------------------ |
+| latitude           | 0.0           |        | Float             | Latitude of the map.                             |
+| longitude          | 0.0           |        | Float             | Longitude of the map.                            |
+| boundsPadding      | 20            |        | Integer           | Padding for map boundaries.                      |
+| useCluster         | true          |        | Boolean           | Enable/Disable the marker cluster feature.       |
+| maxClusterRadius   | 80            |        | Integer           | Set the marker cluster radius.                   |
+| zoom               | auto          | 1 - 19 | Integer           | Zoom level of he map.                            |
+| zoomControl        | true          |        | Boolean           | Show zoom control buttons.                       |
+| fullscreenControl  | true          |        | Boolean           | Show the fullscreen control button.              |
+| addMarker          | false         |        | Boolean           | Enable feature to add markers.                   |
+| locatecontrol      | false         |        | Boolean           | Adds a button to show your position on the map.  |
+| autolocate         | false         |        | Boolean           | Automatically set map to your location.          |
+| geosearch          | false         |        | Boolean           | Search a location via osm, esri, google or bing. |
+| geosearch_provider | openstreetmap | openstreetmap, esri, google, bing | String | Service for location searches.   |
+| minimap            | false         |        | Boolean           | Enables the minimap overview map.                |
+| defaullt_map_layer | { id: "OpenStreetMap.Mapnik", options: {} } |  | Dict | Define the default map layer.         |
+| map_layers         | []            |        | List of Dicts     | Define the available map layers (More info in source code). |
+| image_path         | 'node_modules/leaflet.awesome-markers/dist/images' | | String | Import path to icons.         |
+| geojson_ajaxurl    |               |        | String            | Define a AJAX endpoint for geojson data to load (More info in source code. |
diff --git a/src/index.html b/src/index.html
@@ -3,32 +3,37 @@
   <head>
     <meta charset="utf-8">
     <title>leaflet demo</title>
-    <script src="/bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@patternslib/[email protected]/dist/bundle.min.js"></script>
+    <script src="/remote.min.js"></script>
   </head>
   <body>
 
     <h2>pat-leaflet demo - minimal</h2>
-    <div id="map1" style="height:400px" class="pat-leaflet" data-pat-leaflet='
-    {
-      "fullscreencontrol": false,
-      "locatecontrol": false,
-      "zoomcontrol": true,
-      "geosearch": true,
-      "latitude": 47.33325135,
-      "longitude": 9.645877746692685
-    }'></div>
+    <section class="pat-clone-code">
+      <div id="map1" style="height:400px" class="pat-leaflet" data-pat-leaflet='
+      {
+        "fullscreencontrol": false,
+        "locatecontrol": false,
+        "zoomcontrol": true,
+        "geosearch": true,
+        "latitude": 47.33325135,
+        "longitude": 9.645877746692685
+      }'></div>
+    </section>
 
     <h2>pat-leaflet demo - full</h2>
-    <div id="map2" style="height:400px" class="pat-leaflet"
-        data-pat-leaflet='{
+    <section class="pat-clone-code">
+      <div id="map2" style="height:400px" class="pat-leaflet"
+          data-pat-leaflet='{
 "fullscreencontrol": true,
 "locatecontrol": true,
 "zoomcontrol": true,
 "minimap": true,
 "geosearch": true,
 "geosearch_provider": "nominatim",
 "addmarker": true,
-"maxClusterRadius": 80
+"maxClusterRadius": 80,
+"useCluster": true
 }'
         data-geojson='{
 "type": "FeatureCollection",
@@ -81,8 +86,9 @@ <h2>pat-leaflet demo - full</h2>
         }
     }
 ]}'></div>
-  <input type="text" name="latitude" value="55.69078" id="latinput"/>
-  <input type="text" name="longitude" value="12.55568" id="lnginput"/>
+      <input type="text" name="latitude" value="55.69078" id="latinput"/>
+      <input type="text" name="longitude" value="12.55568" id="lnginput"/>
+    </section>
 
   </body>
 </html>
diff --git a/src/leaflet.js b/src/leaflet.js
@@ -16,6 +16,7 @@ parser.addArgument("longitude", "0.0");
 parser.addArgument("zoom", "auto");
 
 parser.addArgument("maxClusterRadius", "80");
+parser.addArgument("useCluster", true);
 
 parser.addArgument("boundsPadding", "20");
 
@@ -82,9 +83,13 @@ class Pattern extends BasePattern {
             sleepOpacity: 1,
         }));
 
-        const marker_cluster = (this.marker_cluster = new LMarkerClusterGroup({
-            maxClusterRadius: this.options.maxClusterRadius,
-        }));
+        if (options.useCluster == true) {
+            this.marker_cluster = new LMarkerClusterGroup({
+                maxClusterRadius: this.options.maxClusterRadius,
+            });
+        } else {
+            this.marker_cluster = new this.L.featureGroup();
+        }
 
         // hand over some map events to the element
         map.on("moveend zoomend", (e) => {
@@ -196,7 +201,7 @@ class Pattern extends BasePattern {
                         { properties: { editable: true, popup: e.location.label } },
                         e.marker
                     );
-                    marker_cluster.addLayer(e.marker);
+                    this.marker_cluster.addLayer(e.marker);
                 }
                 // fit to window
                 map.fitBounds([latlng], fitBoundsOptions);
@@ -320,7 +325,6 @@ class Pattern extends BasePattern {
             bounds = this.marker_cluster.getBounds();
             map.fitBounds(bounds, this.fitBoundsOptions);
         }
-
     }
 
     bind_popup(feature, marker) {

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,6 +27,7 @@ module.exports = () => {
     config.plugins.push(
         mf_config({
             name: package_json.name,
+            filename: "remote.min.js",
             remote_entry: config.entry["bundle.min"],
             dependencies: {
                 ...package_json_patternslib.dependencies,