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();
    }
  }
}