@basemaps/landing 6.27.0

package/build/components/debug.js

@@ -0,0 +1,309 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { GoogleTms } from '@basemaps/geo';
+import { Component, Fragment } from 'preact';
+import { Config } from '../config.js';
+import { MapConfig } from '../config.map.js';
+import { projectGeoJson } from '../tile.matrix.js';
+import { WindowUrl } from '../url.js';
+function debugSlider(label, onInput) {
+    return (_jsx("input", { className: "debug__slider", type: "range", min: "0", max: "1", step: "0.05", value: String(Config.map.debug[`debug.layer.${label}`]), onInput: onInput }));
+}
+export class Debug extends Component {
+    constructor() {
+        super(...arguments);
+        this.waitForMap = () => {
+            const map = this.props.map;
+            if (map == null) {
+                setTimeout(this.waitForMap, 20);
+                return;
+            }
+            window.MaplibreMap = map;
+            map.resize();
+            map.once('load', () => {
+                Config.map.on('change', () => {
+                    if (this.props.map == null)
+                        return;
+                    const locationHash = WindowUrl.toHash(Config.map.getLocation(this.props.map));
+                    const locationSearch = '?' + MapConfig.toUrl(Config.map);
+                    window.history.replaceState(null, '', locationSearch + locationHash);
+                    this.updateFromConfig();
+                });
+                this.updateFromConfig();
+                // Jam a div into the page once the map has loaded so tools like playwright can see the map has finished loading
+                if (Config.map.debug['debug.screenshot']) {
+                    const loadedDiv = document.createElement('div');
+                    loadedDiv.id = 'map-loaded';
+                    document.body.appendChild(loadedDiv);
+                }
+            });
+        };
+        /** Show the source bounding box ont he map */
+        this.toggleSource = (e) => {
+            const target = e.target;
+            Config.map.setDebug('debug.source', target.checked);
+            this.setSourceShown(target.checked);
+        };
+        this._layerLoading = new Map();
+        this._styleJson = null;
+        this.adjustTopographic = (e) => {
+            const slider = e.target;
+            Config.map.setDebug('debug.layer.linz-topographic', Number(slider.value));
+        };
+        this.adjustOsm = (e) => {
+            Config.map.setDebug('debug.layer.osm', Number(e.target.value));
+        };
+        this.adjustLinzAerial = (e) => {
+            Config.map.setDebug('debug.layer.linz-aerial', Number(e.target.value));
+        };
+        this.togglePurple = (e) => {
+            const target = e.target;
+            this.setPurple(target.checked);
+        };
+    }
+    componentDidMount() {
+        this.waitForMap();
+    }
+    updateFromConfig() {
+        this.setPurple(Config.map.debug['debug.background'] === 'magenta');
+        this.adjustRaster('osm', Config.map.debug['debug.layer.osm']);
+        this.adjustRaster('linz-aerial', Config.map.debug['debug.layer.linz-aerial']);
+        this.adjustVector(Config.map.debug['debug.layer.linz-topographic']);
+        this.setSourceShown(Config.map.debug['debug.source']);
+    }
+    render() {
+        if (Config.map.debug['debug.screenshot'])
+            return null;
+        return (_jsxs("div", { className: "debug", children: [_jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "ImageId" }), _jsx("div", { className: "debug__value", children: Config.map.layerId })] }), _jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "Projection " }), _jsx("div", { className: "debug__value", children: Config.map.tileMatrix.projection.toEpsgString() })] }), _jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "TileMatrix " }), _jsx("div", { className: "debug__value", children: Config.map.tileMatrix.identifier })] }), this.renderSliders(), this.renderPurple(), this.renderSourceToggle()] }));
+    }
+    renderPurple() {
+        if (Config.map.debug['debug.screenshot'])
+            return;
+        return (_jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "Purple" }), _jsx("input", { type: "checkbox", onClick: this.togglePurple, checked: Config.map.debug['debug.background'] === 'magenta' })] }));
+    }
+    renderSourceToggle() {
+        // TODO this is a nasty hack to detect if a direct imageryId is being viewed
+        if (!Config.map.layerId.startsWith('01'))
+            return null;
+        return (_jsxs(Fragment, { children: [_jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "Source" }), _jsx("input", { type: "checkbox", onClick: this.toggleSource, checked: Config.map.debug['debug.source'] })] }), this.state.lastFeatureId == null ? null : (_jsxs("div", { className: "debug__info", title: String(this.state.lastFeatureName), children: [_jsx("label", { className: "debug__label", children: "SourceId" }), String(this.state.lastFeatureName).split('/').pop()] }))] }));
+    }
+    trackMouseMove(layerId) {
+        const sourceId = `${layerId}_source`;
+        const layerFillId = `${sourceId}_fill`;
+        const map = this.props.map;
+        let lastFeatureId;
+        map.on('mousemove', layerFillId, (e) => {
+            var _a;
+            const features = e.features;
+            if (features == null || features.length === 0)
+                return;
+            const firstFeature = features[0];
+            if (firstFeature.id === lastFeatureId)
+                return;
+            if (lastFeatureId != null)
+                map.setFeatureState({ source: sourceId, id: lastFeatureId }, { hover: false });
+            lastFeatureId = firstFeature.id;
+            this.setState({ ...this.state, lastFeatureId, lastFeatureName: (_a = firstFeature.properties) === null || _a === void 0 ? void 0 : _a['name'] });
+            map.setFeatureState({ source: sourceId, id: lastFeatureId }, { hover: true });
+        });
+        map.on('mouseleave', layerFillId, () => {
+            if (lastFeatureId == null)
+                return;
+            map.setFeatureState({ source: sourceId, id: lastFeatureId }, { hover: false });
+            lastFeatureId = undefined;
+            this.setState({ ...this.state, lastFeatureId, lastFeatureName: undefined });
+        });
+    }
+    setSourceShown(isShown) {
+        const map = this.props.map;
+        const layerId = Config.map.layerId;
+        const sourceId = `${layerId}_source`;
+        const layerFillId = `${sourceId}_fill`;
+        const layerLineId = `${sourceId}_line`;
+        if (isShown === false) {
+            if (map.getLayer(layerFillId) == null)
+                return;
+            map.removeLayer(layerFillId);
+            map.removeLayer(layerLineId);
+            return;
+        }
+        if (map.getLayer(layerFillId) != null)
+            return;
+        this.loadSourceLayer(layerId).then(() => {
+            if (map.getLayer(layerFillId) != null)
+                return;
+            // Fill is needed to make the mouse move work even though it has opacity 0
+            map.addLayer({
+                id: layerFillId,
+                type: 'fill',
+                source: sourceId,
+                paint: {
+                    'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.25, 0],
+                    'fill-color': '#ff00ff',
+                },
+            });
+            map.addLayer({
+                id: layerLineId,
+                type: 'line',
+                source: sourceId,
+                paint: {
+                    'line-color': '#ff00ff',
+                    'line-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5],
+                    'line-width': ['case', ['boolean', ['feature-state', 'hover'], false], 2, 1],
+                },
+            });
+            this.trackMouseMove(layerId);
+        });
+    }
+    loadSourceLayer(layerId) {
+        let existing = this._layerLoading.get(layerId);
+        if (existing == null) {
+            existing = this._loadSourceLayer(layerId);
+            this._layerLoading.set(layerId, existing);
+        }
+        return existing;
+    }
+    async _loadSourceLayer(layerId) {
+        const map = this.props.map;
+        const sourceId = `${layerId}_source`;
+        const layerFillId = `${sourceId}_fill`;
+        if (map.getLayer(layerFillId) != null)
+            return;
+        const sourceUri = WindowUrl.toImageryUrl(`im_${layerId}`, 'source.geojson');
+        const res = await fetch(sourceUri);
+        if (!res.ok)
+            return;
+        const data = await res.json();
+        if (Config.map.tileMatrix.projection !== GoogleTms.projection)
+            projectGeoJson(data, Config.map.tileMatrix);
+        let id = 0;
+        // Ensure there is a id on each feature
+        for (const f of data.features)
+            f.id = id++;
+        map.addSource(sourceId, { type: 'geojson', data });
+    }
+    renderSliders() {
+        // Disable the sliders for screenshots
+        if (Config.map.debug['debug.screenshot'])
+            return;
+        // Only 3857 currently works with OSM/Topographic map
+        if (Config.map.tileMatrix.identifier !== GoogleTms.identifier) {
+            return (_jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "LINZ Aerial" }), debugSlider('linz-aerial', this.adjustLinzAerial)] }));
+        }
+        return (_jsxs(Fragment, { children: [_jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "OSM" }), debugSlider('osm', this.adjustOsm)] }), _jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "Topographic" }), debugSlider('linz-topographic', this.adjustTopographic)] }), _jsxs("div", { className: "debug__info", children: [_jsx("label", { className: "debug__label", children: "LINZ Aerial" }), debugSlider('linz-aerial', this.adjustLinzAerial)] })] }));
+    }
+    get styleJson() {
+        if (this._styleJson == null) {
+            this._styleJson = fetch(WindowUrl.toTileUrl("style" /* TileVectorStyle */, Config.map.tileMatrix, 'topographic', 'topographic')).then((f) => f.json());
+        }
+        return this._styleJson;
+    }
+    async adjustVector(value) {
+        var _a, _b, _c, _d;
+        const styleJson = await this.styleJson;
+        const map = this.props.map;
+        const hasTopographic = map.getSource('LINZ Basemaps');
+        if (hasTopographic == null) {
+            if (value === 0)
+                return; // Going to remove it anyway so just abort early
+            const source = (_a = styleJson.sources) === null || _a === void 0 ? void 0 : _a['LINZ Basemaps'];
+            if (source == null)
+                return;
+            map.addSource('LINZ Basemaps', source);
+            map.setStyle({ ...map.getStyle(), glyphs: styleJson.glyphs, sprite: styleJson.sprite });
+            // Setting glyphs/sprites forces a full map refresh, wait for the refresh before adjusting the style
+            map.once('style.load', () => this.adjustVector(value));
+            return;
+        }
+        const layers = (_c = (_b = styleJson.layers) === null || _b === void 0 ? void 0 : _b.filter((f) => f.type !== 'custom' && f.source === 'LINZ Basemaps')) !== null && _c !== void 0 ? _c : [];
+        // Do not hide topographic layers when trying to inspect the topographic layer
+        if (Config.map.layerId === 'topographic')
+            return;
+        // Force all the layers to be invisible to start, otherwise the map will "flash" on then off
+        for (const layer of layers) {
+            if (layer.type === 'custom')
+                continue;
+            const paint = ((_d = layer.paint) !== null && _d !== void 0 ? _d : {});
+            if (layer.type === 'symbol') {
+                paint['icon-opacity'] = 0;
+                paint['text-opacity'] = 0;
+            }
+            else {
+                paint[`${layer.type}-opacity`] = 0;
+            }
+            layer.paint = paint;
+        }
+        if (value === 0) {
+            for (const layer of layers) {
+                if (map.getLayer(layer.id) == null)
+                    continue;
+                map.removeLayer(layer.id);
+            }
+            return;
+        }
+        // Ensure all the layers are loaded before styling
+        if (map.getLayer(layers[0].id) == null) {
+            if (value === 0)
+                return;
+            for (const layer of layers)
+                map.addLayer(layer);
+        }
+        for (const layer of layers) {
+            if (map.getLayer(layer.id) == null)
+                continue;
+            if (layer.type === 'symbol') {
+                map.setPaintProperty(layer.id, `icon-opacity`, value);
+                map.setPaintProperty(layer.id, `text-opacity`, value);
+            }
+            else {
+                map.setPaintProperty(layer.id, `${layer.type}-opacity`, value);
+            }
+        }
+    }
+    adjustRaster(rasterId, range) {
+        if (this.props.map.getSource(rasterId) == null) {
+            this.props.map.addSource(rasterId, {
+                type: 'raster',
+                tiles: [getTileServerUrl(rasterId)],
+                tileSize: 256,
+            });
+        }
+        const isLayerMissing = this.props.map.getLayer(rasterId) == null;
+        if (range === 0) {
+            if (!isLayerMissing)
+                this.props.map.removeLayer(rasterId);
+            return;
+        }
+        if (isLayerMissing) {
+            this.props.map.addLayer({
+                id: rasterId,
+                type: 'raster',
+                source: rasterId,
+                minzoom: 0,
+                maxzoom: 24,
+                paint: { 'raster-opacity': 0 },
+            });
+            // Ensure this raster layers are below the vector layer
+            const sourceLayerId = `${Config.map.layerId}_source_fill`;
+            const isSourceLayerEnabled = this.props.map.getLayer(sourceLayerId) != null;
+            if (isSourceLayerEnabled) {
+                this.props.map.moveLayer(rasterId, sourceLayerId);
+            }
+        }
+        this.props.map.setPaintProperty(rasterId, 'raster-opacity', range);
+    }
+    setPurple(isPurple) {
+        Config.map.setDebug('debug.background', isPurple ? 'magenta' : false);
+        if (isPurple)
+            document.body.style.backgroundColor = 'magenta';
+        else
+            document.body.style.backgroundColor = '';
+    }
+}
+export function getTileServerUrl(tileServer) {
+    if (tileServer === 'osm')
+        return 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+    if (tileServer === 'linz-aerial') {
+        return WindowUrl.toTileUrl("raster" /* TileRaster */, Config.map.tileMatrix, 'aerial');
+    }
+    throw new Error('Unknown tile server');
+}

package/build/components/layer.switcher.dropdown.d.ts

@@ -0,0 +1,21 @@
+import { Component, ComponentChild } from 'preact';
+import { LayerInfo } from '../config.map.js';
+export interface LayerSwitcherDropdownState {
+    layers?: Map<string, LayerInfo>;
+    /** Is the layer switcher turned on */
+    isEnabled?: boolean;
+    /** Can users select individual aerial imagery layers */
+    isIndividualEnabled?: boolean;
+    /** Can users select the basic style */
+    isBasicStyleEnabled?: boolean;
+    currentLayer: string;
+}
+export declare class LayerSwitcherDropdown extends Component<unknown, LayerSwitcherDropdownState> {
+    _events: (() => boolean)[];
+    componentWillMount(): void;
+    componentWillUnmount(): void;
+    onChange: (e: Event) => void;
+    render(): ComponentChild;
+    renderAerialLayers(): ComponentChild;
+}
+//# sourceMappingURL=layer.switcher.dropdown.d.ts.map

package/build/components/layer.switcher.dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer.switcher.dropdown.d.ts","sourceRoot":"","sources":["../../src/components/layer.switcher.dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAY,MAAM,QAAQ,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAa,MAAM,kBAAkB,CAAC;AAGxD,MAAM,WAAW,0BAA0B;IACzC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAChC,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uCAAuC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AACD,qBAAa,qBAAsB,SAAQ,SAAS,CAAC,OAAO,EAAE,0BAA0B,CAAC;IACvF,OAAO,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,CAAM;IAChC,kBAAkB,IAAI,IAAI;IAkB1B,oBAAoB,IAAI,IAAI;IAK5B,QAAQ,MAAO,KAAK,KAAG,IAAI,CAczB;IAEF,MAAM,IAAI,cAAc;IAiBxB,kBAAkB,IAAI,cAAc;CAuBrC"}

package/build/components/layer.switcher.dropdown.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Component, Fragment } from 'preact';
+import { Config, gaEvent } from '../config.js';
+import { MapConfig } from '../config.map.js';
+import { SplitIo } from '../split.js';
+export class LayerSwitcherDropdown extends Component {
+    constructor() {
+        super(...arguments);
+        this._events = [];
+        this.onChange = (e) => {
+            const target = e.target;
+            const [layerId, style] = target.value.split('::');
+            Config.map.setLayerId(layerId, style);
+            gaEvent("Ui" /* Ui */, 'layer:' + target.value);
+            // Configure the bounds of the map to match the new layer
+            Config.map.layers.then((f) => {
+                const layer = f.get(layerId);
+                if (layer == null)
+                    return;
+                Config.map.emit('bounds', [layer.upperLeft, layer.lowerRight]);
+            });
+            window.history.pushState(null, '', `?${MapConfig.toUrl(Config.map)}`);
+        };
+    }
+    componentWillMount() {
+        SplitIo.getClient().then((f) => {
+            const isEnabled = (f === null || f === void 0 ? void 0 : f.getTreatment('layer-switcher-dropdown')) === 'on';
+            const isIndividualEnabled = (f === null || f === void 0 ? void 0 : f.getTreatment('layer-switcher-individual-layers')) === 'on';
+            const isBasicStyleEnabled = (f === null || f === void 0 ? void 0 : f.getTreatment('layer-switcher-basic')) === 'on';
+            this.setState({ ...this.state, isEnabled, isIndividualEnabled, isBasicStyleEnabled });
+            /** Load all the map config layers */
+            if (isEnabled)
+                Config.map.layers.then((layers) => this.setState({ ...this.state, layers }));
+        });
+        this.setState({ ...this.state, currentLayer: Config.map.layerKey });
+        this._events.push(Config.map.on('layer', () => this.setState({ ...this.state, currentLayer: Config.map.layerKey })), Config.map.on('tileMatrix', () => this.setState(this.state)));
+    }
+    componentWillUnmount() {
+        for (const e of this._events)
+            e();
+        this._events = [];
+    }
+    render() {
+        if (this.state.isEnabled !== true)
+            return;
+        return (_jsxs("div", { class: "LuiDeprecatedForms", children: [_jsx("h6", { children: "Layers" }), _jsxs("select", { onChange: this.onChange, value: this.state.currentLayer, children: [_jsxs("optgroup", { label: "Basemaps", children: [_jsx("option", { value: "aerial", children: " Aerial Imagery" }), _jsx("option", { value: "topographic::topographic", children: "Topographic" }), this.state.isBasicStyleEnabled ? _jsx("option", { value: "topographic::basic", children: "Basic" }) : undefined] }), this.renderAerialLayers()] })] }));
+    }
+    renderAerialLayers() {
+        if (this.state.isIndividualEnabled !== true)
+            return;
+        if (this.state.layers == null || this.state.layers.size === 0)
+            return;
+        const rural = [];
+        const urban = [];
+        for (const layer of this.state.layers.values()) {
+            if (!layer.projections.has(Config.map.tileMatrix.projection.code))
+                continue;
+            const node = _jsx("option", { value: layer.id, children: layer.name });
+            if (layer.name.toLowerCase().includes(' rural '))
+                rural.push(node);
+            else
+                urban.push(node);
+        }
+        if (rural.length === 0 || urban.length === 0)
+            return;
+        return (_jsxs(Fragment, { children: [_jsxs("optgroup", { label: "Aerial Imagery - Urban", children: [...urban] }), ";", _jsxs("optgroup", { label: "Aerial Imagery - Rural", children: [...rural] }), ";"] }));
+    }
+}

package/build/components/layout.footer.d.ts

@@ -0,0 +1,8 @@
+import { Component, ComponentChild } from 'preact';
+export declare class Footer extends Component {
+    _events: (() => boolean)[];
+    componentWillMount(): void;
+    componentWillUnmount(): void;
+    render(): ComponentChild;
+}
+//# sourceMappingURL=layout.footer.d.ts.map

package/build/components/layout.footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.footer.d.ts","sourceRoot":"","sources":["../../src/components/layout.footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAInD,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAO,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,CAAM;IAChC,kBAAkB,IAAI,IAAI;IAG1B,oBAAoB,IAAI,IAAI;IAK5B,MAAM,IAAI,cAAc;CA8BzB"}

package/build/components/layout.footer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Component } from 'preact';
+import { Config } from '../config.js';
+import { Link } from './link.js';
+export class Footer extends Component {
+    constructor() {
+        super(...arguments);
+        this._events = [];
+    }
+    componentWillMount() {
+        this._events.push(Config.map.on('change', () => this.setState(this.state)));
+    }
+    componentWillUnmount() {
+        for (const e of this._events)
+            e();
+        this._events = [];
+    }
+    render() {
+        if (Config.map.isDebug)
+            return;
+        return (_jsx("footer", { class: "lui-footer lui-footer-small lui-hide-sm lui-hide-xs", role: "contentinfo", children: _jsxs("div", { class: "lui-footer-columns", children: [_jsx("div", { style: "display:flex; align-items:center", children: _jsx(Link, { href: "http://www.govt.nz/", ariaLabel: "New Zealand Government", children: _jsx("img", { src: "/assets/logo-nz-govt.svg" }) }) }), _jsx("div", { class: "justify-end", children: _jsxs("ul", { class: "lui-footer-list", children: [_jsx("li", { class: "lui-footer-inline-list-item", children: "\u00A9 2021 Land Information New Zealand" }), _jsx("li", { class: "lui-footer-inline-list-item", children: _jsx(Link, { href: "https://www.linz.govt.nz/contact-us", children: "Contact" }) }), _jsx("li", { class: "lui-footer-inline-list-item", children: _jsx(Link, { href: "https://www.linz.govt.nz/privacy", children: "Privacy" }) }), _jsx("li", { class: "lui-footer-inline-list-item", children: _jsx(Link, { href: "https://www.linz.govt.nz/data/linz-data/linz-basemaps/data-attribution", children: "Data Attribution" }) })] }) })] }) }));
+    }
+}

package/build/components/layout.header.d.ts

@@ -0,0 +1,23 @@
+import { EpsgCode } from '@basemaps/geo';
+import { Component, ComponentChild } from 'preact';
+import { LayerInfo } from '../config.map.js';
+export declare class Header extends Component<unknown, {
+    isMenuOpen: boolean;
+    layers?: Map<string, LayerInfo>;
+}> {
+    _events: (() => boolean)[];
+    componentWillMount(): void;
+    componentWillUnmount(): void;
+    menuToggle: () => void;
+    render(): ComponentChild;
+    contactUs: () => void;
+    renderAboutLi(text: string, href: string, icon?: ComponentChild): ComponentChild;
+    renderAbout(): ComponentChild;
+    renderGithubLogo(): ComponentChild;
+    renderLinks(): ComponentChild;
+    /** Projections to show WMTS links for */
+    _validProjections: Set<EpsgCode>;
+    validProjections(): Set<EpsgCode>;
+    renderLinksTiles(): ComponentChild;
+}
+//# sourceMappingURL=layout.header.d.ts.map

package/build/components/layout.header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.header.d.ts","sourceRoot":"","sources":["../../src/components/layout.header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA8B,MAAM,eAAe,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGnD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAO7C,qBAAa,MAAO,SAAQ,SAAS,CAAC,OAAO,EAAE;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;CAAE,CAAC;IACtG,OAAO,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,CAAM;IAEhC,kBAAkB,IAAI,IAAI;IAU1B,oBAAoB,IAAI,IAAI;IAK5B,UAAU,QAAO,IAAI,CAInB;IAEF,MAAM,IAAI,cAAc;IA8CxB,SAAS,QAAO,IAAI,CAclB;IAEF,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,cAAc,GAAG,cAAc;IAWhF,WAAW,IAAI,cAAc;IA4B7B,gBAAgB,IAAI,cAAc;IAWlC,WAAW,IAAI,cAAc;IAW7B,yCAAyC;IACzC,iBAAiB,gBAA2D;IAC5E,gBAAgB,IAAI,GAAG,CAAC,QAAQ,CAAC;IAKjC,gBAAgB,IAAI,cAAc;CA2BnC"}

package/build/components/layout.header.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { EpsgCode, GoogleTms, Nztm2000QuadTms } from '@basemaps/geo';
+import clsx from 'clsx';
+import { Component } from 'preact';
+import { Fragment } from 'preact/jsx-runtime';
+import { Config, gaEvent } from '../config.js';
+import { SplitIo } from '../split.js';
+import { Copyable } from './copyable.js';
+import { LayerSwitcherDropdown } from './layer.switcher.dropdown.js';
+import { Icon, Link } from './link.js';
+export class Header extends Component {
+    constructor() {
+        super(...arguments);
+        this._events = [];
+        this.menuToggle = () => {
+            const isMenuOpen = !this.state.isMenuOpen;
+            gaEvent("Ui" /* Ui */, isMenuOpen ? 'menu:open' : 'menu:close');
+            this.setState({ ...this.state, isMenuOpen });
+        };
+        this.contactUs = () => {
+            const subject = 'Request Basemaps Developer Access';
+            const body = `
+Give us a few key details to sign up for Developer Access to LINZ Basemaps. We will respond with your Apps' unique API key.
+
+Your Name:
+
+Your Email:
+
+Your Service/App URL:
+
+`;
+            gaEvent("Ui" /* Ui */, 'contact-us:click');
+            window.location.href = `mailto:basemaps@linz.govt.nz?subject=${encodeURI(subject)}&body=${encodeURI(body)}`;
+        };
+        /** Projections to show WMTS links for */
+        this._validProjections = new Set([EpsgCode.Google, EpsgCode.Nztm2000]);
+    }
+    componentWillMount() {
+        this.setState({ isMenuOpen: false });
+        this._events.push(Config.map.on('change', () => this.setState(this.state)));
+        // If individual layers are on, we need the layer info to determine if they can use NZTM2000Quad WMTS
+        SplitIo.getClient().then((f) => {
+            const isIndividualEnabled = (f === null || f === void 0 ? void 0 : f.getTreatment('layer-switcher-individual-layers')) === 'on';
+            if (isIndividualEnabled)
+                Config.map.layers.then((layers) => this.setState({ ...this.state, layers }));
+        });
+    }
+    componentWillUnmount() {
+        for (const e of this._events)
+            e();
+        this._events = [];
+    }
+    render() {
+        if (Config.map.isDebug)
+            return;
+        return (_jsxs("header", { class: "lui-header", children: [_jsxs("div", { class: "lui-header-row", children: [_jsxs("div", { class: "lui-header-col", children: [_jsx("div", { class: "lui-header-logo", children: _jsx("img", { class: "linz-logo", src: "/assets/logo-linz.svg" }) }), _jsx("div", { class: "lui-header-title", children: _jsx("h1", { children: "Basemaps" }) })] }), _jsx("div", { class: "lui-header-col", children: _jsx("div", { class: "lui-header-menu-item", children: _jsx("div", { class: "lui-header-menu-icon", children: _jsx("i", { class: "material-icons-round md-36", onClick: this.menuToggle, style: { cursor: 'pointer' }, children: this.state.isMenuOpen ? 'close' : 'menu' }) }) }) })] }), _jsxs("div", { class: clsx({
+                        'lui-menu-drawer': true,
+                        'lui-menu-drawer-closed': !this.state.isMenuOpen,
+                        'lui-menu-drawer-wide': true,
+                    }), "aria-hidden": this.state.isMenuOpen, children: [_jsx(LayerSwitcherDropdown, {}), this.renderLinks(), _jsx("h6", { children: "Developer API Keys" }), _jsx("p", { children: "Contact us for free API keys with better support for public web and mobile apps." }), _jsx("button", { class: "lui-button lui-button-tertiary contact-us", onClick: this.contactUs, children: "Contact us" }), this.renderAbout()] })] }));
+    }
+    renderAboutLi(text, href, icon) {
+        return (_jsx("li", { children: _jsxs(Link, { href: href, children: [text, icon == null ? _jsx(Icon, { name: "launch" }) : icon] }) }));
+    }
+    renderAbout() {
+        return (_jsxs(Fragment, { children: [_jsx("h6", { children: "About Basemaps" }), _jsxs("ul", { class: "about-links", children: [this.renderAboutLi('Get started', 'https://www.linz.govt.nz/data/linz-data/linz-basemaps/get-started-linz-basemaps'), this.renderAboutLi('Technical information', 'https://www.linz.govt.nz/data/linz-data/linz-basemaps/linz-basemaps-documentation'), this.renderAboutLi('How to use our APIs', 'https://www.linz.govt.nz/data/linz-data/linz-basemaps/how-use-linz-basemaps-apis'), this.renderAboutLi('Github', 'https://github.com/linz/basemaps', this.renderGithubLogo()), _jsx("li", { children: _jsxs(Link, { href: "https://github.com/linz/basemaps/blob/master/CHANGELOG.md", children: ["Version ", _jsx("span", { class: "basemaps-version", children: Config.Version })] }) })] })] }));
+    }
+    renderGithubLogo() {
+        return (_jsx("svg", { style: "width: 24px; height: 24px", viewBox: "0 0 24 24", children: _jsx("path", { fill: "currentColor", d: "M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" }) }));
+    }
+    renderLinks() {
+        return (_jsxs(Fragment, { children: [_jsx("h6", { children: "90 day API keys" }), _jsx("p", { children: "API keys expire after 90 days, if a longer duration is needed please request a developer API key" }), _jsx(Copyable, { header: "Api Key", value: Config.ApiKey }), this.renderLinksTiles()] }));
+    }
+    validProjections() {
+        var _a, _b;
+        if (this.state.layers == null)
+            return this._validProjections;
+        return (_b = (_a = this.state.layers.get(Config.map.layerId)) === null || _a === void 0 ? void 0 : _a.projections) !== null && _b !== void 0 ? _b : this._validProjections;
+    }
+    renderLinksTiles() {
+        if (Config.map.isVector) {
+            return (_jsxs(Fragment, { children: [_jsx(Copyable, { header: "StyleJSON", value: Config.map.toTileUrl("style" /* TileVectorStyle */) }), _jsx(Copyable, { header: "XYZ", value: Config.map.toTileUrl("vector-xyz" /* TileVectorXyz */) })] }));
+        }
+        const projections = this.validProjections();
+        const children = [];
+        if (projections.has(EpsgCode.Nztm2000)) {
+            const nztmTileUrl = Config.map.toTileUrl("wmts" /* Wmts */, Nztm2000QuadTms);
+            children.push(_jsx(Copyable, { header: "WMTS: NZTM2000Quad", value: nztmTileUrl }));
+        }
+        if (projections.has(EpsgCode.Google)) {
+            const googleTileUrl = Config.map.toTileUrl("wmts" /* Wmts */, GoogleTms);
+            const googleXyzTileUrl = Config.map.toTileUrl("raster" /* TileRaster */, GoogleTms);
+            children.push(_jsx(Copyable, { header: "WMTS: WebMercatorQuad", value: googleTileUrl }));
+            children.push(_jsx(Copyable, { header: "XYZ", value: googleXyzTileUrl }));
+        }
+        return _jsx(Fragment, { children: children });
+    }
+}

package/build/components/link.d.ts

@@ -0,0 +1,17 @@
+import { Component, RenderableProps, ComponentChild } from 'preact';
+interface IconProps {
+    name: string;
+}
+export declare class Icon extends Component<IconProps> {
+    render(props: RenderableProps<IconProps>): ComponentChild;
+}
+interface LinkProps {
+    href: string;
+    icon?: string;
+    ariaLabel?: string;
+}
+export declare class Link extends Component<LinkProps> {
+    render(props: RenderableProps<LinkProps>): ComponentChild;
+}
+export {};
+//# sourceMappingURL=link.d.ts.map

package/build/components/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components/link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAEpE,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AACD,qBAAa,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,cAAc;CAG1D;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,qBAAa,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,cAAc;CAQ1D"}

package/build/components/link.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Component } from 'preact';
+export class Icon extends Component {
+    render(props) {
+        return _jsx("i", { class: "material-icons-round md-36", children: props.name });
+    }
+}
+export class Link extends Component {
+    render(props) {
+        return (_jsxs("a", { rel: "noopener", target: "_blank", href: props.href, style: "display:flex;", "aria-label": props.ariaLabel, children: [props.children, props.icon ? _jsx(Icon, { name: props.icon }) : undefined] }));
+    }
+}

package/build/components/map.d.ts

@@ -0,0 +1,31 @@
+import maplibre from 'maplibre-gl';
+import { Component, ComponentChild } from 'preact';
+import { MapAttribution } from '../attribution.js';
+export declare class Basemaps extends Component<unknown, {
+    isLayerSwitcherEnabled: boolean;
+}> {
+    map: maplibre.Map;
+    el: HTMLElement;
+    mapAttr: MapAttribution;
+    /** Ignore the location updates */
+    ignoreNextLocationUpdate: boolean;
+    controlGeo: maplibre.GeolocateControl | null;
+    updateLocation: () => void;
+    updateBounds: (bounds: maplibre.LngLatBoundsLike) => void;
+    /**
+     * Only show the geocontrol on GoogleTMS
+     * As it does not work with the projection logic we are currently using
+     */
+    ensureGeoControl(): void;
+    updateStyle: () => void;
+    componentWillMount(): void;
+    componentDidMount(): void;
+    _events: (() => boolean)[];
+    componentWillUnmount(): void;
+    render(): ComponentChild;
+    updateUrlTimer: unknown | null;
+    onRender: () => void;
+    /** Update the window.location with the current location information */
+    setLocationUrl(): void;
+}
+//# sourceMappingURL=map.d.ts.map

package/build/components/map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"map.d.ts","sourceRoot":"","sources":["../../src/components/map.tsx"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQnD,qBAAa,QAAS,SAAQ,SAAS,CAAC,OAAO,EAAE;IAAE,sBAAsB,EAAE,OAAO,CAAA;CAAE,CAAC;IACnF,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC;IAClB,EAAE,EAAE,WAAW,CAAC;IAChB,OAAO,EAAE,cAAc,CAAC;IACxB,kCAAkC;IAClC,wBAAwB,UAAS;IAEjC,UAAU,EAAE,QAAQ,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAE7C,cAAc,QAAO,IAAI,CAQvB;IAEF,YAAY,WAAY,SAAS,gBAAgB,KAAG,IAAI,CAuBtD;IAEF;;;OAGG;IACH,gBAAgB,IAAI,IAAI;IAYxB,WAAW,QAAO,IAAI,CASpB;IAEF,kBAAkB,IAAI,IAAI;IAI1B,iBAAiB,IAAI,IAAI;IA6CzB,OAAO,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,CAAM;IAEhC,oBAAoB,IAAI,IAAI;IAM5B,MAAM,IAAI,cAAc;IAYxB,cAAc,EAAE,OAAO,GAAG,IAAI,CAAQ;IACtC,QAAQ,QAAO,IAAI,CAGjB;IAEF,uEAAuE;IACvE,cAAc,IAAI,IAAI;CAUvB"}