ui_locations_entries_pin.mjs

/**
## ui/locations/entries/pin

The pin entry module exports the pin method as mapp.ui.locations.entries.pin()

@module /ui/locations/entries/pin
*/

mapp.utils.merge(mapp.dictionaries, {
  en: {
    pin: 'Pin',
  },
  de: {
    pin: 'Pin',
  },
  zh: {
    pin: '标注',
  },
  zh_tw: {
    pin: '標注',
  },
  pl: {
    pin: 'Oznacz',
  },
  fr: {
    pin: 'Marquer',
  },
  ja: {
    pin: 'ピン',
  },
  esp: {
    pin: 'Marcar',
  },
  tr: {
    pin: 'Sabitle',
  },
  it: {
    pin: 'Pin',
  },
  th: {
    pin: 'เข็มหมุด',
  },
});

/**
@function pin

@description
Places a pin on the selected location on the map. A checkbox is supplied to turn the pin on and off.

The pin will be styled by the entry.style property if provided. Otherwise the location.pinStyle assigned by the locations [listview]{@link module:/ui/locations/listview~listview} method will be used. A location may not have a pinStyle if no listview has been configured for the mapview.

@param {infoj-entry} entry type:pin entry.
@property {location} entry.location The entry location.
@property {array} entry.value An array containing entrys' co-ordinates.
@property {string} [entry.label] Label for checkbox element.
@property {boolean} [entry.display] The pin display flag.
@property {string} [entry.srid] The srid of the pin.
@property {integer} [entry.zIndex] The html layer on which the pin should display.
@property {object} [entry.style] Style properties of the pin which may include a scale.

@return {HTMLElement} Location pin and display checkbox.
*/
export default function pin(entry) {
  if (!Array.isArray(entry.value)) {
    console.warn(`Entry type pin requires a value array.`);
    return;
  }

  // Assign srid from location.layer if not implicit.
  entry.srid ??= entry.location.layer.srid;

  // Remove existing pin layer
  entry.location.layer.mapview.Map.removeLayer(entry.L);

  entry.zIndex ??= Infinity;

  entry.Style ??= entry.style
    ? mapp.utils.style(entry.style)
    : entry.location.pinStyle;

  entry.srid ??= entry.location.layer.srid;

  entry.geometry = {
    type: 'Point',
    coordinates: entry.value,
  };

  if (entry.L) {
    entry.location.layer.mapview.Map.removeLayer(entry.L);

    // Layer object must be filtered from the Layers array before being deleted.
    entry.location.Layers = entry.location.Layers.filter(
      (L) => L.ol_uid !== entry.L.ol_uid,
    );

    delete entry.L;
  }

  entry.L = entry.location.layer.mapview.geoJSON(entry);

  entry.location.layer.display && entry.location.layer.L?.changed();

  entry.location.Layers.push(entry.L);

  const chkbox = mapp.ui.elements.chkbox({
    label: `${entry.label || mapp.dictionary.pin}`,
    checked: true,
    onchange: (checked) => {
      entry.display = checked;
      checked
        ? entry.location.layer.mapview.Map.addLayer(entry.L)
        : entry.location.layer.mapview.Map.removeLayer(entry.L);
    },
  });

  const node = mapp.utils.html.node`${chkbox}`;

  return node;
}