gridviz 3.0.10 → 3.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.10",
+    "version": "3.0.12",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/index.js

@@ -56,8 +56,9 @@ export { TrivariateLegend } from './legend/TrivariateLegend.js'
 export * from './utils/stretching.js'
 export * from './utils/scale.js'
 export * from './utils/trivariate.js'
-export * from './utils/chernoff.js'
-export { nice, loadImage } from './utils/utils.js'
+//export * from './utils/chernoff.js'
+export { nice } from './utils/utils.js'
+//loadImage
 
 import { GeoCanvas } from './core/GeoCanvas.js'
 export const getParameterByName = GeoCanvas.getParameterByName

package/src/layer/GeoJSONLayer.js

@@ -29,11 +29,40 @@ export class GeoJSONLayer extends Layer {
          * @type {function(object):boolean} */
         this.preprocess = opts.preprocess
 
+        //for points
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.shape = opts.shape || ((f, z) => 'circle')
+        /**
+         * In pixel
+         * @private
+         * @type {function(object,number):number} */
+        this.size = opts.size || ((f, z) => 10)
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.strokeStyle = opts.strokeStyle || ((f, z) => 'red')
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.fillStyle = opts.fillStyle || ((f, z) => 'black')
+        /**
+         * In pixel
+         * @private
+         * @type {function(object,number):number} */
+        this.lineWidth = opts.lineWidth || ((f, z) => 2)
+
+
+
+        //for lines
+
         /**
          * @private
          * @type {function(object,number):string} */
         this.color = opts.color || ((f, z) => 'gray')
         /**
+         * In pixel
          * @private
          * @type {function(object,number):number} */
         this.width = opts.width || ((f, z) => 2)
@@ -42,6 +71,7 @@ export class GeoJSONLayer extends Layer {
          * @type {function(object,number):Array.<number>|undefined} */
         this.lineDash = opts.lineDash || ((f, z) => undefined)
 
+
         /**
          * @private
          * @type {Array.<object> | undefined} */
@@ -53,6 +83,7 @@ export class GeoJSONLayer extends Layer {
         this.loadingStatus = 'notLoaded'
     }
 
+
     /**
      * Draw the layer.
      * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
@@ -65,34 +96,73 @@ export class GeoJSONLayer extends Layer {
             return
         }
 
-        //TODO sort lines by width ?
-
         //
         const z = geoCanvas.view.z
 
         for (const f of this.fs) {
-            const cs = f.geometry.coordinates
-            if (cs.length < 2) continue
-
-            //set color
-            const col = this.color(f, z)
-            if (!col || col == 'none') continue
-            geoCanvas.ctx.strokeStyle = col
-
-            //set linewidth
-            const wP = this.width(f, z)
-            if (!wP || wP < 0) continue
-            geoCanvas.ctx.lineWidth = wP * z
-
-            //set line dash
-            const ldP = this.lineDash(f, z)
-            if (ldP) geoCanvas.ctx.setLineDash(ldP)
-
-            //draw line
-            geoCanvas.ctx.beginPath()
-            geoCanvas.ctx.moveTo(cs[0][0], cs[0][1])
-            for (let i = 1; i < cs.length; i++) geoCanvas.ctx.lineTo(cs[i][0], cs[i][1])
-            geoCanvas.ctx.stroke()
+            const gt = f.geometry.type
+
+            if (gt == "Point") {
+                const c = f.geometry.coordinates
+
+                //get style parameters for the point feature
+                const shape = this.shape(f,z)
+                if(!shape || shape=="none") continue
+                const size = this.size(f,z) * z
+                if(!size) continue
+                const strokeStyle = this.strokeStyle(f,z)
+                const fillStyle = this.fillStyle(f,z)
+                const lineWidth = this.lineWidth(f,z) * z
+
+                //set canvas drawing parameters
+                if(strokeStyle) geoCanvas.ctx.strokeStyle = strokeStyle
+                if(fillStyle) geoCanvas.ctx.fillStyle = fillStyle
+                if(lineWidth) geoCanvas.ctx.lineWidth = lineWidth
+
+                if (shape == "circle") {
+                    //draw circle - fill and stroke
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.arc(c[0], c[1], size / 2, 0, 2 * Math.PI, false)
+                    if(fillStyle) geoCanvas.ctx.fill()
+                    if(strokeStyle && lineWidth) geoCanvas.ctx.stroke()
+                } else if (shape == "square") {
+                    //draw square - fill and stroke
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.rect(c[0] - size / 2, c[1] - size / 2, size, size)
+                    if(fillStyle) geoCanvas.ctx.fill()
+                    if(strokeStyle && lineWidth) geoCanvas.ctx.stroke()
+                } else {
+                    console.error("Unexpected shape for point geojson: " + shape)
+                }
+
+            } else if (gt == "LineString") {
+
+                const cs = f.geometry.coordinates
+                if (cs.length < 2) continue
+
+                //set color
+                const col = this.color(f, z)
+                if (!col || col == 'none') continue
+                geoCanvas.ctx.strokeStyle = col
+
+                //set linewidth
+                const wP = this.width(f, z)
+                if (!wP || wP < 0) continue
+                geoCanvas.ctx.lineWidth = wP * z
+
+                //set line dash
+                const ldP = this.lineDash(f, z)
+                if (ldP) geoCanvas.ctx.setLineDash(ldP)
+
+                //draw line
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(cs[0][0], cs[0][1])
+                for (let i = 1; i < cs.length; i++) geoCanvas.ctx.lineTo(cs[i][0], cs[i][1])
+                geoCanvas.ctx.stroke()
+            } else {
+                console.log("Unsupported geometry type in GeoJSONLayer: " + gt)
+            }
+
         }
 
         //...

package/src/style/ImageStyle.js

@@ -1,7 +1,9 @@
 //@ts-check
 'use strict'
 
+import { map } from 'd3-array'
 import { Style } from '../core/Style.js'
+import { loadImage } from '../utils/utils.js'
 
 /**
  * @module style
@@ -14,17 +16,19 @@ export class ImageStyle extends Style {
         super(opts)
         opts = opts || {}
 
-        /** A function returning the image code of a cell.
+        /** A function returning the image URL of a cell.
          * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
-        this.imageCode = opts.imageCode || (() => '') //(c,r,z,vs) => {}
-
-        /** The dictionnary code -> image
-         *  @type {object}        */
-        this.images = opts.images || {}
+        this.image = opts.image || (() => '') //(c,r,z,vs) => {}
 
         /** The image size in ground meters
          *  @type {function(import('../core/Dataset.js').Cell, number, number, object):number}        */
         this.size = opts.size || ((cell, resolution) => resolution)
+
+        /** Dictionnary of preloaded images. url -> image
+         * @private
+         * @type {object} */
+        this.cache = {}
+
     }
 
     /**
@@ -33,7 +37,7 @@ export class ImageStyle extends Style {
      * @param {number} resolution
      * @override
      */
-    draw(cells, geoCanvas, resolution) {
+    async draw(cells, geoCanvas, resolution) {
 
         //
         const z = geoCanvas.view.z,
@@ -48,28 +52,47 @@ export class ImageStyle extends Style {
         //
         for (let cell of cells) {
 
-            //get cell image code
-            const code = this.imageCode(cell, resolution, z, viewScale)
-
-            //get image
-            const image = this.images[code]
-            if (!image) continue
+            //get cell image url
+            const url = this.image(cell, resolution, z, viewScale)
+            if (!url) continue
 
             //size and position values
             let sizePix = this.size(cell, resolution, z, viewScale) / z
             if (!sizePix) continue
-            const d = (resolutionPix - sizePix) / 2
-
-            try {
-                geoCanvas.ctx.drawImage(image, geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d -resolutionPix, sizePix, sizePix)
-
-                /*/red color filter
-                geoCanvas.ctx.globalCompositeOperation = 'source-in';
-                geoCanvas.ctx.fillStyle = 'red';
-                geoCanvas.ctx.fillRect(geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d, sizePix, sizePix);
-                geoCanvas.ctx.globalCompositeOperation = 'source-over';*/
-            } catch (error) {
-                console.error(error)
+
+            //get image from cache
+            const image = this.cache[url]
+
+            //loading, keep waiting
+            if (image == "loading") return;
+
+            //no image: load it
+            else if (!image) {
+                //tag as loading
+                this.cache[url] = "loading"
+
+                //define image
+                const img = new Image()
+                img.onload = () => {
+                    //store image data in cache and redraw
+                    this.cache[url] = img
+                    geoCanvas.redraw()
+                }
+                img.onerror = () => {
+                    //case when no image
+                    console.warn("Could not retrieve image from", url)
+                }
+                //set URL to launch the download
+                img.src = url
+
+            } else {
+                //draw image
+                const d = (resolutionPix - sizePix) / 2
+                try {
+                    geoCanvas.ctx.drawImage(image, geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d - resolutionPix, sizePix, sizePix)
+                } catch (error) {
+                    console.error(error)
+                }
             }
 
         }