[Proof of principle] Photos heat map

package.json

@@ -41,6 +41,7 @@
     "justified-layout": "^4.1.0",
     "leaflet": "^1.9.4",
     "leaflet-edgebuffer": "^1.0.6",
+    "leaflet.heat": "^0.2.0",
     "luxon": "^3.3.0",
     "path-posix": "^1.0.0",
     "photoswipe": "^5.3.8",

src/components/top-matter/MapSplitMatter.vue

@@ -30,13 +30,24 @@
           </div>
         </LIcon>
       </LMarker>
+      <LHeatMap v-if="points.length >= 50"
+        ref="heatMap"
+        :initial-points="points"
+        :options="{
+          // minOpacity: null,
+          maxZoom: 16,
+          radius: 50,
+          blur: 30,
+          gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' },
+        }" />
     </LMap>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { LMap, LTileLayer, LMarker, LPopup, LIcon } from 'vue2-leaflet';
+import LHeatMap from './map/LHeatMap.vue';
 import { latLngBounds, Icon } from 'leaflet';
 import { IPhoto } from '../../types';
 
@@ -73,6 +84,7 @@ Icon.Default.mergeOptions({
 export default defineComponent({
   name: 'MapSplitMatter',
   components: {
+    LHeatMap,
     LMap,
     LTileLayer,
     LMarker,
@@ -88,6 +100,7 @@ export default defineComponent({
       maxBoundsViscosity: 0.9,
     },
     clusters: [] as IMarkerCluster[],
+    points: [],
     animMarkers: false,
   }),
 
@@ -137,6 +150,7 @@ export default defineComponent({
         if (!reinit) {
           this.setBoundsFromQuery();
         }
+        await this.fetchPoints();
         return await this.fetchClusters();
       }
 
@@ -245,6 +259,34 @@ export default defineComponent({
       this.animateMarkers();
     },
 
+    async fetchPoints() {
+      const zoom = "18";
+      let minLat = -90;
+      let  maxLat = 90;
+      let minLon = -180;
+      let maxLon = 180;
+
+      // Extend bounds by 25% beyond the map
+      const latDiff = Math.abs(maxLat - minLat);
+      const lonDiff = Math.abs(maxLon - minLon);
+      minLat -= latDiff * 0.25;
+      maxLat += latDiff * 0.25;
+      minLon -= lonDiff * 0.25;
+      maxLon += lonDiff * 0.25;
+
+      // Get bounds with expanded margins
+      const bounds = this.boundsToStr({ minLat, maxLat, minLon, maxLon });
+
+      // Make API call
+      const url = API.Q(API.MAP_CLUSTERS(), { bounds, zoom });
+
+      // Params have changed, quit
+      const res = await axios.get(url);
+      this.points = res.data.map((c) => {
+        return [c.center[0], c.center[1], 1]
+      });
+    },
+
     boundsFromQuery() {
       const bounds = (this.$route.query.b as string).split(',');
       return {

src/components/top-matter/map/LHeatMap.vue

@@ -0,0 +1,84 @@
+
+<template>
+	<div style="display: none;">
+		<slot v-if="ready" />
+	</div>
+</template>
+
+<script>
+import 'leaflet.heat/dist/leaflet-heat.js'
+import { findRealParent, propsBinder } from 'vue2-leaflet'
+import { DomEvent } from 'leaflet'
+
+const props = {
+	initialPoints: {
+		type: Array,
+		required: false,
+		default() { return [] },
+	},
+	options: {
+		type: Object,
+		default() { return {} },
+	},
+}
+
+export default {
+	props,
+	data() {
+		return {
+			points: null,
+			ready: false,
+		}
+	},
+	watch: {
+		options: {
+			handler(newOptions) {
+				this.mapObject.setOptions(newOptions)
+			},
+			deep: true,
+		},
+		points: {
+			handler(newPoints) {
+				this.mapObject.setLatLngs(newPoints)
+			},
+			deep: true,
+		},
+	},
+	mounted() {
+		this.points = this.initialPoints
+		this.mapObject = L.heatLayer(this.points, this.options)
+		DomEvent.on(this.mapObject, this.$listeners)
+		propsBinder(this, this.mapObject, props)
+		this.ready = true
+		this.parentContainer = findRealParent(this.$parent)
+		this.parentContainer.addLayer(this)
+		this.$nextTick(() => {
+			this.$emit('ready', this.mapObject)
+		})
+	},
+	beforeDestroy() {
+		this.parentContainer.removeLayer(this)
+	},
+	methods: {
+		addLayer(layer, alreadyAdded) {
+			if (!alreadyAdded) {
+				this.mapObject.addLayer(layer.mapObject)
+			}
+		},
+		removeLayer(layer, alreadyRemoved) {
+			if (!alreadyRemoved) {
+				this.mapObject.removeLayer(layer.mapObject)
+			}
+		},
+		addLatLng(latlng) {
+			this.mapObject.addLatLng(latlng)
+		},
+		setLatLngs(latlngs) {
+			this.mapObject.setLatLngs(latlngs)
+		},
+		redraw() {
+			this.mapObject.redraw()
+		},
+	},
+}
+</script>