gridviz 3.0.15 → 3.0.17

package/src/index.js

@@ -1,71 +1,77 @@
-//@ts-check
-'use strict'
-
-// the application
-export { Map } from './core/Map.js'
-export { GeoCanvas } from './core/GeoCanvas.js'
-export { Style } from './core/Style.js'
-export { Layer } from './core/Layer.js'
-export { Dataset } from './core/Dataset.js'
-export { MultiResolutionDataset } from './core/MultiResolutionDataset.js'
-
-// export dataset types
-export { TiledGrid } from './dataset/TiledGrid.js'
-export { CSVGrid } from './dataset/CSVGrid.js'
-export { JSGrid } from './dataset/JSGrid.js'
-
-// export styles
-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 { 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 { SideCategoryStyle } from './style/SideCategoryStyle.js'
-export { DotDensityStyle } from './style/DotDensityStyle.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 { ImageStyle } from './style/ImageStyle.js'
-
-// export additional layers
-export { GridLayer } from './layer/GridLayer.js'
-export { BackgroundLayer } from './layer/BackgroundLayer.js'
-export { BackgroundLayerWMS } from './layer/BackgroundLayerWMS.js'
-export { BackgroundLayerImage } from './layer/BackgroundLayerImage.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, sizeLegend, sizeLegendViewScale, sizeDiscreteLegend, sizeDiscreteViewScaleLegend } from './legend/SizeLegend.js'
-export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
-export { TernaryLegend } from './legend/TernaryLegend.js'
-
-// export { goToStraight, zoomTo } from "./utils/zoomUtils"
-export * from './utils/stretching.js'
-export * from './utils/scale.js'
-export * from './utils/ternary.js'
-export { nice } from './utils/utils.js'
-
-import { GeoCanvas } from './core/GeoCanvas.js'
-export const getParameterByName = GeoCanvas.getParameterByName
-
-// set default d3 locale
-import { formatDefaultLocale } from 'd3-format'
-formatDefaultLocale({
-    decimal: '.',
-    thousands: ' ',
-    grouping: [3],
-    currency: ['', '€'],
-})
+//@ts-check
+'use strict'
+
+// the application
+export { Map } from './core/Map.js'
+export { GeoCanvas } from './core/GeoCanvas.js'
+export { Style } from './core/Style.js'
+export { Layer } from './core/Layer.js'
+export { Dataset } from './core/Dataset.js'
+export { MultiResolutionDataset } from './core/MultiResolutionDataset.js'
+
+// export dataset types
+export { TiledGrid } from './dataset/TiledGrid.js'
+export { CSVGrid } from './dataset/CSVGrid.js'
+export { JSGrid } from './dataset/JSGrid.js'
+
+// export styles
+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 { 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 { SideCategoryStyle } from './style/SideCategoryStyle.js'
+export { DotDensityStyle } from './style/DotDensityStyle.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 { ImageStyle } from './style/ImageStyle.js'
+
+// export additional layers
+export { GridLayer } from './layer/GridLayer.js'
+export { BackgroundLayer } from './layer/BackgroundLayer.js'
+export { BackgroundLayerWMS } from './layer/BackgroundLayerWMS.js'
+export { BackgroundLayerImage } from './layer/BackgroundLayerImage.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,
+    sizeLegend,
+    sizeLegendViewScale,
+    sizeDiscreteLegend,
+    sizeDiscreteViewScaleLegend,
+} from './legend/SizeLegend.js'
+export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
+export { TernaryLegend } from './legend/TernaryLegend.js'
+
+// export { goToStraight, zoomTo } from "./utils/zoomUtils"
+export * from './utils/stretching.js'
+export * from './utils/scale.js'
+export * from './utils/ternary.js'
+export { nice } from './utils/utils.js'
+
+import { GeoCanvas } from './core/GeoCanvas.js'
+export const getParameterByName = GeoCanvas.getParameterByName
+
+// set default d3 locale
+import { formatDefaultLocale } from 'd3-format'
+formatDefaultLocale({
+    decimal: '.',
+    thousands: ' ',
+    grouping: [3],
+    currency: ['', '€'],
+})

package/src/layer/BackgroundLayer.js

@@ -1,158 +1,162 @@
-//@ts-check
-'use strict'
-
-import { Layer } from '../core/Layer.js'
-
-/**
- *
- * A map background layer in "Slippy map" XYZ standard.
- * See https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
- * https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/#6/27.88/44.48
- * 
- * @module layer
- * @author Julien Gaffuri
- */
-export class BackgroundLayer extends Layer {
-    /**
-     * @param {object} opts
-     */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** The image cache, indexed by z/y/x */
-        this.cache = {}
-
-        /**
-         * @type {string} */
-        this.url = opts.url
-        /** @type {function(number,number,number):string} */
-        this.urlFun = opts.urlFun || ((x, y, z) => this.url + z + '/' + x + '/' + y + '.png')
-
-        /** @type {Array.<number>} */
-        this.resolutions = opts.resolutions
-        if (!this.resolutions || this.resolutions.length == 0)
-            throw new Error('No resolutions provided for background layer')
-
-        /** @type {number} */
-        this.nbPix = opts.nbPix || 256
-        /** CRS coordinates of top left corner
-         * @type {Array.<number>} */
-        this.origin = opts.origin || [0, 0]
-        /** @type {number} */
-        this.z0 = opts.z0 || 0
-    }
-
-    /**
-     * Get z/x/y cache data.
-     * @param {number} z
-     * @param {number} x
-     * @param {number} y
-     * @returns {HTMLImageElement|string|undefined}
-     * @private
-     */
-    get(z, x, y) {
-        let d = this.cache[z]
-        if (!d) return
-        d = d[x]
-        if (!d) return
-        return d[y]
-    }
-
-    /**
-     * Get z/x/y cache data.
-     * @param {HTMLImageElement|string} img
-     * @param {number} z
-     * @param {number} x
-     * @param {number} y
-     * @returns
-     * @private
-     */
-    put(img, z, x, y) {
-        if (!this.cache[z]) this.cache[z] = {}
-        if (!this.cache[z][x]) this.cache[z][x] = {}
-        this.cache[z][x][y] = img
-    }
-
-    /**
-     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas The canvas where to draw the layer.
-     * @returns {void}
-     */
-    draw(geoCanvas) {
-
-        if (!this.resolutions || this.resolutions.length == 0) {
-            console.error('No resolutions provided for background layer')
-            return
-        }
-
-        //
-        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_] < 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_]
-
-        z_ += this.z0
-
-        const sizeG = this.nbPix * res
-        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(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)
-
-                //load image
-                if (!img) {
-                    const img = new Image()
-                    this.put(img, z_, x, y)
-                    img.onload = () => {
-                        geoCanvas.redraw()
-                    }
-                    img.onerror = () => {
-                        //case when no image
-                        this.put('failed', z_, x, y)
-                    }
-                    img.src = this.urlFun(x, y, z_)
-                    continue
-                }
-
-                //case when no image
-                if (img === 'failed') continue
-                if (!(img instanceof HTMLImageElement)) {
-                    console.log(img)
-                    continue
-                }
-                if (img.width == 0 || img.height == 0) continue
-
-                //draw image
-                const xGeo = x0 + x * sizeG
-                const yGeo = y0 - y * sizeG
-                try {
-                    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)
-                }
-            }
-        }
-
-    }
-}
+//@ts-check
+'use strict'
+
+import { Layer } from '../core/Layer.js'
+
+/**
+ *
+ * A map background layer in "Slippy map" XYZ standard.
+ * See https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
+ * https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/#6/27.88/44.48
+ *
+ * @module layer
+ * @author Julien Gaffuri
+ */
+export class BackgroundLayer extends Layer {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The image cache, indexed by z/y/x */
+        this.cache = {}
+
+        /**
+         * @type {string} */
+        this.url = opts.url
+        /** @type {function(number,number,number):string} */
+        this.urlFun = opts.urlFun || ((x, y, z) => this.url + z + '/' + x + '/' + y + '.png')
+
+        /** @type {Array.<number>} */
+        this.resolutions = opts.resolutions
+        if (!this.resolutions || this.resolutions.length == 0)
+            throw new Error('No resolutions provided for background layer')
+
+        /** @type {number} */
+        this.nbPix = opts.nbPix || 256
+        /** CRS coordinates of top left corner
+         * @type {Array.<number>} */
+        this.origin = opts.origin || [0, 0]
+        /** @type {number} */
+        this.z0 = opts.z0 || 0
+    }
+
+    /**
+     * Get z/x/y cache data.
+     * @param {number} z
+     * @param {number} x
+     * @param {number} y
+     * @returns {HTMLImageElement|string|undefined}
+     * @private
+     */
+    get(z, x, y) {
+        let d = this.cache[z]
+        if (!d) return
+        d = d[x]
+        if (!d) return
+        return d[y]
+    }
+
+    /**
+     * Get z/x/y cache data.
+     * @param {HTMLImageElement|string} img
+     * @param {number} z
+     * @param {number} x
+     * @param {number} y
+     * @returns
+     * @private
+     */
+    put(img, z, x, y) {
+        if (!this.cache[z]) this.cache[z] = {}
+        if (!this.cache[z][x]) this.cache[z][x] = {}
+        this.cache[z][x][y] = img
+    }
+
+    /**
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas The canvas where to draw the layer.
+     * @returns {void}
+     */
+    draw(geoCanvas) {
+        if (!this.resolutions || this.resolutions.length == 0) {
+            console.error('No resolutions provided for background layer')
+            return
+        }
+
+        //
+        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_] < 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_]
+
+        z_ += this.z0
+
+        const sizeG = this.nbPix * res
+        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(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)
+
+                //load image
+                if (!img) {
+                    const img = new Image()
+                    this.put(img, z_, x, y)
+                    img.onload = () => {
+                        geoCanvas.redraw()
+                    }
+                    img.onerror = () => {
+                        //case when no image
+                        this.put('failed', z_, x, y)
+                    }
+                    img.src = this.urlFun(x, y, z_)
+                    continue
+                }
+
+                //case when no image
+                if (img === 'failed') continue
+                if (!(img instanceof HTMLImageElement)) {
+                    console.log(img)
+                    continue
+                }
+                if (img.width == 0 || img.height == 0) continue
+
+                //draw image
+                const xGeo = x0 + x * sizeG
+                const yGeo = y0 - y * sizeG
+                try {
+                    geoCanvas.initCanvasTransform()
+                    geoCanvas.offscreenCtx.drawImage(
+                        img,
+                        geoCanvas.geoToPixX(xGeo),
+                        geoCanvas.geoToPixY(yGeo),
+                        size,
+                        size
+                    )
+                    //cg.ctx.drawImage(img, xGeo, yGeo, sizeG, -sizeG)
+                } catch (error) {
+                    console.error(error)
+                }
+            }
+        }
+    }
+}

package/src/layer/BackgroundLayerImage.js

@@ -1,84 +1,81 @@
-//@ts-check
-'use strict'
-
-import { Layer } from '../core/Layer.js'
-
-/**
- *
- * A map background layer composed of a single image file, geolocated.
- * 
- * @module layer
- * @author Julien Gaffuri
- */
-export class BackgroundLayerImage extends Layer {
-    /**
-     * @param {object} opts
-     */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** The image file URL
-         * @type {string} */
-        this.url = opts.url
-
-        /** The image left coordinate
-         * @type {number} */
-        this.xMin = opts.xMin || 0;
-        /** The image top coordinate
-         *  @type {number} */
-        this.yMax = opts.yMax || 0;
-
-        /** The image width, in geo unit
-         * @type {number} */
-        this.width = opts.width || 20000
-        /** The image height, in geo unit
-         * @type {number} */
-        this.height = opts.height || 20000
-
-        /** The image object
-         * @type {HTMLImageElement|undefined} */
-        this.img = undefined;
-    }
-
-    /**
-     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
-     * @returns {void}
-     */
-    draw(geoCanvas) {
-
-        //update map extent
-        //geoCanvas.updateExtentGeo(0)
-
-        if (this.img) {
-            //the image was already downloaded: draw it
-
-            //compute screen coordinates and size ratio
-            const x = geoCanvas.geoToPixX(this.xMin)
-            const y = geoCanvas.geoToPixY(this.yMax)
-            const z = geoCanvas.getView().z
-
-            //draw image
-            geoCanvas.initCanvasTransform()
-            geoCanvas.ctx.drawImage(this.img, x, y, this.width / z, this.height / z)
-
-        } else {
-            //retrieve image
-
-            if (!this.img) {
-                this.img = new Image()
-                this.img.onload = () => {
-                    geoCanvas.redraw()
-                }
-                this.img.onerror = () => {
-                    //case when no image
-                    console.warn("Could not retrieve background image from", this.url)
-                }
-            }
-
-            //set URL to launch the download
-            this.img.src = this.url
-        }
-
-    }
-}
+//@ts-check
+'use strict'
+
+import { Layer } from '../core/Layer.js'
+
+/**
+ *
+ * A map background layer composed of a single image file, geolocated.
+ *
+ * @module layer
+ * @author Julien Gaffuri
+ */
+export class BackgroundLayerImage extends Layer {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The image file URL
+         * @type {string} */
+        this.url = opts.url
+
+        /** The image left coordinate
+         * @type {number} */
+        this.xMin = opts.xMin || 0
+        /** The image top coordinate
+         *  @type {number} */
+        this.yMax = opts.yMax || 0
+
+        /** The image width, in geo unit
+         * @type {number} */
+        this.width = opts.width || 20000
+        /** The image height, in geo unit
+         * @type {number} */
+        this.height = opts.height || 20000
+
+        /** The image object
+         * @type {HTMLImageElement|undefined} */
+        this.img = undefined
+    }
+
+    /**
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
+     * @returns {void}
+     */
+    draw(geoCanvas) {
+        //update map extent
+        //geoCanvas.updateExtentGeo(0)
+
+        if (this.img) {
+            //the image was already downloaded: draw it
+
+            //compute screen coordinates and size ratio
+            const x = geoCanvas.geoToPixX(this.xMin)
+            const y = geoCanvas.geoToPixY(this.yMax)
+            const z = geoCanvas.getView().z
+
+            //draw image
+            geoCanvas.initCanvasTransform()
+            geoCanvas.offscreenCtx.drawImage(this.img, x, y, this.width / z, this.height / z)
+        } else {
+            //retrieve image
+
+            if (!this.img) {
+                this.img = new Image()
+                this.img.onload = () => {
+                    geoCanvas.redraw()
+                }
+                this.img.onerror = () => {
+                    //case when no image
+                    console.warn('Could not retrieve background image from', this.url)
+                }
+            }
+
+            //set URL to launch the download
+            this.img.src = this.url
+        }
+    }
+}