Merge pull request #1601 from dbauszus-glx/mapview-layer-changeend-ev…

…ents

remove mapp.layer changeend method

lib/layer/_layer.mjs

@@ -25,7 +25,6 @@ A mapp-layer object is a decorated JSON layer object which has been added to a m
 import decorate from './decorate.mjs';
 import formats from './format/_format.mjs';
 import fade from './fade.mjs';
-import changeEnd from './changeEnd.mjs'
 import featureHover from './featureHover.mjs';
 import * as featureFormats from './featureFormats.mjs';
 import * as featureFields from './featureFields.mjs';
@@ -38,7 +37,6 @@ import graduated from './themes/graduated.mjs';
 
 export default {
   decorate,
-  changeEnd,
   formats,
   featureFormats,
   featureFields,

lib/layer/decorate.mjs

@@ -30,7 +30,6 @@ The layer decorator method create mapp-layer typedef object from a json-layer.
 
 @returns {layer} Decorated Mapp Layer.
 */
-
 export default async function decorate(layer) {
 
   // Decorate layer format methods.
@@ -39,6 +38,12 @@ export default async function decorate(layer) {
   // If layer does not exist, return.
   if (!layer.L) return;
 
+  // The layer may be zoom level restricted.
+  if (layer.tables || layer.params?.viewport) {
+    layer.mapview.Map.getTargetElement()
+      .addEventListener('changeEnd', () => changeEnd(layer))
+  }
+
   // Assign show, hide, and other methods to the layer object.
   Object.assign(layer, {
     show,
@@ -102,9 +107,10 @@ export default async function decorate(layer) {
 }
 
 /**
-Shows the layer on the map.
 @function show
-@memberof module:/layer/decorate
+
+@description
+Shows the layer on the map.
 */
 function show() {
 
@@ -132,10 +138,11 @@ function show() {
 }
 
 /**
- * Hides the layer from the map.
- * @memberof module:layer/decorate
- * @function hide
- */
+@function hide
+
+@description
+Hides the layer from the map.
+*/
 function hide() {
 
   this.display = false;
@@ -156,11 +163,13 @@ function hide() {
 }
 
 /**
- * Returns the current table associated with the layer.
- * @memberof module:layer/decorate
- * @function tableCurrent
- * @returns {string} - The current table associated with the layer.
- */
+@function tableCurrent
+
+@description
+Returns the current table associated with the layer.
+
+@returns {string} The current table associated with the layer.
+*/
 function tableCurrent() {
 
   // Return the current table if it exists.
@@ -191,11 +200,13 @@ function tableCurrent() {
 }
 
 /**
- * Returns the current geometry associated with the layer.
- * @memberof module:layer/decorate
- * @function geomCurrent
- * @returns {string} - The current geometry associated with the layer.
- */
+@function geomCurrent
+
+@description
+Returns the current geometry associated with the layer.
+
+@returns {string} The current geometry associated with the layer.
+*/
 function geomCurrent() {
   // Return the current geometry if it exists.
   if (!this.geoms) return this.geom;
@@ -225,13 +236,15 @@ function geomCurrent() {
 }
 
 /**
- * Zooms to a specific extent on the map.
- * @memberof module:layer/decorate
- * @async
- * @function zoomToExtent
- * @param {Object} params - Parameters for zooming to extent.
- * @returns {Promise<boolean>} - A promise that resolves with a boolean indicating the success of the operation.
- */
+@function zoomToExtent
+@async
+
+@description
+Zooms to a specific extent on the map.
+
+@param {Object} params - Parameters for zooming to extent.
+@returns {Promise<boolean>} A promise that resolves with a boolean indicating the success of the operation.
+*/
 async function zoomToExtent(params) {
   // Zooms to a specific extent.
 
@@ -264,4 +277,34 @@ async function zoomToExtent(params) {
   );
 
   return true;
-}
+}
+
+function changeEnd(layer) {
+
+  // Layer is out of zoom range.
+  if (!layer.tableCurrent()) {
+
+    if (layer.display) {
+
+      // Layer should be shown if possible.
+      layer.zoomDisplay = true
+      layer.hide()
+    }
+
+    return;
+  }
+
+  if (layer.zoomDisplay) {
+
+    // Prevents layer.show() being fired on zoom change within range.
+    delete layer.zoomDisplay
+
+    // Show layer if within zoomDisplay range.
+    layer.show()
+  }
+
+  if (layer.params.viewport) {
+
+    layer.reload()
+  }
+}

lib/layer/format/mvt.mjs

@@ -3,8 +3,8 @@
 This module defines the MVT (MapBox Vector Tile) format for map layers.
 
 @requires /layer/styleParser
-@requires /layer/changeEnd
 @requires /layer/featureStyle
+@requires /layer/featureFormats
 
 @module /layer/formats/mvt
 */
@@ -19,8 +19,6 @@ The SRID of an MVT layer must be 3857.
 
 The MVT format method will call the styleParser to check the layer.style{} configuration.
 
-A changeEnd() event method for the layer will be assigned to the mapview.Map target.
-
 A layer.reload() method will be assigned to reload the layer data from rest.
 
 A layer.featureSource will be assigned for feature geometries.
@@ -62,16 +60,13 @@ export default function MVT(layer) {
   // MVT query must not have a viewport, this is defined by the tile extent.
   delete layer.params.viewport
 
-  // Assigns changeEnd event/method for zoom restricted layers.
-  mapp.layer.changeEnd(layer)
-
   layer.reload = reload
 
   /**
   @function reload
 
   @description
-  The reload method executes the changeEndLoad method for MVT layer with wkt_properties features.
+  The reload method executes the wktPropertiesLoad method for MVT layer with wkt_properties features.
 
   Otherwise the source and featureSource [Openlayers VectorTile]{@link https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile.html} sources are cleared and refreshed.
 
@@ -82,7 +77,7 @@ export default function MVT(layer) {
   function reload(callback) {
 
     if (layer.wkt_properties) {
-      changeEndLoad(layer)
+      wktPropertiesLoad(layer)
       return;
     }
 
@@ -117,14 +112,12 @@ export default function MVT(layer) {
   // Assign wkt properties load method.
   if (layer.wkt_properties) {
     layer.source.setTileUrlFunction(wktTileUrlFunction(layer))
-
-    layer.mapview.Map.getTargetElement().addEventListener('changeEnd', () => changeEndLoad(layer));
+    layer.mapview.Map.getTargetElement().addEventListener('changeEnd', () => wktPropertiesLoad(layer));
 
   } else if (layer.featureLookup) {
-
     layer.source.setTileUrlFunction(wktTileUrlFunction(layer))
-  } else {
 
+  } else {
     layer.source.setTileUrlFunction(tileUrlFunction(layer))
   }
 
@@ -240,15 +233,16 @@ function wktTileUrlFunction(layer) {
 }
 
 /**
-@function changeEndLoad
+@function wktPropertiesLoad
 
 @description
-The changeEndLoad method triggers the loading of feature properties to be assigned to MVT features in tiles requested from the wktTileUrlFunction() method.
+The wktPropertiesLoad method send a query to the wkt template. The response is passed to the [featureFormats.wkt_properties]{@link module:/layer/featureFormats~wkt_properties} method.
+
+Finally the layer.L.changed() method is called to trigger the [layer.featureStyle]{@link module:/layer/featureStyle~featureProperties} method which assigns feature properties from the layer.featuresObject.
 
 @param {layer} layer A decorated format:mvt mapp layer.
 */
-
-function changeEndLoad(layer) {
+function wktPropertiesLoad(layer) {
 
   layer.xhr?.abort()
 
@@ -265,10 +259,10 @@ function changeEndLoad(layer) {
   const bounds = layer.mapview.getBounds()
 
   // Assign current viewport if queryparam is truthy.
-  let viewport = [bounds.west, bounds.south, bounds.east, bounds.north, layer.mapview.srid];
+  const viewport = [bounds.west, bounds.south, bounds.east, bounds.north, layer.mapview.srid];
 
   // Assign current viewport if queryparam is truthy.
-  let z = layer.mapview.Map.getView().getZoom();
+  const z = layer.mapview.Map.getView().getZoom();
 
   layer.xhr = new XMLHttpRequest()
 
@@ -286,6 +280,7 @@ function changeEndLoad(layer) {
     // Set request params.fields for styling.
     mapp.layer.featureFormats.wkt_properties(layer, e.target.response)
 
+    // Triggers the featureStyle method.
     layer.L.changed()
   }
 
@@ -303,4 +298,4 @@ function changeEndLoad(layer) {
   })}`)
 
   layer.xhr.send()
-}
+}

lib/layer/format/vector.mjs

@@ -93,9 +93,6 @@ export default function vector(layer) {
     layer.L.setSource(layer.source)
   }
 
-  // Assigns changeEnd event/method for zoom restricted layers.
-  mapp.layer.changeEnd(layer)
-
   // Assign reload method to layer.
   layer.reload = reload;
 
@@ -109,25 +106,6 @@ export default function vector(layer) {
 
   layer.setSource(layer.features)
 
-  // Add event listener to reload layer for viewport or layer.tables on changeEnd.
-  if (layer.tables || layer.params.viewport) {
-
-    layer.mapview.Map.getTargetElement().addEventListener('changeEnd', () => {
-
-      // Layer is outside of tables zoom range.
-      if (!layer.tableCurrent()) {
-        layer.L.setSource(null)
-        return;
-      }
-
-      if (!layer.display) return;
-
-      clearTimeout(layer.timeout)
-
-      layer.timeout = setTimeout(() => layer.reload(), 100)
-    })
-  }
-
   // Change method for the cluster feature properties and layer stats.
   layer.cluster?.distance && layer.L.on('change', e => {
 

lib/location/create.mjs

@@ -24,7 +24,6 @@ The method will attempt to get the location from the layer data at rest.
 @property {Object} [interaction.defaults] defaults{} object properties are stored as field columns in the location record.
 @property {Object} [interaction.default_fields] default_fields{} object keys are assigned as interaction.defaults properties with the values used to lookup interaction object properties values.
 */
-
 export default async function createLocation(feature, interaction, layer) {
 
   // If the feature is null, return.
@@ -92,6 +91,10 @@ export default async function createLocation(feature, interaction, layer) {
   // Layer must be reloaded to reflect geometry changes.
   layer.reload();
 
+  // The changeEnd event is required for dataview updates.
+  layer.mapview.Map.getTargetElement()
+    .dispatchEvent(new CustomEvent('changeEnd'))
+
   // Get the newly created location.
   mapp.location.get(location);
 }