gridviz 2.1.17 → 3.0.0

package/src/index.js

@@ -2,65 +2,58 @@
 'use strict'
 
 // the application
-export { App } from './App.js'
-export { GeoCanvas } from './GeoCanvas.js'
-export { Style } from './Style.js'
-export { Layer } from './Layer.js'
-export { Dataset } from './Dataset.js'
-export { DatasetComponent } from './DatasetComponent.js'
+export { Map } from './core/Map.js'
+//export { GeoCanvas } from './GeoCanvas.js'
+export { Style } from './core/Style.js'
+export { Layer } from './core/Layer.js'
+export { MultiResolutionDataset } from './core/MultiResolutionDataset.js'
 
 // export dataset types
 export { TiledGrid } from './dataset/TiledGrid.js'
-export { GridTile } from './dataset/GridTile.js'
 export { CSVGrid } from './dataset/CSVGrid.js'
-export { LGrid } from './dataset/LGrid.js'
-//export { GeoTIFF } from "./dataset/GeoTIFF"
+export { JSGrid } from './dataset/JSGrid.js'
 
 // export styles
 export { ShapeColorSizeStyle } from './style/ShapeColorSizeStyle.js'
-export { ShapeColorSizeStyle_ } from './style/ShapeColorSizeStyle_.js'
 export { StrokeStyle } from './style/StrokeStyle.js'
 export { JoyPlotStyle } from './style/JoyPlotStyle.js'
 export { CompositionStyle } from './style/CompositionStyle.js'
-export { CompositionStyle_ } from './style/CompositionStyle_.js'
 export { SegmentStyle } from './style/SegmentStyle.js'
 export { TextStyle } from './style/TextStyle.js'
 export { PillarStyle } from './style/PillarStyle.js'
 export { SideStyle } from './style/SideStyle.js'
-export { ContourStyle } from './style/ContourStyle.js'
-export { SideCatStyle } from './style/SideCatStyle.js'
+//export { ContourStyle } from './style/ContourStyle.js'
+export { SideCategoryStyle } from './style/SideCategoryStyle.js'
 export { DotDensityStyle } from './style/DotDensityStyle.js'
-export { TanakaStyle } from './style/TanakaStyle.js'
-export { LegoStyle } from './style/LegoStyle.js'
-export { SquareColorWGLStyle } from './style/SquareColorWGLStyle.js'
-export { SquareColorCatWGLStyle } from './style/SquareColorCatWGLStyle.js'
+//export { TanakaStyle } from './style/TanakaStyle.js'
+//export { LegoStyle } from './style/LegoStyle.js'
+export { SquareColorWebGLStyle } from './style/SquareColorWebGLStyle.js'
+export { SquareColorCategoryWebGLStyle } from './style/SquareColorCategoryWebGLStyle.js'
 export { MosaicStyle } from './style/MosaicStyle.js'
 export { NinjaStarStyle } from './style/NinjaStarStyle.js'
 export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
 export { IsoFenceStyle } from './style/IsoFenceStyle.js'
 
 // export additional layers
-export { BackgroundLayer } from './BackgroundLayer.js'
-export { BackgroundLayerWMS } from './BackgroundLayerWMS.js'
-export { LabelLayer } from './LabelLayer.js'
-export { LineLayer as BoundaryLayer } from './LineLayer.js'
+export { GridLayer } from './layer/GridLayer.js'
+export { BackgroundLayer } from './layer/BackgroundLayer.js'
+export { BackgroundLayerWMS } from './layer/BackgroundLayerWMS.js'
+export { LabelLayer } from './layer/LabelLayer.js'
+export { GeoJSONLayer } from './layer/GeoJSONLayer.js'
 
 // export legends
 export { ColorLegend } from './legend/ColorLegend.js'
 export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
 export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
-export { SizeLegend } from './legend/SizeLegend.js'
-export { SegmentWidthLegend } from './legend/SegmentWidthLegend.js'
-export { SegmentOrientationLegend } from './legend/SegmentOrientationLegend.js'
+export { SizeLegend, sizeLegend, sizeLegendViewScale, sizeDiscreteLegend, sizeDiscreteViewScaleLegend } from './legend/SizeLegend.js'
+export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
 
 // export { goToStraight, zoomTo } from "./utils/zoomUtils"
 export * from './utils/stretching.js'
+export * from './utils/scale.js'
+export { nice } from './utils/utils.js'
 
-export { getClass } from './utils/Utils.js'
-
-
-
-import { GeoCanvas } from './GeoCanvas.js'
+import { GeoCanvas } from './core/GeoCanvas.js'
 export const getParameterByName = GeoCanvas.getParameterByName
 
 // set default d3 locale

package/src/{BackgroundLayer.js → layer/BackgroundLayer.js}

@@ -1,6 +1,8 @@
 //@ts-check
 'use strict'
 
+import { Layer } from '../core/Layer.js'
+
 /**
  *
  * A map background layer in "Slippy map" XYZ standard.
@@ -9,29 +11,14 @@
  * 
  * @author Julien Gaffuri
  */
-export class BackgroundLayer {
+export class BackgroundLayer extends Layer {
     /**
      * @param {object} opts
      */
     constructor(opts) {
+        super(opts)
         opts = opts || {}
 
-        /** An attribute to specify if a layer should be drawn or not
-         * @type {boolean} */
-        this.visible = opts.visible == false ? false : true
-
-        /** The minimum zoom factor: Below this level, the layer is not shown.
-         * @type {number} */
-        this.minZoom = opts.minZoom || 0
-
-        /** The maximum zoom factor: Above this level, the layer is not shown.
-         * @type {number} */
-        this.maxZoom = opts.maxZoom || Infinity
-
-        //ensure acceptable values for the zoom limits.
-        if (this.minZoom >= this.maxZoom)
-            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
-
         /** The image cache, indexed by z/y/x */
         this.cache = {}
 
@@ -53,9 +40,6 @@ export class BackgroundLayer {
         this.origin = opts.origin || [0, 0]
         /** @type {number} */
         this.z0 = opts.z0 || 0
-
-        /** @type {function(number):string} */
-        this.filterColor = opts.filterColor // (zf) => "#eee7"
     }
 
     /**
@@ -90,63 +74,61 @@ export class BackgroundLayer {
     }
 
     /**
-     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas The canvas where to draw the layer.
      * @returns {void}
      */
-    draw(cg) {
+    draw(geoCanvas) {
+
         if (!this.resolutions || this.resolutions.length == 0) {
             console.error('No resolutions provided for background layer')
             return
         }
 
         //
-        const zf = cg.getZf()
+        const z = geoCanvas.view.z
         const x0 = this.origin[0],
             y0 = this.origin[1]
 
         //get zoom level and resolution
-        let z = 0
-        for (z = 0; z < this.resolutions.length; z++) if (this.resolutions[z] < zf) break
-        z -= 1
-        z = Math.max(0, z)
-        z = Math.min(z, this.resolutions.length - 1)
+        let z_ = 0
+        for (z_ = 0; z_ < this.resolutions.length; z_++) if (this.resolutions[z_] < z) break
+        z_ -= 1
+        z_ = Math.max(0, z_)
+        z_ = Math.min(z_, this.resolutions.length - 1)
         //console.log(this.resolutions.length, z)
-        const res = this.resolutions[z]
+        const res = this.resolutions[z_]
 
-        z += this.z0
+        z_ += this.z0
 
         const sizeG = this.nbPix * res
-        const size = sizeG / zf
+        const size = sizeG / z
 
         //get tile numbers
         const xGeoToTMS = (x) => Math.ceil((x - x0) / sizeG)
         const yGeoToTMS = (y) => Math.ceil(-(y - y0) / sizeG)
-        const xMin = xGeoToTMS(cg.extGeo.xMin) - 1
-        const xMax = xGeoToTMS(cg.extGeo.xMax)
-        const yMax = yGeoToTMS(cg.extGeo.yMin)
-        const yMin = yGeoToTMS(cg.extGeo.yMax) - 1
-
-        //TODO ?
-        //cg.setCanvasTransform()
+        const xMin = xGeoToTMS(geoCanvas.extGeo.xMin) - 1
+        const xMax = xGeoToTMS(geoCanvas.extGeo.xMax)
+        const yMax = yGeoToTMS(geoCanvas.extGeo.yMin)
+        const yMin = yGeoToTMS(geoCanvas.extGeo.yMax) - 1
 
         //handle images
         for (let x = xMin; x < xMax; x++) {
             for (let y = yMin; y < yMax; y++) {
                 //get image
-                let img = this.get(z, x, y)
+                let img = this.get(z_, x, y)
 
                 //load image
                 if (!img) {
                     const img = new Image()
-                    this.put(img, z, x, y)
+                    this.put(img, z_, x, y)
                     img.onload = () => {
-                        cg.redraw()
+                        geoCanvas.redraw()
                     }
                     img.onerror = () => {
                         //case when no image
-                        this.put('failed', z, x, y)
+                        this.put('failed', z_, x, y)
                     }
-                    img.src = this.urlFun(x, y, z)
+                    img.src = this.urlFun(x, y, z_)
                     continue
                 }
 
@@ -162,7 +144,8 @@ export class BackgroundLayer {
                 const xGeo = x0 + x * sizeG
                 const yGeo = y0 - y * sizeG
                 try {
-                    cg.ctx.drawImage(img, cg.geoToPixX(xGeo), cg.geoToPixY(yGeo), size, size)
+                    geoCanvas.initCanvasTransform()
+                    geoCanvas.ctx.drawImage(img, geoCanvas.geoToPixX(xGeo), geoCanvas.geoToPixY(yGeo), size, size)
                     //cg.ctx.drawImage(img, xGeo, yGeo, sizeG, -sizeG)
                 } catch (error) {
                     console.error(error)
@@ -170,13 +153,5 @@ export class BackgroundLayer {
             }
         }
 
-        //apply filter
-        if (this.filterColor) {
-            const fc = this.filterColor(zf)
-            if (fc && fc != 'none') {
-                cg.ctx.fillStyle = fc
-                cg.ctx.fillRect(0, 0, cg.w, cg.h)
-            }
-        }
     }
 }

package/src/{BackgroundLayerWMS.js → layer/BackgroundLayerWMS.js}

@@ -1,42 +1,26 @@
 //@ts-check
 'use strict'
 
+import { Layer } from '../core/Layer.js'
+
 /**
  *
  * A map WMS background layer.
  * 
  * @author Julien Gaffuri
  */
-export class BackgroundLayerWMS {
+export class BackgroundLayerWMS extends Layer {
     /**
      * @param {object} opts
      */
     constructor(opts) {
+        super(opts)
         opts = opts || {}
 
-        /** An attribute to specify if a layer should be drawn or not
-         * @type {boolean} */
-        this.visible = opts.visible == false ? false : true
-
-        /** The minimum zoom factor: Below this level, the layer is not shown.
-         * @type {number} */
-        this.minZoom = opts.minZoom || 0
-
-        /** The maximum zoom factor: Above this level, the layer is not shown.
-         * @type {number} */
-        this.maxZoom = opts.maxZoom || Infinity
-
-        //ensure acceptable values for the zoom limits.
-        if (this.minZoom >= this.maxZoom)
-            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
-
         /**
          * @type {string} */
         this.url = opts.url
 
-        /** @type {function(number):string} */
-        this.filterColor = opts.filterColor // (zf) => "#eee7"
-
         /** @type {HTMLImageElement|undefined} */
         this.img = undefined;
 
@@ -62,43 +46,44 @@ export class BackgroundLayerWMS {
 
 
     /**
-     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas The canvas where to draw the layer.
      * @returns {void}
      */
-    draw(cg) {
+    draw(geoCanvas) {
 
         //update map extent
-        cg.updateExtentGeo(0)
+        geoCanvas.updateExtentGeo(0)
 
-        if (!this.hasMoved(cg.extGeo) && this.img) {
+        if (!this.hasMoved(geoCanvas.extGeo) && this.img) {
             //the map did not move and the image was already downloaded: draw the image
-            cg.ctx.drawImage(this.img, 0, 0, cg.w, cg.h)
+            geoCanvas.initCanvasTransform()
+            geoCanvas.ctx.drawImage(this.img, 0, 0, geoCanvas.w, geoCanvas.h)
 
         } else {
             //the map moved: retrieve new image
 
             //
-            this.xMin = cg.extGeo.xMin
-            this.xMax = cg.extGeo.xMax
-            this.yMin = cg.extGeo.yMin
-            this.yMax = cg.extGeo.yMax
+            this.xMin = geoCanvas.extGeo.xMin
+            this.xMax = geoCanvas.extGeo.xMax
+            this.yMin = geoCanvas.extGeo.yMin
+            this.yMax = geoCanvas.extGeo.yMax
 
             //build WMS URL
             const url = []
             url.push(this.url)
             url.push("&width=")
-            url.push(cg.w)
+            url.push(geoCanvas.w)
             url.push("&height=")
-            url.push(cg.h)
+            url.push(geoCanvas.h)
             //bbox: xmin ymin xmax ymax
             url.push("&bbox=")
-            url.push(cg.extGeo.xMin)
+            url.push(geoCanvas.extGeo.xMin)
             url.push(",")
-            url.push(cg.extGeo.yMin)
+            url.push(geoCanvas.extGeo.yMin)
             url.push(",")
-            url.push(cg.extGeo.xMax)
+            url.push(geoCanvas.extGeo.xMax)
             url.push(",")
-            url.push(cg.extGeo.yMax)
+            url.push(geoCanvas.extGeo.yMax)
 
             const urlS = url.join("")
             //console.log(urlS)
@@ -106,7 +91,7 @@ export class BackgroundLayerWMS {
             if (!this.img) {
                 this.img = new Image()
                 this.img.onload = () => {
-                    cg.redraw()
+                    geoCanvas.redraw()
                 }
                 this.img.onerror = () => {
                     //case when no image
@@ -118,14 +103,5 @@ export class BackgroundLayerWMS {
             this.img.src = urlS
         }
 
-        //apply filter
-        const zf = cg.getZf()
-        if (this.filterColor) {
-            const fc = this.filterColor(zf)
-            if (fc && fc != 'none') {
-                cg.ctx.fillStyle = fc
-                cg.ctx.fillRect(0, 0, cg.w, cg.h)
-            }
-        }
     }
 }

package/src/{LineLayer.js → layer/GeoJSONLayer.js}

@@ -1,16 +1,18 @@
 //@ts-check
 'use strict'
 
+import { Layer } from '../core/Layer.js'
 import { json } from 'd3-fetch'
 
 /**
  * @author Joseph Davies, Julien Gaffuri
  */
-export class LineLayer {
+export class GeoJSONLayer extends Layer {
     /**
      * @param {object} opts
      */
     constructor(opts) {
+        super(opts)
         opts = opts || {}
 
         /**
@@ -29,15 +31,15 @@ export class LineLayer {
         /**
          * @private
          * @type {function(object,number):string} */
-        this.color = opts.color || ((f, zf) => 'gray')
+        this.color = opts.color || ((f, z) => 'gray')
         /**
          * @private
          * @type {function(object,number):number} */
-        this.width = opts.width || ((f, zf) => 2)
+        this.width = opts.width || ((f, z) => 2)
         /**
          * @private
          * @type {function(object,number):Array.<number>|undefined} */
-        this.lineDash = opts.lineDash || ((f, zf) => undefined)
+        this.lineDash = opts.lineDash || ((f, z) => undefined)
 
         /**
          * @private
@@ -52,51 +54,48 @@ export class LineLayer {
 
     /**
      * Draw the layer.
-     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
      * @returns {void}
      */
-    draw(cg) {
+    draw(geoCanvas) {
         //load data, if not done yet.
         if (!this.fs) {
-            this.load(cg.redraw)
+            this.load(geoCanvas.redraw)
             return
         }
 
         //TODO sort lines by width ?
 
-        //zoom factor
-        const zf = cg.getZf()
-
-        //draw in geo coordinates
-        cg.setCanvasTransform()
+        //
+        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, zf)
+            const col = this.color(f, z)
             if (!col || col == 'none') continue
-            cg.ctx.strokeStyle = col
+            geoCanvas.ctx.strokeStyle = col
 
             //set linewidth
-            const wP = this.width(f, zf)
+            const wP = this.width(f, z)
             if (!wP || wP < 0) continue
-            cg.ctx.lineWidth = wP * zf
+            geoCanvas.ctx.lineWidth = wP * z
 
             //set line dash
-            const ldP = this.lineDash(f, zf)
-            if (ldP) cg.ctx.setLineDash(ldP)
+            const ldP = this.lineDash(f, z)
+            if (ldP) geoCanvas.ctx.setLineDash(ldP)
 
             //draw line
-            cg.ctx.beginPath()
-            cg.ctx.moveTo(cs[0][0], cs[0][1])
-            for (let i = 1; i < cs.length; i++) cg.ctx.lineTo(cs[i][0], cs[i][1])
-            cg.ctx.stroke()
+            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()
         }
 
         //...
-        cg.ctx.setLineDash([])
+        geoCanvas.ctx.setLineDash([])
     }
 
     /**

package/src/layer/GridLayer.js

@@ -0,0 +1,140 @@
+//@ts-check
+'use strict'
+
+import { Layer } from '../core/Layer.js'
+
+/**
+ * A layer, which specifies a dataset to be shown with specified styles.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class GridLayer extends Layer {
+    /**
+     * @param {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} dataset The dataset to show.
+     * @param {Array.<import("../core/Style").Style>} styles The styles, ordered in drawing order.
+     * @param {{visible?:function(number):boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minPixelsPerCell?:number,cellInfoHTML?:function(import("../core/Dataset").Cell):string}} opts
+     */
+    constructor(dataset, styles, opts = {}) {
+        super(opts)
+        opts = opts || {}
+
+        /** @type {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} */
+        this.dataset = dataset
+        /** @type {Array.<import("../core/Style").Style>} */
+        this.styles = styles
+
+        /** 
+         * This parameter is used when the dataset is a MultiResolutionDataset.
+         * It defines the minimum number of pixels a grid cell should have to select the dataset to display based on its resolution.
+         * A low value, means that the map will be more detailled (smaller cells).
+         * A high value, means that the map will be less detailled (larger cells).
+         * This value should be higher than 1, otherwise it means a grid cell is smaller than the screen resolution.
+         * For more complex cell representations that require some more map space, this value should be higher.
+         * @type {number} */
+        this.minPixelsPerCell = opts.minPixelsPerCell || 3
+
+        /**
+         * The function returning cell information as HTML.
+         * This is typically used for tooltip information.
+         * @type {function(import("../core/Dataset").Cell, number):string} */
+        this.cellInfoHTML = opts.cellInfoHTML || GridLayer.defaultCellInfoHTML
+    }
+
+    /** */
+    draw(geoCanvas, legend) {
+
+        //get zoom level
+        const z = geoCanvas.view.z
+
+        //get layer dataset component
+        /** @type {import('../core/Dataset.js').Dataset|undefined} */
+        const dsc = this.getDataset(z)
+        if (!dsc) return
+
+        //launch data download, if necessary
+        dsc.getData(geoCanvas.extGeo)
+
+        //update dataset view cache
+        dsc.updateViewCache(geoCanvas.extGeo)
+
+        //draw cells, style by style
+        for (const s of this.styles) {
+
+            //check if style is visible
+            if (s.visible && !s.visible(z)) continue
+
+            //set style alpha and blend mode
+            //TODO: multiply by layer alpha ?
+            geoCanvas.ctx.globalAlpha = s.alpha ? s.alpha(z) : 1.0
+            geoCanvas.ctx.globalCompositeOperation = s.blendOperation(z)
+
+            //set affin transform to draw with geographical coordinates
+            geoCanvas.setCanvasTransform()
+
+            //draw with style
+            s.draw(dsc.getViewCache(), geoCanvas, dsc.getResolution())
+
+            //draw style filter
+            if (s.filterColor)
+                s.drawFilter(geoCanvas)
+        }
+
+        //add legend element
+        if (legend) {
+            for (const s of this.styles) {
+                //check if style is visible
+                if (s.visible && !s.visible(z)) continue
+                for (const lg of s.legends) {
+                    //console.log(s, lg)
+                    //this.legend.append(lg.div)
+                    //s1.node().appendChild(s2.node())
+                    legend.node().append(lg.div.node())
+                }
+
+                //case for styles of styles, like kernel smoothing
+                //TODO do better
+                if (s['styles']) {
+                    for (const s2 of s['styles']) {
+                        if (s2.visible && !s2.visible(z)) continue
+                        for (const lg of s2.legends) {
+                            //console.log(s, lg)
+                            //this.legend.append(lg.div)
+                            //s1.node().appendChild(s2.node())
+                            legend.node().append(lg.div.node())
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+
+
+
+    /**
+     * Return the relevant dataset component for a specified zoom.
+     *
+     * @param {number} z
+     * @returns {import("../core/Dataset").Dataset|undefined}
+     * */
+    getDataset(z) {
+        return this.dataset.getDataset(z, this.minPixelsPerCell);
+    }
+
+    /**
+     * The default function returning cell information as HTML.
+     * This is typically used for tooltip information.
+     *
+     * @param {import("../core/Dataset").Cell} cell
+     * @returns {string}
+     */
+    static defaultCellInfoHTML(cell) {
+        const buf = []
+        for (const key of Object.keys(cell)) {
+            if (key === 'x') continue
+            if (key === 'y') continue
+            buf.push('<b>', key, '</b>', ' : ', cell[key], '<br>')
+        }
+        return buf.join('')
+    }
+}