diff --git a/app.py b/app.py
index b96721db..6b0dacf9 100755
--- a/app.py
+++ b/app.py
@@ -14,14 +14,17 @@
# Create the app
app = Dash(
- __name__,
- external_stylesheets=external_stylesheets,
- use_pages=True,
+ external_scripts = [
+ 'https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js' # Turf.js for convex hulls
+ ],
+ external_stylesheets = external_stylesheets,
+ name = __name__,
# Add meta tags for mobile devices
# https://community.plotly.com/t/reorder-website-for-mobile-view/33669/5?
meta_tags = [
{"name": "viewport", "content": "width=device-width, initial-scale=1"}
],
+ use_pages = True,
)
# Set the page title
diff --git a/assets/dashExtensions_default.js b/assets/dashExtensions_default.js
new file mode 100644
index 00000000..3a32ff6a
--- /dev/null
+++ b/assets/dashExtensions_default.js
@@ -0,0 +1,101 @@
+window.dashExtensions = Object.assign({}, window.dashExtensions, {
+ default: {
+ function0: function(feature, latlng, index, context) {
+ // A global reference to the currently displayed polygon
+ if (!context.currentPolygon) {
+ context.currentPolygon = null;
+ }
+
+ // Access all the leaves of the cluster
+ const leaves = index.getLeaves(feature.properties.cluster_id, Infinity); // Retrieve all children
+ const clusterSize = leaves.length;
+
+ // Define a color scale (mimicking Leaflet.markercluster behavior)
+ // Default colors are at https://github.com/Leaflet/Leaflet.markercluster/blob/master/dist/MarkerCluster.Default.css
+ // Because I'm coloring the polygons (instead of using the default blue) most of the default colors look way too faint on the map
+ // So I'm adjusting them here
+ const getColor = function(size) {
+ if (size < 50) return 'rgba(110, 204, 57, 0.6)'; // Small clusters
+ if (size < 200) return 'yellow'; // Medium clusters
+ if (size < 500) return 'orange'; // Larger clusters
+ return 'red'; // Very large clusters
+ };
+
+ // Get the appropriate color for the cluster size
+ const color = getColor(clusterSize);
+
+ // Collect coordinates for the cluster's children
+ let features = [];
+ for (let i = 0; i < leaves.length; ++i) {
+ const coords = leaves[i].geometry.coordinates;
+ const lng = coords[0];
+ const lat = coords[1];
+ features.push(turf.point([lng, lat]));
+ }
+
+ // Create a Turf.js feature collection
+ const fc = turf.featureCollection(features);
+
+ // Compute the convex hull
+ const convexHull = turf.convex(fc);
+
+ // If the convex hull exists, create it as a polygon
+ let polygonLayer = null;
+ if (convexHull) {
+ polygonLayer = L.geoJSON(convexHull, {
+ style: {
+ color: color, // Use the same color as the cluster icon
+ weight: 2, // Border thickness
+ fillOpacity: 0.2, // Polygon fill transparency
+ fillColor: color // Polygon fill color
+ }
+ });
+ }
+
+ // Create a custom marker for the cluster with Leaflet.markercluster font styling
+ const clusterMarker = L.marker(latlng, {
+ icon: L.divIcon({
+ html: `
+
+
+
+ ${feature.properties.point_count_abbreviated}
+
+
+
+
+ ${feature.properties.point_count_abbreviated}
+
+
' + feature.properties.point_count_abbreviated + '
',
+ className: "marker-cluster",
+ iconSize: L.point(40, 40),
+ color: csc(valueMean)
+ });
+
+ const marker = L.marker(latlng, {icon: icon});
+
+ // Create a layer group containing the polygon and the marker
+ const clusterLayer = L.layerGroup([polygonLayer, marker]);
+
+ return clusterLayer;
+}""")
+
+# Create the GeoJSON layer
+geojson = dl.GeoJSON(
+ url="/assets/us-cities.json",
+ cluster=True,
+ zoomToBounds=True,
+ pointToLayer=point_to_layer,
+ onEachFeature=on_each_feature,
+ clusterToLayer=cluster_to_layer,
+ zoomToBoundsOnClick=True,
+ superClusterOptions=dict(radius=150),
+ hideout=dict(
+ colorProp=color_prop,
+ circleOptions=dict(fillOpacity=1, stroke=False, radius=5),
+ min=vmin,
+ max=vmax,
+ colorscale=colorscale
+ )
+)
+
+# Create the app
+app = Dash(external_scripts=[chroma, turf], prevent_initial_callbacks=True)
+app.layout = dl.Map(
+ [dl.TileLayer(), geojson, colorbar],
+ center=[37.0902, -95.7129], # Center of the US
+ zoom=4,
+ style={'height': '100vh'}
+)
+
+if __name__ == '__main__':
+ app.run_server()