@lgv/visualization-map 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lgv/visualization-map",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "description": "ES6 d3.js core visualization scaffold object and utilities for maps.",
   "main": "src/index.js",
@@ -34,6 +34,7 @@
     "browser-env": "^3.3.0",
     "c8": "^7.11.3",
     "css-loader": "^6.7.2",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "style-loader": "^3.3.1",
     "webpack": "^5.86.0",
@@ -43,9 +44,10 @@
   "dependencies": {
     "@deck.gl/core": "^8.8.20",
     "@deck.gl/layers": "^8.8.20",
-    "@lgv/visualization-chart": "^0.3.21",
+    "@lgv/visualization-chart": "^0.3.26",
     "@msrvida/vega-deck.gl": "^3.3.4",
     "leaflet": "^1.9.2",
+    "leaflet.markercluster": "^1.5.3",
     "vega": "^5.22.1"
   },
   "ava": {

package/src/index.js

@@ -1,8 +1,11 @@
 import { HeatLayout } from "./layout/heat.js";
+import { MapLayout } from "./layout/map.js";
 
 import { MapData } from "./structure/index.js";
 
+import { Clustermap } from "./visualization/cluster.js";
 import { Heatmap } from "./visualization/heatmap.js";
+import { Routemap } from "./visualization/route.js";
 import { VisualizationMap } from "./visualization/index.js";
 
-export { HeatLayout, Heatmap, MapData, VisualizationMap };
+export { Clustermap, HeatLayout, Heatmap, MapData, MapLayout, Routemap, VisualizationMap };

package/src/layout/heat.js

@@ -1,22 +1,19 @@
 import L from "leaflet";
 
-import { MapData } from "../structure/index.js";
+import { MapLayout } from "./map.js";
 
 /**
  * HeatLayout is a data-bound layout abstraction for a heatmap.
  * @param {array} data - geojson
  * @param {class} map - Leaflet map object
  */
-class HeatLayout extends MapData {
+class HeatLayout extends MapLayout {
 
     constructor(data, map) {
 
         // initialize inheritance
         super(data);
 
-        // update self
-        this.map = map;
-
     }
 
     /**

package/src/layout/map.js

@@ -0,0 +1,23 @@
+import { MapData } from "../structure/index.js";
+
+/**
+ * MapLayout is a data-bound layout abstraction for a leaflet map.
+ * @param {array} data - geojson
+ * @param {class} map - Leaflet map object
+ */
+class MapLayout extends MapData {
+
+    constructor(data, map) {
+
+        // initialize inheritance
+        super(data);
+
+        // update self
+        this.map = map;
+
+    }
+
+}
+
+export { MapLayout };
+export default MapLayout;

package/src/visualization/cluster.js

@@ -0,0 +1,63 @@
+import L from "leaflet";
+import MarkerClusterGroup from "leaflet.markercluster";
+import defaultIcon from "leaflet/dist/images/marker-icon.png";
+
+import { VisualizationMap } from "./index.js";
+import { MapLayout as ML } from "../layout/map.js";
+
+import { configuration, configurationLayout } from "../configuration.js";
+
+/**
+ * Clustermap is a map abstraction for a clustered visualization.
+ * @param {object} data - usually array; occasionally object
+ * @param {string} label - identifer for chart brand
+ * @param {float} height - specified height of chart
+ * @param {object} markerIcon - Leaflet object
+ * @param {class} MapData - lgv data class
+ * @param {string} name - name of chart
+ * @param {float} width - specified width of chart
+ */
+class Clustermap extends VisualizationMap {
+
+    constructor(data, width=configurationLayout.width, height=configurationLayout.height, MapLayout=null, markerIcon=L.icon({iconUrl: defaultIcon}), tileServerUrl=configurationLayout.tileserver, label=configuration.branding, name=configuration.name) {
+
+        // initialize inheritance
+        super(data, width, height, MapLayout ? MapLayout : new ML(data), tileServerUrl, label, name);
+
+        // set default icon
+        L.Marker.prototype.setIcon(markerIcon);
+
+        // initialize marker group
+        this.markerClusterGroup = L.markerClusterGroup();
+
+    }
+
+    /**
+     * Generate main visualization, i.e. everything that sits inside the map.
+     */
+    generateChart() {     
+        
+        // check if marker group exists
+        if (!this.map.hasLayer(this.markerClusterGroup)) {
+
+            // add popup info to marker
+            let geoJsonLayer = L.geoJson(this.data, {
+                onEachFeature: function (feature, layer) {
+                    layer.bindPopup(`<div><div id="popup-poster"><div data-id="${feature.properties.id}" style="background-image: url(${feature.properties.poster})"></div></div><div><p><strong>${feature.properties.label}</strong></p><p>${feature.properties.value}</p></div>`);
+			    }
+		    });
+
+            // add markers to group
+		    this.markerClusterGroup.addLayer(geoJsonLayer);
+
+            // add marker layer to map
+            this.map.addLayer(this.markerClusterGroup);
+
+        }
+
+    }
+
+}
+
+export { Clustermap };
+export default Clustermap;

package/src/visualization/index.js

@@ -1,7 +1,9 @@
-import { degreeToRadian, LinearGrid, radianToDegree } from "@lgv/visualization-chart";
+import { LinearGrid } from "@lgv/visualization-chart";
 import { mean } from "d3-array";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
+import "leaflet/dist/images/marker-shadow.png";
+import "./marker-cluster.css";
 
 import { configuration, configurationLayout } from "../configuration.js";
 
@@ -25,10 +27,9 @@ class VisualizationMap extends LinearGrid {
         this.determineDataType();
 
         // determine x/y center
-        let x = this.isFeatureCollection ? mean(this.data.features, d => d.geometry.coordinates[1]) : (this.isPoint ? this.data.coordinates[1] : (this.isXY ?  mean([this.data.metadata.bounds[0][1],this.data.metadata.bounds[1][1]]) : 0));
-
-        let y = this.isFeatureCollection ? mean(this.data.features, d => d.geometry.coordinates[0]) : (this.isPoint ? this.data.coordinates[0] : (this.isXY ?  mean([this.data.metadata.bounds[0][0],this.data.metadata.bounds[1][0]]) : 0));
-
+        let x = this.isFeatureCollection ? mean(this.data.features, d => typeof(d.geometry.coordinates[0]) == "object" ? mean(d.geometry.coordinates.map(x => x[1]).flat()) : d.geometry.coordinates[1]) : (this.isPoint ? this.data.coordinates[1] : (this.isXY ?  mean([this.data.metadata.bounds[0][1],this.data.metadata.bounds[1][1]]) : 0));
+        let y = this.isFeatureCollection ? mean(this.data.features, d => typeof(d.geometry.coordinates[0]) == "object" ? mean(d.geometry.coordinates.map(x => x[0]).flat()) : d.geometry.coordinates[0]) : (this.isPoint ? this.data.coordinates[0] : (this.isXY ?  mean([this.data.metadata.bounds[0][0],this.data.metadata.bounds[1][0]]) : 0));
+        
         // update self
         this.center = [x,y];
         this.map = null;
@@ -68,7 +69,7 @@ class VisualizationMap extends LinearGrid {
      * Generate main visualization, i.e. everything that sits inside the svg.
      */
     determineDataType() {
-        this.isFeatureCollection = this.data && this.Data.source.features;
+        this.isFeatureCollection = this.data !== (null || undefined) && this.Data.source.features !== (null || undefined);
         this.isPoint = this.data && this.data.coordinates && this.data.type.lower() == "point";
         this.isXY = this.data && this.data.metadata && this.data.results;
     }

package/src/visualization/marker-cluster.css

@@ -0,0 +1,108 @@
+:root {
+
+    --marker-cluster-small: rgba(181, 226, 140, 0.6);
+    --marker-cluster-small-div: rgba(110, 204, 57, 0.6);
+    --marker-cluster-medium: rgba(241, 211, 87, 0.6);
+    --marker-cluster-medium-div: rgba(240, 194, 12, 0.6);
+    --marker-cluster-large: rgba(253, 156, 115, 0.6);
+    --marker-cluster-large-div: rgba(241, 128, 23, 0.6);
+
+}
+
+.marker-cluster-small {
+	background-color: var(--marker-cluster-small);
+	}
+.marker-cluster-small div {
+	background-color: var(--marker-cluster-small-div);
+	}
+
+.marker-cluster-medium {
+	background-color: var(--marker-cluster-medium);
+	}
+.marker-cluster-medium div {
+	background-color: var(--marker-cluster-medium-div);
+	}
+
+.marker-cluster-large {
+	background-color: var(--marker-cluster-large);
+	}
+.marker-cluster-large div {
+	background-color: var(--marker-cluster-large-div);
+	}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 2.5em;
+	}
+.marker-cluster div {
+	width: 2.5em;
+	height: 2.5em;
+	text-align: center;
+	border-radius: 2.5em;
+    display: flex;
+    align-items: center;
+    justify-content:center;
+    margin-left: 0.45em;
+    margin-top: 0.45em;
+	}
+
+/***************** POP UP *****************/
+
+.cluster-map .leaflet-popup-content {
+
+	margin-bottom: 0;
+	margin-left: 0;
+	margin-top: 0;
+
+}
+
+/* wrap */
+.cluster-map .leaflet-popup-content > div {
+
+	display: flex;
+
+}
+
+/* poster parent */
+.cluster-map .leaflet-popup-content > div > div:first-of-type {
+	
+	height: 100%;
+	overflow: hidden;
+
+}
+
+/* poster */
+.cluster-map .leaflet-popup-content > div > div:first-of-type > div {
+
+	background-position: center; 
+	background-repeat: no-repeat; 
+	background-size: cover;
+	cursor: pointer;
+	height: 5em;
+	margin-right: 1em;
+	transition: .3s cubic-bezier(.25,.8,.25,1);
+  	transition-property: transform;
+	width: 5em;
+
+}
+
+.cluster-map .leaflet-popup-content > div > div:first-of-type:hover > div,
+.cluster-map .leaflet-popup-content > div > div:first-of-type:focus > div {
+
+  transform: scale(1.1);
+
+}
+
+/* text wrap */
+.cluster-map .leaflet-popup-content > div > div:last-of-type {
+
+	margin-top: 1em;
+
+}
+
+/* text */
+.cluster-map .leaflet-popup-content p {
+
+	margin: 0;
+
+}

package/src/visualization/route.js

@@ -0,0 +1,43 @@
+import { select, Selection } from "d3-selection";
+//import { transition, Transition } from "d3-transition";
+import transition from "d3-transition";
+import "d3-transition";
+import L from "leaflet";
+
+import { VisualizationMap } from "./index.js";
+import { MapLayout as ML } from "../layout/map.js";
+
+import { configuration, configurationLayout } from "../configuration.js";
+
+/**
+ * Routemap is a map abstraction for a routing visualization.
+ * @param {object} data - usually array; occasionally object
+ * @param {string} label - identifer for chart brand
+ * @param {float} height - specified height of chart
+ * @param {class} MapData - lgv data class
+ * @param {string} name - name of chart
+ * @param {float} width - specified width of chart
+ */
+class Routemap extends VisualizationMap {
+
+    constructor(data, width=configurationLayout.width, height=configurationLayout.height, MapLayout=null, tileServerUrl=configurationLayout.tileserver, label=configuration.branding, name=configuration.name) {
+
+        // initialize inheritance
+        super(data, width, height, MapLayout ? MapLayout : new ML(data), tileServerUrl, label, name);
+
+    }
+
+    /**
+     * Generate main visualization, i.e. everything that sits inside the map.
+     */
+    generateChart() {
+
+        // add lines
+        L.geoJSON(this.data).addTo(this.map);
+
+    }
+
+}
+
+export { Routemap };
+export default Routemap;

package/webpack.common.js

@@ -33,6 +33,14 @@ const commonConfig = {
             {
                 test: /\.css$/i,
                 use: ["style-loader", "css-loader"]
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: [
+                    {
+                        loader: 'file-loader',
+                    }
+                ]
             }
         ]
     }