Skip to content

Commit bee1ebb

Browse files
author
Joe Hawes
committed
Clustering Groups working(!)
1 parent 4aa6450 commit bee1ebb

File tree

6 files changed

+140
-116
lines changed

6 files changed

+140
-116
lines changed

‎assets/dist/waymark-js/js/waymark-js.js‎

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7469,6 +7469,9 @@ function Waymark_Map() {
74697469
show_gallery: 0,
74707470
show_filter: 0,
74717471
show_elevation: 0,
7472+
// TODO!
7473+
// Add setting
7474+
show_cluster: 1,
74727475
elevation_div_id: "waymark-elevation",
74737476
elevation_units: "metric",
74747477
elevation_initial: 1,
@@ -8444,19 +8447,7 @@ function Waymark_Map() {
84448447
}
84458448

84468449
//Add Layer to group
8447-
layer.addTo(Waymark[layer_type + '_sub_groups'][type.type_key]);
8448-
8449-
//Marker Cluster
8450-
if(
8451-
Waymark.mode == 'view'
8452-
&&
8453-
layer_type == 'marker'
8454-
&&
8455-
typeof Waymark.marker_cluster === 'object'
8456-
) {
8457-
Waymark.marker_cluster.addLayer(layer);
8458-
}
8459-
8450+
layer.addTo(Waymark[layer_type + "_sub_groups"][type.type_key]);
84608451
//Direction layer?
84618452
if (layer_type == "line" && typeof layer.direction_layer === "object") {
84628453
layer.direction_layer.addTo(
@@ -8835,44 +8826,61 @@ function Waymark_Map_Viewer() {
88358826
//Clustering
88368827
Waymark.setupCluster();
88378828

8838-
jQuery(Waymark.map.getContainer()).addClass('waymark-is-viewer');
8839-
8829+
jQuery(Waymark.map.getContainer()).addClass("waymark-is-viewer");
8830+
88408831
//Hidden? (i.e. display:none)
8841-
Waymark.setup_hidden_checker();
8842-
}
8832+
Waymark.setup_hidden_checker();
8833+
};
88438834

88448835
this.setupCluster = () => {
8845-
Waymark.jq_map_container.addClass('waymark-has-cluster');
8836+
if (!Waymark.config.show_cluster) {
8837+
return;
8838+
}
88468839

8840+
console.debug("setupCluster");
8841+
8842+
Waymark.jq_map_container.addClass("waymark-has-cluster");
8843+
8844+
// Create Marker Cluster
88478845
//Fix - https://github.com/Leaflet/Leaflet.markercluster/issues/611#issuecomment-277670244
88488846
Waymark.map._layersMaxZoom = 18;
88498847
Waymark.marker_cluster = L.markerClusterGroup({
8850-
iconCreateFunction: this.clusterIconFunction
8848+
iconCreateFunction: this.clusterIconFunction,
88518849
});
8852-
8853-
Waymark.map.addLayer(Waymark.marker_cluster);
88548850

8855-
setTimeout(() => Waymark.marker_cluster.refreshClusters(), 2000)
8856-
}
8851+
// Make Marker Cluster the parent group for all markers
8852+
Waymark.marker_parent_group = Waymark.marker_cluster;
8853+
8854+
// Add Cluster to Map
8855+
Waymark.map.addLayer(Waymark.marker_cluster);
8856+
8857+
/*
8858+
Waymark.map.on("overlayadd overlayremove", (e) => {
8859+
console.debug(e);
8860+
// Waymark.reset_data_view();
8861+
Waymark.marker_cluster.refreshClusters();
8862+
});
8863+
*/
8864+
};
88578865

88588866
this.clusterIconFunction = (cluster) => {
88598867
const clusterTypes = new Map([]);
88608868

8861-
//Each Marker
8869+
//Each Marker
88628870
cluster.getAllChildMarkers().forEach((marker) => {
88638871
//Get data
88648872
const typeKey = marker.feature.properties.type;
8865-
const typeData = Waymark.get_type('marker', typeKey);
8873+
const typeData = Waymark.get_type("marker", typeKey);
88668874
typeData.iconData = Waymark.build_icon_data(typeData);
8867-
8875+
88688876
//Keep Count
8869-
if(! clusterTypes.has(typeKey)) {
8877+
if (!clusterTypes.has(typeKey)) {
88708878
typeData.typeCount = 1;
88718879
} else {
88728880
typeData.typeCount++;
88738881
}
88748882

8875-
clusterTypes.set(typeKey, typeData);
8883+
clusterTypes.set(typeKey, typeData);
88768884
});
88778885

88788886
console.debug(clusterTypes);
@@ -8882,17 +8890,17 @@ function Waymark_Map_Viewer() {
88828890

88838891
let index = 0;
88848892
let maxWidth = 0;
8885-
let maxHeight = 0;
8893+
let maxHeight = 0;
88868894
clusterTypes.forEach((typeData) => {
88878895
const count = typeData.typeCount;
88888896
const data = typeData.iconData;
88898897
const indexReversed = clusterTypes.size - index;
88908898

8891-
maxWidth = (data.iconSize[0] > maxWidth) ? data.iconSize[0] : maxWidth;
8892-
maxHeight = (data.iconSize[0] > maxHeight) ? data.iconSize[0] : maxHeight;
8899+
maxWidth = data.iconSize[0] > maxWidth ? data.iconSize[0] : maxWidth;
8900+
maxHeight = data.iconSize[0] > maxHeight ? data.iconSize[0] : maxHeight;
88938901

88948902
//Append count?
8895-
if(count > 1) {
8903+
if (count > 1) {
88968904
data.html += `<div class="waymark-cluster-count">${count}</div>`;
88978905
}
88988906

@@ -8912,15 +8920,15 @@ function Waymark_Map_Viewer() {
89128920
`;
89138921

89148922
index++;
8915-
})
8923+
});
89168924

8917-
return L.divIcon({
8918-
className: 'waymark-cluster',
8925+
return L.divIcon({
8926+
className: "waymark-cluster",
89198927
html: clusterHTML,
8920-
iconSize: [maxWidth, maxHeight]
8928+
iconSize: [maxWidth, maxHeight],
89218929
});
8922-
}
8923-
8930+
};
8931+
89248932
//Initally hidden?
89258933
this.setup_hidden_checker = function () {
89268934
let hidden_checker = setInterval(function () {

‎assets/dist/waymark-js/js/waymark-js.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waymark-js/dist/js/waymark-js.js‎

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7469,6 +7469,9 @@ function Waymark_Map() {
74697469
show_gallery: 0,
74707470
show_filter: 0,
74717471
show_elevation: 0,
7472+
// TODO!
7473+
// Add setting
7474+
show_cluster: 1,
74727475
elevation_div_id: "waymark-elevation",
74737476
elevation_units: "metric",
74747477
elevation_initial: 1,
@@ -8444,19 +8447,7 @@ function Waymark_Map() {
84448447
}
84458448

84468449
//Add Layer to group
8447-
layer.addTo(Waymark[layer_type + '_sub_groups'][type.type_key]);
8448-
8449-
//Marker Cluster
8450-
if(
8451-
Waymark.mode == 'view'
8452-
&&
8453-
layer_type == 'marker'
8454-
&&
8455-
typeof Waymark.marker_cluster === 'object'
8456-
) {
8457-
Waymark.marker_cluster.addLayer(layer);
8458-
}
8459-
8450+
layer.addTo(Waymark[layer_type + "_sub_groups"][type.type_key]);
84608451
//Direction layer?
84618452
if (layer_type == "line" && typeof layer.direction_layer === "object") {
84628453
layer.direction_layer.addTo(
@@ -8835,44 +8826,61 @@ function Waymark_Map_Viewer() {
88358826
//Clustering
88368827
Waymark.setupCluster();
88378828

8838-
jQuery(Waymark.map.getContainer()).addClass('waymark-is-viewer');
8839-
8829+
jQuery(Waymark.map.getContainer()).addClass("waymark-is-viewer");
8830+
88408831
//Hidden? (i.e. display:none)
8841-
Waymark.setup_hidden_checker();
8842-
}
8832+
Waymark.setup_hidden_checker();
8833+
};
88438834

88448835
this.setupCluster = () => {
8845-
Waymark.jq_map_container.addClass('waymark-has-cluster');
8836+
if (!Waymark.config.show_cluster) {
8837+
return;
8838+
}
88468839

8840+
console.debug("setupCluster");
8841+
8842+
Waymark.jq_map_container.addClass("waymark-has-cluster");
8843+
8844+
// Create Marker Cluster
88478845
//Fix - https://github.com/Leaflet/Leaflet.markercluster/issues/611#issuecomment-277670244
88488846
Waymark.map._layersMaxZoom = 18;
88498847
Waymark.marker_cluster = L.markerClusterGroup({
8850-
iconCreateFunction: this.clusterIconFunction
8848+
iconCreateFunction: this.clusterIconFunction,
88518849
});
8852-
8853-
Waymark.map.addLayer(Waymark.marker_cluster);
88548850

8855-
setTimeout(() => Waymark.marker_cluster.refreshClusters(), 2000)
8856-
}
8851+
// Make Marker Cluster the parent group for all markers
8852+
Waymark.marker_parent_group = Waymark.marker_cluster;
8853+
8854+
// Add Cluster to Map
8855+
Waymark.map.addLayer(Waymark.marker_cluster);
8856+
8857+
/*
8858+
Waymark.map.on("overlayadd overlayremove", (e) => {
8859+
console.debug(e);
8860+
// Waymark.reset_data_view();
8861+
Waymark.marker_cluster.refreshClusters();
8862+
});
8863+
*/
8864+
};
88578865

88588866
this.clusterIconFunction = (cluster) => {
88598867
const clusterTypes = new Map([]);
88608868

8861-
//Each Marker
8869+
//Each Marker
88628870
cluster.getAllChildMarkers().forEach((marker) => {
88638871
//Get data
88648872
const typeKey = marker.feature.properties.type;
8865-
const typeData = Waymark.get_type('marker', typeKey);
8873+
const typeData = Waymark.get_type("marker", typeKey);
88668874
typeData.iconData = Waymark.build_icon_data(typeData);
8867-
8875+
88688876
//Keep Count
8869-
if(! clusterTypes.has(typeKey)) {
8877+
if (!clusterTypes.has(typeKey)) {
88708878
typeData.typeCount = 1;
88718879
} else {
88728880
typeData.typeCount++;
88738881
}
88748882

8875-
clusterTypes.set(typeKey, typeData);
8883+
clusterTypes.set(typeKey, typeData);
88768884
});
88778885

88788886
console.debug(clusterTypes);
@@ -8882,17 +8890,17 @@ function Waymark_Map_Viewer() {
88828890

88838891
let index = 0;
88848892
let maxWidth = 0;
8885-
let maxHeight = 0;
8893+
let maxHeight = 0;
88868894
clusterTypes.forEach((typeData) => {
88878895
const count = typeData.typeCount;
88888896
const data = typeData.iconData;
88898897
const indexReversed = clusterTypes.size - index;
88908898

8891-
maxWidth = (data.iconSize[0] > maxWidth) ? data.iconSize[0] : maxWidth;
8892-
maxHeight = (data.iconSize[0] > maxHeight) ? data.iconSize[0] : maxHeight;
8899+
maxWidth = data.iconSize[0] > maxWidth ? data.iconSize[0] : maxWidth;
8900+
maxHeight = data.iconSize[0] > maxHeight ? data.iconSize[0] : maxHeight;
88938901

88948902
//Append count?
8895-
if(count > 1) {
8903+
if (count > 1) {
88968904
data.html += `<div class="waymark-cluster-count">${count}</div>`;
88978905
}
88988906

@@ -8912,15 +8920,15 @@ function Waymark_Map_Viewer() {
89128920
`;
89138921

89148922
index++;
8915-
})
8923+
});
89168924

8917-
return L.divIcon({
8918-
className: 'waymark-cluster',
8925+
return L.divIcon({
8926+
className: "waymark-cluster",
89198927
html: clusterHTML,
8920-
iconSize: [maxWidth, maxHeight]
8928+
iconSize: [maxWidth, maxHeight],
89218929
});
8922-
}
8923-
8930+
};
8931+
89248932
//Initally hidden?
89258933
this.setup_hidden_checker = function () {
89268934
let hidden_checker = setInterval(function () {

‎waymark-js/dist/js/waymark-js.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waymark-js/src/js/Waymark_Map.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,9 @@ function Waymark_Map() {
9696
show_gallery: 0,
9797
show_filter: 0,
9898
show_elevation: 0,
99+
// TODO!
100+
// Add setting
101+
show_cluster: 1,
99102
elevation_div_id: "waymark-elevation",
100103
elevation_units: "metric",
101104
elevation_initial: 1,
@@ -1071,19 +1074,7 @@ function Waymark_Map() {
10711074
}
10721075

10731076
//Add Layer to group
1074-
layer.addTo(Waymark[layer_type + '_sub_groups'][type.type_key]);
1075-
1076-
//Marker Cluster
1077-
if(
1078-
Waymark.mode == 'view'
1079-
&&
1080-
layer_type == 'marker'
1081-
&&
1082-
typeof Waymark.marker_cluster === 'object'
1083-
) {
1084-
Waymark.marker_cluster.addLayer(layer);
1085-
}
1086-
1077+
layer.addTo(Waymark[layer_type + "_sub_groups"][type.type_key]);
10871078
//Direction layer?
10881079
if (layer_type == "line" && typeof layer.direction_layer === "object") {
10891080
layer.direction_layer.addTo(

0 commit comments

Comments
 (0)