plugins_feature_info.mjs

/**
@module /plugins/feature_info
*/

/**
@function feature_info
@description
The feature_info plugin method creates a button for the mapButton list.

The button will toggle a custom highlight interaction with the getFeature method displaying the feature info in a popup.

@param {mapview} mapview The mapview for the highlight feature info interaction.
@param {Object} plugin The plugin config object from the locale.

@property {boolean} [plugin.log] Log the feature in the dev console.
@property {boolean} [plugin.features] Include the cluster features[] label in the output.
*/

export function feature_info(plugin, mapview) {

  const btnColumn = document.getElementById('mapButton');

  // The btnColumn element only exists in the default mapp view.
  if (!btnColumn) return;

  const btn = mapp.utils.html.node`
      <button
        title=${mapp.dictionary.toolbar_current_location}
        onclick=${toggleFeatureInfoHighlight}><div class="mask-icon feature-info">`;

  btnColumn.append(btn);

  function toggleFeatureInfoHighlight() {

    if (btn.firstChild.classList.toggle('active')) {

      mapview.interactions.highlight({
        getFeature: feature => {

          const featureProperties = feature.F.getProperties()

          // The OL Styles array is meaningless for the feature_info popup.
          delete featureProperties.Styles

          if (!plugin.geometry) {

            delete featureProperties.geometry
          }

          // Check for cluster feature.
          if (Array.isArray(featureProperties.features)) {

            // Reduce features to length or properties dependent on the flag.
            featureProperties.features = plugin.features
              ? featureProperties.features.map(F => F.getProperties()[feature.layer.cluster.label])
              : featureProperties.features.length
          }

          if (plugin.log) {

            console.log(feature.F)
          }

          const feature_info = {
            id: feature.id,
            layer: feature.layer.key,
            properties: featureProperties,
          }

          const content = mapp.utils.html.node`<pre
            style="padding: 1em;"
            >${JSON.stringify(feature_info, undefined, 2)}`

          mapview.popup({
            content
          })
        },
        callback: () => {
          btn.firstChild.classList.remove('active')
        }
      });

    } else {

      mapview.interactions.highlight()
    };

  }
}