@lgv/visualization-map 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lgv/visualization-map",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "description": "ES6 d3.js core visualization scaffold object and utilities for maps.",
   "main": "src/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack build --config webpack.prod.js",
     "coverage": "c8 --reporter=html --reporter=text ava --node-arguments='--experimental-json-modules'",
     "start": "webpack serve --config webpack.dev.js",
-    "startdocker": "webpack serve --config webpack.dev.js --host 0.0.0.0 --public 0.0.0.0",
+    "startdocker": "webpack serve --config webpack.dev.js --host 0.0.0.0 --allowed-hosts all",
     "test": "npx ava --verbose --serial --timeout 1m --node-arguments='--experimental-json-modules'"
   },
   "repository": {
@@ -36,13 +36,14 @@
     "css-loader": "^6.7.2",
     "html-webpack-plugin": "^5.3.2",
     "style-loader": "^3.3.1",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.86.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "@deck.gl/core": "^8.8.20",
     "@deck.gl/layers": "^8.8.20",
-    "@lgv/visualization-chart": "^0.3.6",
+    "@lgv/visualization-chart": "^0.3.21",
     "@msrvida/vega-deck.gl": "^3.3.4",
     "leaflet": "^1.9.2",
     "vega": "^5.22.1"

package/src/configuration.js

@@ -6,7 +6,8 @@ const configuration = {
 };
 
 const configurationColor = {
-    p1: ["#F7BBB5", "#F37765", "#EF4223", "#992B20", "#37150E"]
+    p1: ["#0a86ca", "#0a86ca"],
+    p2: ["#F7BBB5", "#F37765", "#EF4223", "#992B20", "#37150E"]
 };
 
 const configurationLayout = {

package/src/visualization/heatmap.js

@@ -64,7 +64,7 @@ class Heatmap extends VisualizationMap {
                 mark = base - 5;
                 break;
         }
-console.log(mark)
+
         return mark;
 
     }

package/src/visualization/index.js

@@ -22,14 +22,12 @@ class VisualizationMap extends LinearGrid {
         super(data, width, height, MapData, label, name);
 
         // determine type of data object
-        this.isFeatureCollection = this.data.features;
-        this.isPoint = this.data.coordinates && this.data.type.lower() == "point";
-        this.isXY = this.data.metadata && this.data.results;
+        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] : mean([this.data.metadata.bounds[0][1],this.data.metadata.bounds[1][1]]));
+        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] : mean([this.data.metadata.bounds[0][0],this.data.metadata.bounds[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));
 
         // update self
         this.center = [x,y];
@@ -53,14 +51,49 @@ class VisualizationMap extends LinearGrid {
             // process data
             // update data object now that map exists
             this.Data.map = this.map;
-            this.data = this.Data.update;
+            if (this.Data.data) this.data = this.Data.update;
 
             // render overlay
             this.generateChart();
 
+            // broadcast event
+            this.container.dispatch("map-change", {
+                bubbles: true
+            });
+
         });
     }
 
+    /**
+     * Generate main visualization, i.e. everything that sits inside the svg.
+     */
+    determineDataType() {
+        this.isFeatureCollection = this.data && this.Data.source.features;
+        this.isPoint = this.data && this.data.coordinates && this.data.type.lower() == "point";
+        this.isXY = this.data && this.data.metadata && this.data.results;
+    }
+
+    /**
+     * Fit map tightly to data boundary.
+     */
+    fitToData() {
+
+        // determine bounding box
+        let bounds = (this.isFeatureCollection || this.isPoint) ? L.geoJSON(this.Data.source).getBounds() : (this.isXY ? this.data.metadata.bounds : this.map.getBounds());
+
+        // fit to bounds
+        if (this.isFeatureCollection || this.isXY) {
+            // several data points
+            this.map.fitBounds(bounds);
+        } else if (this.isPoint) {
+            // zoom out if only provided single data point
+            this.map.setView(bounds.getCenter(), this.map.getMaxZoom() / 2);
+        } else {
+            // no geo data provided so center world
+            this.map.setView(bounds.getCenter());
+        }
+    }
+
     /**
      * Generate main visualization, i.e. everything that sits inside the svg.
      */
@@ -112,17 +145,8 @@ class VisualizationMap extends LinearGrid {
         // update tile server
         L.tileLayer(this.tileserver).addTo(this.map);
 
-        // determine bounding box
-        let bounds = (this.isFeatureCollection || this.isPoint) ? L.geoJSON(this.Data.source).getBounds() : this.data.metadata.bounds;
-
         // fit to bounds
-        if (this.isFeatureCollection || this.isXY) {
-            // several data points
-            this.map.fitBounds(bounds);
-        } else {
-            // zoom out if only provided single data point
-            this.map.setView(bounds.getCenter(), this.map.getMaxZoom() / 2);
-        }
+        this.fitToData();
 
     }
 
@@ -165,9 +189,15 @@ class VisualizationMap extends LinearGrid {
         this.Data.data = this.Data.update;
         this.data = this.Data.data;
 
+        // determine type of data object
+        this.determineDataType();
+
         // generate visualization
         this.generateChart();
 
+        // fit to bounds
+        this.fitToData();
+
     }
 
 }