From ddc0dddebdfac1d33a2aec333357e35d2d4d11d8 Mon Sep 17 00:00:00 2001 From: Aliyan Haq <55751566+AliyanH@users.noreply.github.com> Date: Wed, 24 May 2023 17:16:40 -0400 Subject: [PATCH 1/4] initial map-input setup --- Gruntfile.js | 2 + index.html | 59 +++-------------- src/map-input.js | 66 +++++++++++++++++-- src/mapml-viewer.js | 2 + .../elementSupport/inputs/heightInput.js | 12 ++++ .../elementSupport/inputs/hiddenInput.js | 13 ++++ .../elementSupport/inputs/locationInput.js | 22 +++++++ src/mapml/elementSupport/inputs/widthInput.js | 12 ++++ src/mapml/elementSupport/inputs/zoomInput.js | 19 ++++++ 9 files changed, 152 insertions(+), 55 deletions(-) create mode 100644 src/mapml/elementSupport/inputs/heightInput.js create mode 100644 src/mapml/elementSupport/inputs/hiddenInput.js create mode 100644 src/mapml/elementSupport/inputs/locationInput.js create mode 100644 src/mapml/elementSupport/inputs/widthInput.js create mode 100644 src/mapml/elementSupport/inputs/zoomInput.js diff --git a/Gruntfile.js b/Gruntfile.js index 41145842b..ef794e121 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -29,6 +29,8 @@ module.exports = function(grunt) { 'dist/map-caption.js': ['src/map-caption.js'], 'dist/map-feature.js': ['src/map-feature.js'], 'dist/map-extent.js': ['src/map-extent.js'], + 'dist/map-input.js': ['src/map-input.js'], + 'dist/zoomInput.js': ['src/mapml/elementSupport/inputs/zoomInput.js'], 'dist/map-area.js': ['src/map-area.js'], 'dist/layer.js': ['src/layer.js'], 'dist/leaflet.js': ['dist/leaflet-src.js', diff --git a/index.html b/index.html index ddfa9d00d..d612a76e3 100644 --- a/index.html +++ b/index.html @@ -72,57 +72,14 @@ - - A pleasing map of Canada - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
code1200020
accuracy26
valdate1995
image - - -
themeFO
type2
elevation61
altiaccu5
- - - - -75.705278 45.397778 - - - + + + + + + + + diff --git a/src/map-input.js b/src/map-input.js index bd92e01b1..bd0a0db32 100644 --- a/src/map-input.js +++ b/src/map-input.js @@ -1,4 +1,4 @@ -import { MapLink } from './map-link.js'; +import { ZoomInput } from './zoomInput.js'; export class MapInput extends HTMLElement { static get observedAttributes() { @@ -89,7 +89,7 @@ export class MapInput extends HTMLElement { } } get step() { - return this.getAttribute('step'); + return this.getAttribute('step') || 1; } set step(val) { if (val) { @@ -97,6 +97,7 @@ export class MapInput extends HTMLElement { } } attributeChangedCallback(name, oldValue, newValue) { + console.log(name); switch (name) { case 'name': if (oldValue !== newValue) { @@ -154,7 +155,64 @@ export class MapInput extends HTMLElement { // Always call super first in constructor super(); } - connectedCallback() {} + connectedCallback() { + switch (this.type) { + case 'zoom': + // input will store the input Class specific to the input type + this.input = new ZoomInput( + this.name, + this.min, + this.max, + this.value, + this.step + ); + break; + case 'location': + //this.input = ... + break; + case 'width': + //this.input = ... + break; + case 'height': + //this.input = ... + break; + case 'hidden': + //this.input = ... + break; + } + } disconnectedCallback() {} + + //https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity + checkValidity() { + if (this.input.validateInput()) { + return true; + } else { + const evt = new Event('invalid', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(evt); + return false; + } + } + + //https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity + reportValidity() { + if (this.input.validateInput()) { + return true; + } else { + const evt = new Event('invalid', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(evt); + //if the event isn't canceled reports the problem to the user. + // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-reportvalidity-dev + console.log("Input type='" + this.type + "' is not valid!"); + return false; + } + } } -window.customElements.define('map-input', MapInput); diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index 1210f4b72..fb2c61b8a 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -5,6 +5,7 @@ import { MapLayer } from './layer.js'; import { MapCaption } from './map-caption.js'; import { MapFeature } from './map-feature.js'; import { MapExtent } from './map-extent.js'; +import { MapInput } from './map-input.js'; export class MapViewer extends HTMLElement { static get observedAttributes() { @@ -1304,3 +1305,4 @@ window.customElements.define('layer-', MapLayer); window.customElements.define('map-caption', MapCaption); window.customElements.define('map-feature', MapFeature); window.customElements.define('map-extent', MapExtent); +window.customElements.define('map-input', MapInput); diff --git a/src/mapml/elementSupport/inputs/heightInput.js b/src/mapml/elementSupport/inputs/heightInput.js new file mode 100644 index 000000000..26d2034a4 --- /dev/null +++ b/src/mapml/elementSupport/inputs/heightInput.js @@ -0,0 +1,12 @@ +export class HeightInput { + constructor(name) { + this.name = name; + } + + validateInput() { + // name is required + // + // checks here... + return; + } +} diff --git a/src/mapml/elementSupport/inputs/hiddenInput.js b/src/mapml/elementSupport/inputs/hiddenInput.js new file mode 100644 index 000000000..8fffbf86e --- /dev/null +++ b/src/mapml/elementSupport/inputs/hiddenInput.js @@ -0,0 +1,13 @@ +export class HiddenInput { + constructor(name, value) { + this.name = name; + this.value = value; + } + + validateInput() { + // name is required + // value is required + // checks here... + return; + } +} diff --git a/src/mapml/elementSupport/inputs/locationInput.js b/src/mapml/elementSupport/inputs/locationInput.js new file mode 100644 index 000000000..34f920eb3 --- /dev/null +++ b/src/mapml/elementSupport/inputs/locationInput.js @@ -0,0 +1,22 @@ +export class LocationInput { + constructor(name, position, axis, cs, min, max, rel) { + this.name = name; + this.position = position; + this.axis = axis; + this.cs = cs; // units + this.min = min; + this.max = max; + this.rel = rel; + } + + validateInput() { + // name is required + // axis is required + // cs is required + // position is not required, will default to top-left + // min max fallbacks, map-meta -> projection + // rel not required, default is image/extent + // checks here... + return; + } +} diff --git a/src/mapml/elementSupport/inputs/widthInput.js b/src/mapml/elementSupport/inputs/widthInput.js new file mode 100644 index 000000000..13cc1087c --- /dev/null +++ b/src/mapml/elementSupport/inputs/widthInput.js @@ -0,0 +1,12 @@ +export class WidthInput { + constructor(name) { + this.name = name; + } + + validateInput() { + // name is required + // + // checks here... + return; + } +} diff --git a/src/mapml/elementSupport/inputs/zoomInput.js b/src/mapml/elementSupport/inputs/zoomInput.js new file mode 100644 index 000000000..4944f0fd3 --- /dev/null +++ b/src/mapml/elementSupport/inputs/zoomInput.js @@ -0,0 +1,19 @@ +export class ZoomInput { + constructor(name, min, max, value, step) { + this.name = name; + this.min = min; + this.max = max; + this.value = value; + this.step = step; + } + + validateInput() { + // name is required + // min and max can not be present + // fallback would be layer's meta, -> projection min, max + // don't need value, map-meta max value, -> fallback is max zoom of projection + // don't need step, defaults to 1 + // checks here... + return; + } +} From 1c168bc42af2c7cf535f7400326c5f36f377571a Mon Sep 17 00:00:00 2001 From: AliyanH Date: Fri, 26 May 2023 14:52:21 -0400 Subject: [PATCH 2/4] implement Classes for different types of map-input types --- Gruntfile.js | 4 + index.html | 31 +++++- src/map-input.js | 95 +++++++++++++--- .../elementSupport/inputs/heightInput.js | 26 +++-- .../elementSupport/inputs/hiddenInput.js | 28 +++-- .../elementSupport/inputs/locationInput.js | 104 ++++++++++++++---- src/mapml/elementSupport/inputs/widthInput.js | 26 +++-- src/mapml/elementSupport/inputs/zoomInput.js | 23 ++-- 8 files changed, 261 insertions(+), 76 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index ef794e121..5073aa0b6 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -31,6 +31,10 @@ module.exports = function(grunt) { 'dist/map-extent.js': ['src/map-extent.js'], 'dist/map-input.js': ['src/map-input.js'], 'dist/zoomInput.js': ['src/mapml/elementSupport/inputs/zoomInput.js'], + 'dist/hiddenInput.js': ['src/mapml/elementSupport/inputs/hiddenInput.js'], + 'dist/widthInput.js': ['src/mapml/elementSupport/inputs/widthInput.js'], + 'dist/heightInput.js': ['src/mapml/elementSupport/inputs/heightInput.js'], + 'dist/locationInput.js': ['src/mapml/elementSupport/inputs/locationInput.js'], 'dist/map-area.js': ['src/map-area.js'], 'dist/layer.js': ['src/layer.js'], 'dist/leaflet.js': ['dist/leaflet-src.js', diff --git a/index.html b/index.html index d612a76e3..1c5b34d1d 100644 --- a/index.html +++ b/index.html @@ -23,9 +23,9 @@ /* Responsive map. */ max-width: 100%; - /* Full viewport. */ + /* Full viewport. width: 100%; - height: 100%; + height: 100%; */ /* Remove default (native-like) border. */ border: none; @@ -72,15 +72,38 @@ - + + - + + + + + + + + + + + + + + + + + + + + diff --git a/src/map-input.js b/src/map-input.js index bd0a0db32..96f5a76ef 100644 --- a/src/map-input.js +++ b/src/map-input.js @@ -1,4 +1,8 @@ import { ZoomInput } from './zoomInput.js'; +import { HiddenInput } from './hiddenInput.js'; +import { WidthInput } from './widthInput.js'; +import { HeightInput } from './heightInput.js'; +import { LocationInput } from './locationInput.js'; export class MapInput extends HTMLElement { static get observedAttributes() { @@ -33,7 +37,7 @@ export class MapInput extends HTMLElement { } } get value() { - return this.getAttribute('value'); + return this.input.getValue(); } set value(val) { if (val) { @@ -73,7 +77,26 @@ export class MapInput extends HTMLElement { } } get min() { - return this.getAttribute('min'); + if ( + this.type === 'height' || + this.type === 'width' || + this.type === 'hidden' + ) { + return null; + } + if (this.getAttribute('min')) { + return this.getAttribute('min'); + } else if (this._layer._layerEl.querySelector('map-meta[name=zoom]')) { + // fallback map-meta on layer + return M._metaContentToObject( + this._layer._layerEl + .querySelector('map-meta[name=zoom]') + .getAttribute('content') + ).min; + } else { + // fallback map min + return this._layer._map.getMinZoom().toString(); + } } set min(val) { if (val) { @@ -81,7 +104,26 @@ export class MapInput extends HTMLElement { } } get max() { - return this.getAttribute('max'); + if ( + this.type === 'height' || + this.type === 'width' || + this.type === 'hidden' + ) { + return null; + } + if (this.getAttribute('max')) { + return this.getAttribute('max'); + } else if (this._layer._layerEl.querySelector('map-meta[name=zoom]')) { + // fallback map-meta on layer + return M._metaContentToObject( + this._layer._layerEl + .querySelector('map-meta[name=zoom]') + .getAttribute('content') + ).max; + } else { + // fallback map max + return this._layer._map.getMaxZoom().toString(); + } } set max(val) { if (val) { @@ -89,7 +131,11 @@ export class MapInput extends HTMLElement { } } get step() { - return this.getAttribute('step') || 1; + if (this.type !== 'zoom') { + return null; + } else { + return this.getAttribute('step') || '1'; + } } set step(val) { if (val) { @@ -97,11 +143,13 @@ export class MapInput extends HTMLElement { } } attributeChangedCallback(name, oldValue, newValue) { - console.log(name); switch (name) { case 'name': if (oldValue !== newValue) { - // handle side effects + // update associated class value on attribute change + if (oldValue !== null) { + this.input.name = newValue; + } } break; case 'type': @@ -111,7 +159,11 @@ export class MapInput extends HTMLElement { break; case 'value': if (oldValue !== newValue) { - // handle side effects + if (oldValue !== null) { + this.input.value = newValue; + } else { + this._initValue = newValue; + } } break; case 'axis': @@ -156,6 +208,9 @@ export class MapInput extends HTMLElement { super(); } connectedCallback() { + if (this.parentElement.nodeName === 'MAP-EXTENT') { + this._layer = this.parentElement._layer; + } switch (this.type) { case 'zoom': // input will store the input Class specific to the input type @@ -163,21 +218,35 @@ export class MapInput extends HTMLElement { this.name, this.min, this.max, - this.value, - this.step + this._initValue, + this.step, + this._layer ); break; case 'location': - //this.input = ... + // input will store the input Class specific to the input type + this.input = new LocationInput( + this.name, + this.position, + this.axis, + this.units, + this.min, + this.max, + this.rel, + this._layer + ); break; case 'width': - //this.input = ... + // input will store the input Class specific to the input type + this.input = new WidthInput(this.name, this._layer); break; case 'height': - //this.input = ... + // input will store the input Class specific to the input type + this.input = new HeightInput(this.name, this._layer); break; case 'hidden': - //this.input = ... + // input will store the input Class specific to the input type + this.input = new HiddenInput(this.name, this._initValue); break; } } diff --git a/src/mapml/elementSupport/inputs/heightInput.js b/src/mapml/elementSupport/inputs/heightInput.js index 26d2034a4..3629b0ddd 100644 --- a/src/mapml/elementSupport/inputs/heightInput.js +++ b/src/mapml/elementSupport/inputs/heightInput.js @@ -1,12 +1,18 @@ export class HeightInput { - constructor(name) { - this.name = name; - } - - validateInput() { - // name is required - // - // checks here... - return; - } + constructor(name, layer) { + this.name = name; + this.layer = layer; + } + + validateInput() { + // name is required + if (!this.name) { + return false; + } + return true; + } + + getValue() { + return this.layer._map.getSize().y; + } } diff --git a/src/mapml/elementSupport/inputs/hiddenInput.js b/src/mapml/elementSupport/inputs/hiddenInput.js index 8fffbf86e..0919ef90f 100644 --- a/src/mapml/elementSupport/inputs/hiddenInput.js +++ b/src/mapml/elementSupport/inputs/hiddenInput.js @@ -1,13 +1,19 @@ export class HiddenInput { - constructor(name, value) { - this.name = name; - this.value = value; - } - - validateInput() { - // name is required - // value is required - // checks here... - return; - } + constructor(name, value) { + this.name = name; + this.value = value; + } + + validateInput() { + // name is required + // value is required + if (!this.name || !this.value) { + return false; + } + return true; + } + + getValue() { + return this.value; + } } diff --git a/src/mapml/elementSupport/inputs/locationInput.js b/src/mapml/elementSupport/inputs/locationInput.js index 34f920eb3..906690721 100644 --- a/src/mapml/elementSupport/inputs/locationInput.js +++ b/src/mapml/elementSupport/inputs/locationInput.js @@ -1,22 +1,86 @@ export class LocationInput { - constructor(name, position, axis, cs, min, max, rel) { - this.name = name; - this.position = position; - this.axis = axis; - this.cs = cs; // units - this.min = min; - this.max = max; - this.rel = rel; - } - - validateInput() { - // name is required - // axis is required - // cs is required - // position is not required, will default to top-left - // min max fallbacks, map-meta -> projection - // rel not required, default is image/extent - // checks here... - return; - } + constructor(name, position, axis, units, min, max, rel, layer) { + this.name = name; + this.position = position; + this.axis = axis; + this.units = units; // cs + this.min = min; + this.max = max; + this.rel = rel; + this.layer = layer; + } + + validateInput() { + // name is required + // axis is required + // cs/units is required + if (!this.name || !this.axis || !this.units) { + return false; + } + // check if axis match the cs + let axisCS = M.axisToCS(this.axis); + if ( + (typeof axisCS === 'string' && axisCS !== this.units) || + (typeof axisCS === 'object' && + (axisCS[0] !== this.units || axisCS[1] !== this.units)) + ) { + return false; + } + // position is not required, will default to top-left + // min max fallbacks, map-meta -> projection + // rel not required, default is image/extent + return true; + } + + _TCRSToPCRS(coords, zoom) { + // TCRS pixel point to Projected CRS point (in meters, presumably) + var map = this.layer._map, + crs = map.options.crs, + loc = crs.transformation.untransform(coords, crs.scale(zoom)); + return loc; + } + + getValue(zoom = undefined, bounds = undefined) { + // units = cs + // + if (zoom === undefined) zoom = this.layer._map.getZoom(); + if (bounds === undefined) bounds = this.layer._map.getPixelBounds(); + + if (this.units === 'pcrs' || this.units === 'gcrs') { + switch (this.axis) { + case 'longitude': + case 'easting': + if (this.position) { + if (this.position.match(/.*?-left/i)) { + return this._TCRSToPCRS(bounds.min, zoom).x; + } else if (this.position.match(/.*?-right/i)) { + return this._TCRSToPCRS(bounds.max, zoom).x; + } + } else { + // position is not required, will default to top-left + } + break; + case 'latitude': + case 'northing': + if (this.position) { + if (this.position.match(/top-.*?/i)) { + return this._TCRSToPCRS(bounds.min, zoom).y; + } else if (this.position.match(/bottom-.*?/i)) { + return this._TCRSToPCRS(bounds.max, zoom).y; + } + } else { + // position is not required, will default to top-left + } + break; + } + } else if ( + this.units === 'tilematrix' || + this.units === 'tcrs' || + this.units === 'tile' || + this.units === 'map' + ) { + // TODO: What happens here... + } + return; + } } diff --git a/src/mapml/elementSupport/inputs/widthInput.js b/src/mapml/elementSupport/inputs/widthInput.js index 13cc1087c..756f72ffe 100644 --- a/src/mapml/elementSupport/inputs/widthInput.js +++ b/src/mapml/elementSupport/inputs/widthInput.js @@ -1,12 +1,18 @@ export class WidthInput { - constructor(name) { - this.name = name; - } - - validateInput() { - // name is required - // - // checks here... - return; - } + constructor(name, layer) { + this.name = name; + this.layer = layer; + } + + validateInput() { + // name is required + if (!this.name) { + return false; + } + return true; + } + + getValue() { + return this.layer._map.getSize().x; + } } diff --git a/src/mapml/elementSupport/inputs/zoomInput.js b/src/mapml/elementSupport/inputs/zoomInput.js index 4944f0fd3..5ac511675 100644 --- a/src/mapml/elementSupport/inputs/zoomInput.js +++ b/src/mapml/elementSupport/inputs/zoomInput.js @@ -1,19 +1,26 @@ export class ZoomInput { - constructor(name, min, max, value, step) { + constructor(name, min, max, value, step, layer) { this.name = name; this.min = min; this.max = max; this.value = value; this.step = step; + this.layer = layer; } validateInput() { - // name is required - // min and max can not be present - // fallback would be layer's meta, -> projection min, max - // don't need value, map-meta max value, -> fallback is max zoom of projection - // don't need step, defaults to 1 - // checks here... - return; + // name is required + if (!this.name) { + return false; + } + // min and max can not be present + // fallback would be layer's meta, -> projection min, max + // don't need value, map-meta max value, -> fallback is max zoom of projection + // don't need step, defaults to 1 + return true; + } + + getValue() { + return this.layer._map.options.mapEl.zoom; } } From 4770044545685ed5cf6d0baa940984f2dae73faf Mon Sep 17 00:00:00 2001 From: AliyanH Date: Wed, 31 May 2023 12:03:23 -0400 Subject: [PATCH 3/4] Update map-input implementation + Add support for tilematrix type=locataion Class --- index.html | 34 +++++++++++ src/map-input.js | 32 ++++++---- .../elementSupport/inputs/locationInput.js | 60 ++++++++++++++----- 3 files changed, 99 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 1c5b34d1d..f4c9151cd 100644 --- a/index.html +++ b/index.html @@ -105,5 +105,39 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/map-input.js b/src/map-input.js index 96f5a76ef..d97ca3c2d 100644 --- a/src/map-input.js +++ b/src/map-input.js @@ -95,7 +95,7 @@ export class MapInput extends HTMLElement { ).min; } else { // fallback map min - return this._layer._map.getMinZoom().toString(); + return this._layer._layerEl.extent.zoom.minZoom.toString(); } } set min(val) { @@ -122,7 +122,7 @@ export class MapInput extends HTMLElement { ).max; } else { // fallback map max - return this._layer._map.getMaxZoom().toString(); + return this._layer._layerEl.extent.zoom.maxZoom.toString(); } } set max(val) { @@ -155,6 +155,7 @@ export class MapInput extends HTMLElement { case 'type': if (oldValue !== newValue) { // handle side effects + // not allowed to change 'type' } break; case 'value': @@ -162,43 +163,50 @@ export class MapInput extends HTMLElement { if (oldValue !== null) { this.input.value = newValue; } else { - this._initValue = newValue; + this.initialValue = newValue; } } break; case 'axis': - if (oldValue !== newValue) { + if (oldValue !== newValue && this.input) { // handle side effects + this.input.axis = newValue; } break; case 'units': - if (oldValue !== newValue) { + if (oldValue !== newValue && this.input) { // handle side effects + this.input.units = newValue; } break; case 'position': - if (oldValue !== newValue) { + if (oldValue !== newValue && this.input) { // handle side effects + this.input.position = newValue; } break; case 'rel': - if (oldValue !== newValue) { + if (oldValue !== newValue && this.input) { // handle side effects + this.input.rel = newValue; } break; case 'min': - if (oldValue !== newValue) { + if (oldValue !== newValue && this.input) { // handle side effects + this.input.min = newValue; } break; case 'max': - if (oldValue !== newValue) { + if (oldValue !== newValue && this.input) { // handle side effects + this.input.max = newValue; } break; case 'step': - if (oldValue !== newValue) { + if (oldValue !== newValue && this.input) { // handle side effects + this.input.step = newValue; } break; } @@ -218,7 +226,7 @@ export class MapInput extends HTMLElement { this.name, this.min, this.max, - this._initValue, + this.initialValue, this.step, this._layer ); @@ -246,7 +254,7 @@ export class MapInput extends HTMLElement { break; case 'hidden': // input will store the input Class specific to the input type - this.input = new HiddenInput(this.name, this._initValue); + this.input = new HiddenInput(this.name, this.initialValue); break; } } diff --git a/src/mapml/elementSupport/inputs/locationInput.js b/src/mapml/elementSupport/inputs/locationInput.js index 906690721..fb4e7b880 100644 --- a/src/mapml/elementSupport/inputs/locationInput.js +++ b/src/mapml/elementSupport/inputs/locationInput.js @@ -3,7 +3,12 @@ export class LocationInput { this.name = name; this.position = position; this.axis = axis; - this.units = units; // cs + // if unit/cs not present, find it + if (!units && axis && !['i', 'j'].includes(axis)) { + this.units = M.axisToCS(axis).toLowerCase(); + } else { + this.units = units; // cs + } this.min = min; this.max = max; this.rel = rel; @@ -13,19 +18,26 @@ export class LocationInput { validateInput() { // name is required // axis is required - // cs/units is required - if (!this.name || !this.axis || !this.units) { + if (!this.name || !this.axis) { return false; } - // check if axis match the cs - let axisCS = M.axisToCS(this.axis); + // cs/units is only required when the axis is i/j. To differentiate between the units/cs if ( - (typeof axisCS === 'string' && axisCS !== this.units) || - (typeof axisCS === 'object' && - (axisCS[0] !== this.units || axisCS[1] !== this.units)) + (this.axis === 'i' || this.axis === 'j') && + !['map', 'tile'].includes(this.units) ) { return false; } + // check if axis match the units/cs + if (this.units) { + let axisCS = M.axisToCS(this.axis); + if ( + typeof axisCS === 'string' && + axisCS.toUpperCase() !== this.units.toUpperCase() + ) { + return false; + } + } // position is not required, will default to top-left // min max fallbacks, map-meta -> projection // rel not required, default is image/extent @@ -58,6 +70,7 @@ export class LocationInput { } } else { // position is not required, will default to top-left + return this._TCRSToPCRS(bounds.min, zoom).x; } break; case 'latitude': @@ -70,16 +83,33 @@ export class LocationInput { } } else { // position is not required, will default to top-left + return this._TCRSToPCRS(bounds.min, zoom).y; } break; } - } else if ( - this.units === 'tilematrix' || - this.units === 'tcrs' || - this.units === 'tile' || - this.units === 'map' - ) { - // TODO: What happens here... + } else if (this.units === 'tilematrix') { + // Value is retrieved from the createTile method of TemplatedTileLayer, on move end. + // Different values for each tile when filling in the map tiles on the map. + // Currently storing all x,y,z within one object, + // TODO: change return value as needed based on usage by map-input + // https://github.com/Leaflet/Leaflet/blob/6994baf25f267db1c8b720c28a61e0700d0aa0e8/src/layer/tile/GridLayer.js#L652 + const center = this.layer._map.getCenter(); + const templatedTileLayer = this.layer._templatedLayer._templates[0].layer; + const pixelBounds = templatedTileLayer._getTiledPixelBounds(center); + const tileRange = templatedTileLayer._pxBoundsToTileRange(pixelBounds); + let obj = []; + for (let j = tileRange.min.y; j <= tileRange.max.y; j++) { + for (let i = tileRange.min.x; i <= tileRange.max.x; i++) { + const coords = new L.Point(i, j); + coords.z = templatedTileLayer._tileZoom; + obj.push(coords); + } + } + return obj; + } else if (this.units === 'tile' || this.units === 'map') { + // used for query handler on map enter or click. + // mapi, tilei, mapj, tilej used for query handling, value is derived from the mouse click event + // or center of the map when used with keyboard. } return; } From b1298c17afdfcc0f63c817f1bd63448ca4bb590a Mon Sep 17 00:00:00 2001 From: Aliyan Haq <55751566+AliyanH@users.noreply.github.com> Date: Thu, 8 Jun 2023 13:18:34 -0400 Subject: [PATCH 4/4] initial map-link setup --- Gruntfile.js | 2 ++ index.html | 8 ++++---- src/map-link.js | 27 ++++++++++++++++++++++++++- src/mapml-viewer.js | 2 ++ src/web-map.js | 4 ++++ 5 files changed, 38 insertions(+), 5 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 5073aa0b6..e4edb69fe 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -30,6 +30,8 @@ module.exports = function(grunt) { 'dist/map-feature.js': ['src/map-feature.js'], 'dist/map-extent.js': ['src/map-extent.js'], 'dist/map-input.js': ['src/map-input.js'], + 'dist/map-link.js': ['src/map-link.js'], + // temporary, will be bundled into mapml.js possibly 'dist/zoomInput.js': ['src/mapml/elementSupport/inputs/zoomInput.js'], 'dist/hiddenInput.js': ['src/mapml/elementSupport/inputs/hiddenInput.js'], 'dist/widthInput.js': ['src/mapml/elementSupport/inputs/widthInput.js'], diff --git a/index.html b/index.html index f4c9151cd..cbf7b56a3 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@ - + @@ -107,7 +107,7 @@ - @@ -138,6 +138,6 @@ tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?i={i}&j={j}&service=WMS&version=1.3.0&request=GetFeatureInfo&layers=public:fdr_current&QUERY_LAYERS=current:fdr_current&styles=&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&srs=EPSG:3978&INFO_FORMAT=text/html&m4h=t" > - + --> diff --git a/src/map-link.js b/src/map-link.js index 969bf7a41..2ebf0ed70 100644 --- a/src/map-link.js +++ b/src/map-link.js @@ -149,5 +149,30 @@ export class MapLink extends HTMLElement { } connectedCallback() {} disconnectedCallback() {} + + // Resolve the templated URL with info from the sibling map-input's + resolve() { + if (this.tref) { + let obj = {}; + const inputs = this.parentElement.querySelectorAll('map-input'); + if (this.rel === 'image') { + // image/map + for (let i = 0; i < inputs.length; i++) { + const inp = inputs[i]; + obj[inp.name] = inp.value; + } + console.log(obj); // DEBUGGING + return L.Util.template(this.tref, obj); + } else if (this.rel === 'tile') { + // TODO. Need to get tile coords from moveend + // should be done/called from the TemplatedTilelayer.js file + return obj; + } else if (this.rel === 'query') { + // TODO. Need to get the click coords from click event + // should be done/called from the templatedlayer.js file + } else if (this.rel === 'features') { + // TODO. + } + } + } } -window.customElements.define('map-link', MapLink); diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js index fb2c61b8a..e551569ab 100644 --- a/src/mapml-viewer.js +++ b/src/mapml-viewer.js @@ -6,6 +6,7 @@ import { MapCaption } from './map-caption.js'; import { MapFeature } from './map-feature.js'; import { MapExtent } from './map-extent.js'; import { MapInput } from './map-input.js'; +import { MapLink } from './map-link.js'; export class MapViewer extends HTMLElement { static get observedAttributes() { @@ -1306,3 +1307,4 @@ window.customElements.define('map-caption', MapCaption); window.customElements.define('map-feature', MapFeature); window.customElements.define('map-extent', MapExtent); window.customElements.define('map-input', MapInput); +window.customElements.define('map-link', MapLink); diff --git a/src/web-map.js b/src/web-map.js index ff03f80ae..cc2154725 100644 --- a/src/web-map.js +++ b/src/web-map.js @@ -6,6 +6,8 @@ import { MapArea } from './map-area.js'; import { MapCaption } from './map-caption.js'; import { MapFeature } from './map-feature.js'; import { MapExtent } from './map-extent.js'; +import { MapInput } from './map-input.js'; +import { MapLink } from './map-link.js'; export class WebMap extends HTMLMapElement { static get observedAttributes() { @@ -1371,3 +1373,5 @@ window.customElements.define('map-area', MapArea, { extends: 'area' }); window.customElements.define('map-caption', MapCaption); window.customElements.define('map-feature', MapFeature); window.customElements.define('map-extent', MapExtent); +window.customElements.define('map-input', MapInput); +window.customElements.define('map-link', MapLink);