gridviz 2.1.12 → 2.1.13

package/src/LabelLayer.js

@@ -1,190 +1,190 @@
-//@ts-check
-'use strict'
-
-import { csv } from 'd3-fetch'
-
-/** A label. The name is the text to show. (x,y) are the coordinates in the same CRS as the grid.
- * @typedef {{name: string, x:number, y:number }} Label */
-
-/**
- * A (generic) layer for placename labels, to be shown on top of the grid layers.
- * The input is a CSV file with the position (x, y) of the labels and name + some other info on the label importance.
- * If the label data is not in the expected format or in the same CRS as the grid, it can be corrected with the "preprocess" function.
- * The selection of the label, their style (font, weight, etc.) and color can be specified depending on their importance and the zoom level.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class LabelLayer {
-    /**
-     * @param {object} opts
-     */
-    constructor(opts) {
-        opts = opts || {}
-
-        /**
-         * The URL of the label data, as CSV file.
-         * The file should contain the information for each label such as the text, the position and other information for the display of the label according to the zoom level.
-         * If necessary, this data can be reformated with the 'preprocess' parameter.
-         * @private
-         * @type {string} */
-        this.url = opts.url
-
-        /** Specify if and how a label should be drawn, depending on its importance and the zoom level.
-         * @private
-         * @type {function(Label,number):string} */
-        this.style = opts.style || (() => 'bold 1em Arial')
-
-        /** Specify the label color, depending on its importance and the zoom level.
-         * @private
-         * @type {function(Label,number):string} */
-        this.color = opts.color || (opts.dark ? () => '#ddd' : () => '#222')
-
-        /** Specify the label halo color, depending on its importance and the zoom level.
-         * @private
-         * @type {function(Label,number):string} */
-        this.haloColor = opts.haloColor || (opts.dark ? () => '#000000BB' : () => '#FFFFFFBB')
-
-        /** Specify the label halo width, depending on its importance and the zoom level.
-         * @private
-         * @type {function(Label,number):number} */
-        this.haloWidth = opts.haloWidth || (() => 4)
-
-        /** The anchor where to draw the text, from label position. See HTML-canvas textAlign property.
-         * "left" || "right" || "center" || "start" || "end"
-         * @private
-         * @type {CanvasTextAlign} */
-        this.textAlign = opts.textAlign || 'start'
-
-        /**
-         * @private
-         * @type {Array.<number>} */
-        this.offsetPix = opts.offsetPix || [5, 5]
-
-        /**
-         * A preprocess to run on each label after loading.
-         * It can be used to apply some specific treatment before, format the label data, project coordinates, etc.
-         * Return false if the label should not be kept.
-         * @private
-         * @type {function(Label):boolean} */
-        this.preprocess = opts.preprocess
-
-        /**
-         * @private
-         * @type {Array.<Label> | undefined} */
-        this.labels = undefined
-
-        /**
-         * @private
-         * @type {string} */
-        this.loadingStatus = 'notLoaded'
-    }
-
-    /**
-     * Draw the label layer.
-     *
-     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
-     * @returns {void}
-     */
-    draw(cg) {
-        //load labels, if not done yet.
-        if (!this.labels) {
-            this.load(cg.redraw)
-            return
-        }
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        //text align
-        cg.ctx.textAlign = this.textAlign || 'start'
-
-        //line join and cap
-        cg.ctx.lineJoin = 'bevel' //|| "round" || "miter";
-        cg.ctx.lineCap = 'butt' //|| "round" || "square";
-
-        //draw in pix coordinates
-        cg.initCanvasTransform()
-
-        //draw labels, one by one
-        for (const lb of this.labels) {
-            //get label style
-            const st = this.style(lb, zf)
-            if (!st) continue
-            cg.ctx.font = st
-
-            //check label within the view, to be drawn
-            if (!cg.toDraw(lb)) continue
-
-            //position
-            const xP = cg.geoToPixX(lb.x) + this.offsetPix[0]
-            const yP = cg.geoToPixY(lb.y) - this.offsetPix[1]
-
-            //label stroke, for the halo
-            if (this.haloColor && this.haloWidth) {
-                const hc = this.haloColor(lb, zf)
-                const hw = this.haloWidth(lb, zf)
-                if (hc && hw && hw > 0) {
-                    cg.ctx.strokeStyle = hc
-                    cg.ctx.lineWidth = hw
-                    cg.ctx.strokeText(lb.name, xP, yP)
-                }
-            }
-
-            //label fill
-            if (this.color) {
-                const col = this.color(lb, zf)
-                if (col) {
-                    cg.ctx.fillStyle = col
-                    cg.ctx.fillText(lb.name, xP, yP)
-                }
-            }
-        }
-    }
-
-    /**
-     * Load data for labels, from URL this.url
-     * @param {function():void} callback
-     * @private
-     */
-    async load(callback) {
-        if (!this.url) {
-            console.log('Failed loading labels: No URL specified. ' + this.url)
-            this.loadingStatus = 'failed'
-            this.labels = []
-            return
-        }
-
-        //check if data already loaded
-        if (this.loadingStatus != 'notLoaded') return
-
-        //load data
-        this.loadingStatus = 'loading'
-
-        try {
-            /** @type { Array.<Label> } */
-            const data = await csv(this.url)
-
-            //preprocess/filter
-            if (this.preprocess) {
-                this.labels = []
-                for (const c of data) {
-                    const b = this.preprocess(c)
-                    if (b == false) continue
-                    this.labels.push(c)
-                }
-            } else {
-                //store labels
-                this.labels = data
-            }
-
-            this.loadingStatus = 'loaded'
-
-            //redraw
-            if (callback) callback()
-        } catch (error) {
-            console.log('Failed loading labels from ' + this.url)
-            this.labels = []
-            this.loadingStatus = 'failed'
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { csv } from 'd3-fetch'
+
+/** A label. The name is the text to show. (x,y) are the coordinates in the same CRS as the grid.
+ * @typedef {{name: string, x:number, y:number }} Label */
+
+/**
+ * A (generic) layer for placename labels, to be shown on top of the grid layers.
+ * The input is a CSV file with the position (x, y) of the labels and name + some other info on the label importance.
+ * If the label data is not in the expected format or in the same CRS as the grid, it can be corrected with the "preprocess" function.
+ * The selection of the label, their style (font, weight, etc.) and color can be specified depending on their importance and the zoom level.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class LabelLayer {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /**
+         * The URL of the label data, as CSV file.
+         * The file should contain the information for each label such as the text, the position and other information for the display of the label according to the zoom level.
+         * If necessary, this data can be reformated with the 'preprocess' parameter.
+         * @private
+         * @type {string} */
+        this.url = opts.url
+
+        /** Specify if and how a label should be drawn, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):string} */
+        this.style = opts.style || (() => 'bold 1em Arial')
+
+        /** Specify the label color, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):string} */
+        this.color = opts.color || (opts.dark ? () => '#ddd' : () => '#222')
+
+        /** Specify the label halo color, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):string} */
+        this.haloColor = opts.haloColor || (opts.dark ? () => '#000000BB' : () => '#FFFFFFBB')
+
+        /** Specify the label halo width, depending on its importance and the zoom level.
+         * @private
+         * @type {function(Label,number):number} */
+        this.haloWidth = opts.haloWidth || (() => 4)
+
+        /** The anchor where to draw the text, from label position. See HTML-canvas textAlign property.
+         * "left" || "right" || "center" || "start" || "end"
+         * @private
+         * @type {CanvasTextAlign} */
+        this.textAlign = opts.textAlign || 'start'
+
+        /**
+         * @private
+         * @type {Array.<number>} */
+        this.offsetPix = opts.offsetPix || [5, 5]
+
+        /**
+         * A preprocess to run on each label after loading.
+         * It can be used to apply some specific treatment before, format the label data, project coordinates, etc.
+         * Return false if the label should not be kept.
+         * @private
+         * @type {function(Label):boolean} */
+        this.preprocess = opts.preprocess
+
+        /**
+         * @private
+         * @type {Array.<Label> | undefined} */
+        this.labels = undefined
+
+        /**
+         * @private
+         * @type {string} */
+        this.loadingStatus = 'notLoaded'
+    }
+
+    /**
+     * Draw the label layer.
+     *
+     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @returns {void}
+     */
+    draw(cg) {
+        //load labels, if not done yet.
+        if (!this.labels) {
+            this.load(cg.redraw)
+            return
+        }
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //text align
+        cg.ctx.textAlign = this.textAlign || 'start'
+
+        //line join and cap
+        cg.ctx.lineJoin = 'bevel' //|| "round" || "miter";
+        cg.ctx.lineCap = 'butt' //|| "round" || "square";
+
+        //draw in pix coordinates
+        cg.initCanvasTransform()
+
+        //draw labels, one by one
+        for (const lb of this.labels) {
+            //get label style
+            const st = this.style(lb, zf)
+            if (!st) continue
+            cg.ctx.font = st
+
+            //check label within the view, to be drawn
+            if (!cg.toDraw(lb)) continue
+
+            //position
+            const xP = cg.geoToPixX(lb.x) + this.offsetPix[0]
+            const yP = cg.geoToPixY(lb.y) - this.offsetPix[1]
+
+            //label stroke, for the halo
+            if (this.haloColor && this.haloWidth) {
+                const hc = this.haloColor(lb, zf)
+                const hw = this.haloWidth(lb, zf)
+                if (hc && hw && hw > 0) {
+                    cg.ctx.strokeStyle = hc
+                    cg.ctx.lineWidth = hw
+                    cg.ctx.strokeText(lb.name, xP, yP)
+                }
+            }
+
+            //label fill
+            if (this.color) {
+                const col = this.color(lb, zf)
+                if (col) {
+                    cg.ctx.fillStyle = col
+                    cg.ctx.fillText(lb.name, xP, yP)
+                }
+            }
+        }
+    }
+
+    /**
+     * Load data for labels, from URL this.url
+     * @param {function():void} callback
+     * @private
+     */
+    async load(callback) {
+        if (!this.url) {
+            console.log('Failed loading labels: No URL specified. ' + this.url)
+            this.loadingStatus = 'failed'
+            this.labels = []
+            return
+        }
+
+        //check if data already loaded
+        if (this.loadingStatus != 'notLoaded') return
+
+        //load data
+        this.loadingStatus = 'loading'
+
+        try {
+            /** @type { Array.<Label> } */
+            const data = await csv(this.url)
+
+            //preprocess/filter
+            if (this.preprocess) {
+                this.labels = []
+                for (const c of data) {
+                    const b = this.preprocess(c)
+                    if (b == false) continue
+                    this.labels.push(c)
+                }
+            } else {
+                //store labels
+                this.labels = data
+            }
+
+            this.loadingStatus = 'loaded'
+
+            //redraw
+            if (callback) callback()
+        } catch (error) {
+            console.log('Failed loading labels from ' + this.url)
+            this.labels = []
+            this.loadingStatus = 'failed'
+        }
+    }
+}

package/src/Layer.js

@@ -1,103 +1,103 @@
-//@ts-check
-'use strict'
-
-/**
- * A layer, which specifies a dataset to be shown with specified styles.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Layer {
-    /**
-     * @param {import("./Dataset").Dataset} dataset The multi resolution dataset to show.
-     * @param {Array.<import("./Style").Style>} styles The styles, ordered in drawing order.
-     * @param {{visible?:boolean,alpha?:number,blendOperation?:GlobalCompositeOperation,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
-     *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
-     */
-    constructor(dataset, styles, opts = {}) {
-        opts = opts || {}
-
-        /** @type {import("./Dataset").Dataset} */
-        this.dataset = dataset
-        /** @type {Array.<import("./Style").Style>} */
-        this.styles = styles
-
-        /** An attribute to specify if a layer should be drawn or not
-         * @type {boolean} */
-        this.visible = opts.visible === false ? false : true
-
-        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
-         *  The function parameter is the zoom factor.
-         * (see CanvasRenderingContext2D: globalAlpha property)
-         * @type {function(number):number|undefined} */
-        this.alpha = opts.alpha
-
-        /** A function returning the blend operation. The function parameter is the zoom factor.
-         * (see CanvasRenderingContext2D: globalCompositeOperation property)
-         * @type {GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || (zf => "source-over")
-
-        /** 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.')
-
-        /** Unit: number of pixels
-         * @type {number} */
-        this.pixNb = opts.pixNb || 3
-
-        /**
-         * The function returning cell information as HTML.
-         * This is typically used for tooltip information.
-         * @type {function(import("./Dataset").Cell, number):string} */
-        this.cellInfoHTML = opts.cellInfoHTML || Layer.defaultCellInfoHTML
-    }
-
-    /**
-     * Return the relevant dataset component for a specified zoom factor.
-     *
-     * @param {number} zf
-     * @returns {import("./DatasetComponent").DatasetComponent|undefined}
-     * */
-    getDatasetComponent(zf) {
-        if (zf < this.minZoom || zf > this.maxZoom) return
-
-        //special case whith single component dataset
-        if (this.dataset.datasetComponents.length == 1) return this.dataset.datasetComponents[0]
-
-        const rs = this.dataset.resolutions
-        let i = 0
-        let z = rs[i] / this.pixNb
-        while (z < zf && i < rs.length) {
-            i++
-            z = rs[i] / this.pixNb
-        }
-        //if (i == 0) return this.dataset.datasetComponents[0];
-        //return this.dataset.datasetComponents[i - 1];
-        if (i == rs.length) return this.dataset.datasetComponents[rs.length - 1]
-        return this.dataset.datasetComponents[i]
-    }
-
-    /**
-     * The default function returning cell information as HTML.
-     * This is typically used for tooltip information.
-     *
-     * @param {import("./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('')
-    }
-}
+//@ts-check
+'use strict'
+
+/**
+ * A layer, which specifies a dataset to be shown with specified styles.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Layer {
+    /**
+     * @param {import("./Dataset").Dataset} dataset The multi resolution dataset to show.
+     * @param {Array.<import("./Style").Style>} styles The styles, ordered in drawing order.
+     * @param {{visible?:boolean,alpha?:number,blendOperation?:GlobalCompositeOperation,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
+     *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
+     */
+    constructor(dataset, styles, opts = {}) {
+        opts = opts || {}
+
+        /** @type {import("./Dataset").Dataset} */
+        this.dataset = dataset
+        /** @type {Array.<import("./Style").Style>} */
+        this.styles = styles
+
+        /** An attribute to specify if a layer should be drawn or not
+         * @type {boolean} */
+        this.visible = opts.visible === false ? false : true
+
+        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
+         *  The function parameter is the zoom factor.
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {function(number):number|undefined} */
+        this.alpha = opts.alpha
+
+        /** A function returning the blend operation. The function parameter is the zoom factor.
+         * (see CanvasRenderingContext2D: globalCompositeOperation property)
+         * @type {GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || (zf => "source-over")
+
+        /** 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.')
+
+        /** Unit: number of pixels
+         * @type {number} */
+        this.pixNb = opts.pixNb || 3
+
+        /**
+         * The function returning cell information as HTML.
+         * This is typically used for tooltip information.
+         * @type {function(import("./Dataset").Cell, number):string} */
+        this.cellInfoHTML = opts.cellInfoHTML || Layer.defaultCellInfoHTML
+    }
+
+    /**
+     * Return the relevant dataset component for a specified zoom factor.
+     *
+     * @param {number} zf
+     * @returns {import("./DatasetComponent").DatasetComponent|undefined}
+     * */
+    getDatasetComponent(zf) {
+        if (zf < this.minZoom || zf > this.maxZoom) return
+
+        //special case whith single component dataset
+        if (this.dataset.datasetComponents.length == 1) return this.dataset.datasetComponents[0]
+
+        const rs = this.dataset.resolutions
+        let i = 0
+        let z = rs[i] / this.pixNb
+        while (z < zf && i < rs.length) {
+            i++
+            z = rs[i] / this.pixNb
+        }
+        //if (i == 0) return this.dataset.datasetComponents[0];
+        //return this.dataset.datasetComponents[i - 1];
+        if (i == rs.length) return this.dataset.datasetComponents[rs.length - 1]
+        return this.dataset.datasetComponents[i]
+    }
+
+    /**
+     * The default function returning cell information as HTML.
+     * This is typically used for tooltip information.
+     *
+     * @param {import("./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('')
+    }
+}