Skip to content

Commit 2645854

Browse files
thetthet
authored
Merge pull request #38 from Patternslib/affinitic/master
feat: Add option "useCluster" for switching marker cluster on or off.
2 parents 8d2f895 + 57d1242 commit 2645854

File tree

4 files changed

+73
-41
lines changed

4 files changed

+73
-41
lines changed

‎src/documentation.md

+42-21
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,51 @@
22

33
## Description
44

5-
Implements `Leaflet.js` with various options.
5+
Implements [Leaflet.js](https://leafletjs.com/) with various options.
6+
67

78
## Documentation
89

9-
A more detailed documentation on how to use it goes here.
10+
Example usage:
11+
12+
```
13+
<div id="map1" style="height:400px" class="pat-leaflet" data-pat-leaflet='
14+
{
15+
"fullscreencontrol": false,
16+
"locatecontrol": false,
17+
"zoomcontrol": true,
18+
"geosearch": true,
19+
"latitude": 47.33325135,
20+
"longitude": 9.645877746692685
21+
}'></div>
22+
```
23+
24+
For more examples see the [demo page](./index.html).
25+
1026

1127
### Options reference
1228

13-
| Property | Default Value | Values | Type | Description |
14-
| -----------------| ------------- | ------ | ----------------- | ----------------------------- |
15-
| latitude | 0.0 | | Float | latitude of the map |
16-
| longitude | 0.0 | | Float | longitude of the map |
17-
| maxClusterRadius | 80 | | Integer | |
18-
| zoom | auto | 1 - 19 | Integer | zoom level of he map |
19-
| zoomControl | true | | Boolean | are the zoomcontols avaible |
20-
| fullscreenControl| true | | Boolean | is the fullscreencontrol avaible |
21-
| addMarker | false | | Boolean | enables adding markers |
22-
| boundsPadding | 20 | | Integer | |
23-
| autolocate | false | | Boolean | locates your location |
24-
| geosearch | false | | Boolean | search a location via osm,esri, google, bing|
25-
| geosearchProvider| openstreetmap | esri, google, bing | String | select your favorit locator|
26-
| locatecontrol | false | | Boolean | |
27-
| minimap | false | | Boolean | enables the minimap |
28-
| defaullt_map_layer | { id: "OpenStreetMap.Mapnik", options: {} } | |Dict | |
29-
| map_layers | [] | | List of Dicts | |
30-
| image_path | 'node_modules/leaflet.awesome-markers/dist/images' | | String | |
31-
| geojson_ajaxurl | | | String | |
29+
Some options resemble the options from leaflet.
30+
You might also check [their documentation](https://leafletjs.com/reference.html).
31+
32+
33+
| Property | Default Value | Values | Type | Description |
34+
| ------------------ | ------------- | ------ | ----------------- | ------------------------------------------------ |
35+
| latitude | 0.0 | | Float | Latitude of the map. |
36+
| longitude | 0.0 | | Float | Longitude of the map. |
37+
| boundsPadding | 20 | | Integer | Padding for map boundaries. |
38+
| useCluster | true | | Boolean | Enable/Disable the marker cluster feature. |
39+
| maxClusterRadius | 80 | | Integer | Set the marker cluster radius. |
40+
| zoom | auto | 1 - 19 | Integer | Zoom level of he map. |
41+
| zoomControl | true | | Boolean | Show zoom control buttons. |
42+
| fullscreenControl | true | | Boolean | Show the fullscreen control button. |
43+
| addMarker | false | | Boolean | Enable feature to add markers. |
44+
| locatecontrol | false | | Boolean | Adds a button to show your position on the map. |
45+
| autolocate | false | | Boolean | Automatically set map to your location. |
46+
| geosearch | false | | Boolean | Search a location via osm, esri, google or bing. |
47+
| geosearch_provider | openstreetmap | openstreetmap, esri, google, bing | String | Service for location searches. |
48+
| minimap | false | | Boolean | Enables the minimap overview map. |
49+
| defaullt_map_layer | { id: "OpenStreetMap.Mapnik", options: {} } | | Dict | Define the default map layer. |
50+
| map_layers | [] | | List of Dicts | Define the available map layers (More info in source code). |
51+
| image_path | 'node_modules/leaflet.awesome-markers/dist/images' | | String | Import path to icons. |
52+
| geojson_ajaxurl | | | String | Define a AJAX endpoint for geojson data to load (More info in source code. |

‎src/index.html

+21-15
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,37 @@
33
<head>
44
<meta charset="utf-8">
55
<title>leaflet demo</title>
6-
<script src="/bundle.min.js"></script>
6+
<script src="https://cdn.jsdelivr.net/npm/@patternslib/[email protected]/dist/bundle.min.js"></script>
7+
<script src="/remote.min.js"></script>
78
</head>
89
<body>
910

1011
<h2>pat-leaflet demo - minimal</h2>
11-
<div id="map1" style="height:400px" class="pat-leaflet" data-pat-leaflet='
12-
{
13-
"fullscreencontrol": false,
14-
"locatecontrol": false,
15-
"zoomcontrol": true,
16-
"geosearch": true,
17-
"latitude": 47.33325135,
18-
"longitude": 9.645877746692685
19-
}'></div>
12+
<section class="pat-clone-code">
13+
<div id="map1" style="height:400px" class="pat-leaflet" data-pat-leaflet='
14+
{
15+
"fullscreencontrol": false,
16+
"locatecontrol": false,
17+
"zoomcontrol": true,
18+
"geosearch": true,
19+
"latitude": 47.33325135,
20+
"longitude": 9.645877746692685
21+
}'></div>
22+
</section>
2023

2124
<h2>pat-leaflet demo - full</h2>
22-
<div id="map2" style="height:400px" class="pat-leaflet"
23-
data-pat-leaflet='{
25+
<section class="pat-clone-code">
26+
<div id="map2" style="height:400px" class="pat-leaflet"
27+
data-pat-leaflet='{
2428
"fullscreencontrol": true,
2529
"locatecontrol": true,
2630
"zoomcontrol": true,
2731
"minimap": true,
2832
"geosearch": true,
2933
"geosearch_provider": "nominatim",
3034
"addmarker": true,
31-
"maxClusterRadius": 80
35+
"maxClusterRadius": 80,
36+
"useCluster": true
3237
}'
3338
data-geojson='{
3439
"type": "FeatureCollection",
@@ -81,8 +86,9 @@ <h2>pat-leaflet demo - full</h2>
8186
}
8287
}
8388
]}'></div>
84-
<input type="text" name="latitude" value="55.69078" id="latinput"/>
85-
<input type="text" name="longitude" value="12.55568" id="lnginput"/>
89+
<input type="text" name="latitude" value="55.69078" id="latinput"/>
90+
<input type="text" name="longitude" value="12.55568" id="lnginput"/>
91+
</section>
8692

8793
</body>
8894
</html>

‎src/leaflet.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ parser.addArgument("longitude", "0.0");
1616
parser.addArgument("zoom", "auto");
1717

1818
parser.addArgument("maxClusterRadius", "80");
19+
parser.addArgument("useCluster", true);
1920

2021
parser.addArgument("boundsPadding", "20");
2122

@@ -82,9 +83,13 @@ class Pattern extends BasePattern {
8283
sleepOpacity: 1,
8384
}));
8485

85-
const marker_cluster = (this.marker_cluster = new LMarkerClusterGroup({
86-
maxClusterRadius: this.options.maxClusterRadius,
87-
}));
86+
if (options.useCluster == true) {
87+
this.marker_cluster = new LMarkerClusterGroup({
88+
maxClusterRadius: this.options.maxClusterRadius,
89+
});
90+
} else {
91+
this.marker_cluster = new this.L.featureGroup();
92+
}
8893

8994
// hand over some map events to the element
9095
map.on("moveend zoomend", (e) => {
@@ -196,7 +201,7 @@ class Pattern extends BasePattern {
196201
{ properties: { editable: true, popup: e.location.label } },
197202
e.marker
198203
);
199-
marker_cluster.addLayer(e.marker);
204+
this.marker_cluster.addLayer(e.marker);
200205
}
201206
// fit to window
202207
map.fitBounds([latlng], fitBoundsOptions);
@@ -320,7 +325,6 @@ class Pattern extends BasePattern {
320325
bounds = this.marker_cluster.getBounds();
321326
map.fitBounds(bounds, this.fitBoundsOptions);
322327
}
323-
324328
}
325329

326330
bind_popup(feature, marker) {

‎webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ module.exports = () => {
2727
config.plugins.push(
2828
mf_config({
2929
name: package_json.name,
30+
filename: "remote.min.js",
3031
remote_entry: config.entry["bundle.min"],
3132
dependencies: {
3233
...package_json_patternslib.dependencies,

0 commit comments

Comments
 (0)