msfd_portal_hcmr/public/js/layers.js

var geoJsonGroup = new L.LayerGroup();
var layerControls = {};
var layersList = [
  {
    code: "POSEIDON",
    name: "Poseidon Stations",
    geotype: 'point',
    style: {
      radius: 8,
      fillColor: "#ff7800",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    },
    format: 'geojson',
    active: false,
    leafletid: null
  },{
    name: "ARGO Stations",
    code: "argo_stations",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    name: "WFD Stations",
    code: "coastal_wfd",
    format: 'geojson',
    geotype: 'point',
    active: false,
    leafletid: null
  },{
    name: "Beach Stations",
    code: "beach_stations",
    format: 'geojson',
    geotype: 'point',
    style: {
      radius: 8,
      fillColor: "#ff7800",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    },
    active: false,
    leafletid: null
  },{
    name: "Open Sea Stations",
    code: "cruise_stations",
    format: 'geojson',
    geotype: 'point',
    active: false,
    leafletid: null
  },{
    code: "cruise_2018",
    name: "Cruise 2018",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2019_a",
    name: "Cruise 2019 A",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2019_b",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2020_a",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2020_b",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2021_a",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2021_b",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2019_a_inale",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2019_b_inale",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2021_a_inale",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2021_b_inale",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "cruise_2021_c_inale",
    format: 'geojson',
    geotype: 'linestring',
    active: false,
    leafletid: null
  },{
    code: "grid_10km_3035",
    format: 'image',
    active: false,
    leafletid: null
  },{
    code: "grid_25km_3035",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: 'Marine Natura Sites (Monitored under D1)',
    code: "v_marine_natura2000_end2021_epsg3035_sitetype", //"marine_natura2000_end2021_epsg3035",
    format: 'image',
    active: false,
    leafletid: null
  },{
    code: "ms_el_mediterranean_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    code: "mad_el_ms_ad_adriatic_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    code: "mic_el_ms_io_ionian_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    code: "mal_el_ms_al_aegean_levantine_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: "Aegean-Levantine subregion – Aegean Sea",
    code: "mal_el_aa_ae_aegean_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: "Aegean-Levantine subregion – North Aegean Sea",
    code: "mal_el_aa_na_north_aegean_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: 'Aegean-Levantine subregion – Central and South Aegean Sea',
    code: "mal_el_aa_csa_central_south_aegean_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: 'Aegean-Levantine subregion - Levantine Sea',
    code: "mal_el_aa_le_levantine_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: "Coastal Waters",
    code: "v_el_mrus_nov2021_epsg3035_coastal_waters",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: 'Coastal Water Bodies (WFD)',
    code: "v_el_mrus_nov2021_epsg3035_coasts",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: "Territorial Waters",
    code: "v_el_mrus_nov2021_epsg3035_territorial",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: 'Territorial Part beyond Coastal Waters',
    code: "v_el_mrus_nov2021_epsg3035_territorial_from_coastal",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: 'Beyond Territorial Waters',
    code: "v_el_mrus_nov2021_epsg3035_beyond_territorial",
    format: 'image',
    active: false,
    leafletid: null
  },{
    code: "mal_el_aa_na_north_aegean_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    code: "mal_el_aa_csa_central_south_aegean_assessment_area",
    format: 'image',
    active: false,
    leafletid: null
  },{
    name: 'EMODNET Bathymetry',
    active: false,
    format: 'image',
    leafletid: null,
    code: 'DPTH'
  },{
    name: 'EMODNET Habitats',
    active: false,
    format: 'image',
    leafletid: null,
    code: 'HABT'
  },{
    name: 'EMODNET Chemistry',
    active: false,
    format: 'image',
    leafletid: null,
    code: 'CHEM'
  },{
    name: 'EMODNET Chemistry',
    active: false,
    format: 'image',
    leafletid: null,
    code: 'CHEM_PHPL'
  },{
    name: 'Probability of coralligenous habitat in the Mediterranean (MEDISEH)',
    active: false,
    format: 'image',
    leafletid: null,
    isProduct: true,
    endpoint: "https://ows.emodnet-seabedhabitats.eu/geoserver/emodnet_view_maplibrary/wms",
    legend: "https://ows.emodnet-seabedhabitats.eu/geoserver/emodnet_view_maplibrary/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=mediseh_cora",
    code: 'mediseh_cora'
  },{
    name: 'Probability of maerl habitat in the Mediterranean (MEDISEH)',
    active: false,
    format: 'image',
    leafletid: null,
    isProduct: true,
    endpoint: "https://ows.emodnet-seabedhabitats.eu/geoserver/emodnet_view_maplibrary/wms",
    legend: "https://ows.emodnet-seabedhabitats.eu/geoserver/emodnet_view_maplibrary/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=mediseh_cora",
    code: 'mediseh_maerl'
  },{
    name: 'Probability of Posidonia oceanica in the Mediterranean (MEDISEH)',
    active: false,
    format: 'image',
    leafletid: null,
    isProduct: true,
    endpoint: "https://ows.emodnet-seabedhabitats.eu/geoserver/emodnet_view_maplibrary/wms",
    legend: "https://ows.emodnet-seabedhabitats.eu/geoserver/emodnet_view_maplibrary/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=mediseh_posidonia",
    code: 'mediseh_posidonia'
  },{
    name: 'Seagrass Meadows (<a target="_blank" class="is-link has-text-link" href="https://doi.org/10.1515/bot-2022-0011">citation</a>)',
    active: false,
    format: 'image',
    leafletid: null,
    code: 'greek_seagrass_meadows_v0906_espg3035',
  },{
    name: 'Ecological Status 2018',
    code: 'wfd_eco_status_2018',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Ecological Status 2019',
    code: 'wfd_eco_status_2019',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Ecological Status 2020',
    code: 'wfd_eco_status_2020',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Ecological Status 2021',
    code: 'wfd_eco_status_2021',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'BMI Status 2018',
    code: 'wfd_bmi_status_2018',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'BMI Status 2019',
    code: 'wfd_bmi_status_2019',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'BMI Status 2020',
    code: 'wfd_bmi_status_2020',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'BMI Status 2021',
    code: 'wfd_bmi_status_2021',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'MA Status 2018',
    code: 'wfd_ma_status_2018',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'MA Status 2019',
    code: 'wfd_ma_status_2019',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'MA Status 2020',
    code: 'wfd_ma_status_2020',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'MA Status 2021',
    code: 'wfd_ma_status_2021',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'AN Status 2018',
    code: 'wfd_an_status_2018',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'AN Status 2019',
    code: 'wfd_an_status_2019',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'AN Status 2020',
    code: 'wfd_an_status_2020',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'AN Status 2021',
    code: 'wfd_an_status_2021',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chl-a Status 2018',
    code: 'wfd_chla_status_2018',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chl-a Status 2019',
    code: 'wfd_chla_status_2019',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chl-a Status 2020',
    code: 'wfd_chla_status_2020',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chl-a Status 2021',
    code: 'wfd_chla_status_2021',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'PCQI Status 2018',
    code: 'wfd_chla_status_2018',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'PCQI Status 2019',
    code: 'wfd_chla_status_2019',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'PCQI Status 2020',
    code: 'wfd_chla_status_2020',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'PCQI Status 2021',
    code: 'wfd_pcqi_status_2021',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chemi Status 2018',
    code: 'wfd_chem_status_2018',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chem Status 2019',
    code: 'wfd_chem_status_2019',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chem Status 2020',
    code: 'wfd_chem_status_2020',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Chem Status 2021',
    code: 'wfd_chem_status_2021',
    active: false,
    format: 'image',
    leafletid: null,
  },{
    name: 'Annual Fisheries Production per year',
    code: 'AFPPY',
    active: false,
    format: 'image',
    leafletid: null
  },

];


async function layerTreeSwitch(node) {
  const intId = node.data.code;
  // called everytime a layer is activated/deactivated
  if (typeof intId == 'undefined') {
    return;
  }
  const layer = await db.layers.where('code').equals(intId).first();

  let leafletId = layer.leafletid;
  let l;
  if (!layer.active && node.checkStatus) {
    if (intId === 'DPTH') {
      l = getBathymetry();
      mapL.on('click', e => {
        getDepthOnPoint(e.latlng);
      });
    } else if (intId === 'HABT') {
      l = getHabitat(layer.code);
    } else if (layer.isProduct) {
      l = getProduct(layer);
    } else if (intId === 'AFPPY') {
      l = await getFisheriesProduct();
    } else if (intId === 'PHPL') {
      l = getWMSSeries(node.checkStatus);
    } else if (intId.substr(0,3) === 'wfd') {
      l = getWFD(intId);
    } else if (layer.format === 'image') {
      l = L.tileLayer.betterWms(BASE_URL + '/geoserver/wms', { layers: intId, transparent: true, format: "image/png"});
    } else {
      l = await fetchGeoJson(layer.code);
      console.debug(l);
      l.layerGroup = layer.code;
      console.debug("geojson layer: ", l);
      let options = {};
      options.onEachFeature = onEachFeature;
      if (layer.geotype === 'point') {
        options.pointToLayer = function(feature, latlng) {
          return L.circleMarker(latlng, layer.style);
        };
      } else if (layer.geotype === 'linestring') {
        options.style = function(feature, layer) {
          return styleLine();
        }
      }
      l = L.geoJSON(l, options);
    }
    console.debug("wms layer: ", l);
    l.addTo(mapL);
    leafletId = l._leaflet_id;
    console.debug("assigned leaflet id: ", leafletId);
  } else {
    console.debug("hide layer", layer.code);
    if (layer.format === 'geojson')
      mapL._layers[layer.leafletid].clearLayers();
    try {
      mapL._layers[layer.leafletid].remove();
    } catch (error) {
      console.log('no layer with that id');
    }
    clearLegend(layer.code);
    mapL.off('click');
    try {
      layerControls[layer.code].remove();
    } catch (err) {
      console.log('layer has no controls');
    }
  }
  db.layers.update(layer.id, {active: !layer.active, leafletid: leafletId});

  return;
}


function clearLegend(layerCode) {
  try{
    legends[layerCode].remove();
  } catch (error) {
    console.debug('layer has no legend');
  }
}