main.js

const suffix = [
  { name: '*rup', suffix: 'rup', color: 'red' },
  { name: '*by', suffix: 'by', color: 'green' },
  { name: '*huse', suffix: 'huse', color: 'rgb(139, 0, 0)' },
  { name: '*sted', suffix: 'sted', color: 'orange' },
  { name: '*lev', suffix: 'lev', color: 'yellow' },
  { name: '*skov', suffix: 'skov', color: 'greenyellow' },
  { name: '*høj', suffix: 'høj', color: 'tomato' },
  { name: '*rød', suffix: 'rød', color: 'aqua' },
  { name: '*borg', suffix: 'borg', color: 'palegoldenrod' },
  { name: '*holm', suffix: 'holm', color: 'sienna' },
  { name: '*bæk', suffix: 'bæk', color: 'peachpuff' },
  { name: '*bro', suffix: 'bro', color: 'darkturquoise' },
  { name: '*lund', suffix: 'lund', color: 'darkkhaki' },
  { name: '*løse', suffix: 'løse', color: 'mistyrose' },
  { name: '*sø', suffix: 'sø', color: 'darksalmon' },
  { name: '*havn', suffix: 'havn', color: 'rgb(0, 250, 154)' },
  { name: '*dal', suffix: 'dal', color: 'rgb(220, 220, 220)' },
];

let searchMode = false;
let input = '';
let selectedSuffixes = suffix.map((i) => i.suffix);

// detect if it is mobile
const mobile = isMobile.any;

styles = {
  opacity: ['case', ['==', null, ['get', 'suffix']], 0, 0.7],
  radius: ['interpolate', ['linear'], ['zoom'], 7, 2, 11, 15],
};

mapboxgl.accessToken =
  'pk.eyJ1IjoiYmFmZmlvc28iLCJhIjoiY2s5cmN6ejBvMHN5OTNnbWVxcDVobmZ2bCJ9.hEIms6er4x8Jwg6LfM4tSg';

let map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/baffioso/ck9wal8yy09p11in1tuc5t814', // stylesheet location
  center: [11, 55.5], // starting position [lng, lat]
  zoom: 5, // starting zoom
  hash: true,
});

map.on('load', () => {
  map.addControl(new mapboxgl.NavigationControl(), 'bottom-left');

  // create layercontrol
  for (const i of suffix) {
    createCheckbox(i.name, i.suffix, i.color);
  }

  map.addSource('byer', {
    type: 'geojson',
    data: 'data/bynavneendelser.geojson',
  });

  map.addLayer({
    id: 'byer',
    type: 'circle',
    source: 'byer',
    layout: {},
    paint: {
      'circle-radius': styles.radius,
      'circle-color': circleColor(suffix),
      'circle-opacity': styles.opacity,
    },
  });

  map.addLayer({
    id: 'byer-highlight',
    type: 'circle',
    source: 'byer',
    layout: {},
    paint: {
      'circle-radius': ['interpolate', ['linear'], ['zoom'], 7, 4, 11, 15],
      'circle-color': circleColor(suffix),
      'circle-opacity': 1,
    },
    filter: ['in', 'suffix', ''],
  });

  map.addLayer({
    id: 'byer-label',
    type: 'symbol',
    source: 'byer',
    layout: {
      'text-field': ['get', 'navn'],
      'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
      'text-size': 11,
      'text-letter-spacing': 0.05,
      'text-offset': [0, -1.5],
    },
    paint: {
      'text-color': 'white',
    },
    filter: ['in', 'suffix', ''],
  });

  createPopup();
});

const createPopup = () => {
  // Create a popup, but don't add it to the map yet.
  var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false,
  });

  map.on('mouseenter', 'byer', function (e) {
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = 'pointer';

    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.navn;

    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(coordinates).setHTML(description).addTo(map);
  });

  map.on('mouseleave', 'byer', function () {
    map.getCanvas().style.cursor = '';
    popup.remove();
  });
};

const toggelSelectAll = () => {
  let el = document.getElementById('select-all');
  let checkboxes = document.querySelectorAll('input[name="legend"]');

  // clear search
  searchMode = false;
  document.getElementById('search-input').value = '';
  document.getElementById('count').innerHTML = '';
  document.getElementById('count').style = 'padding-right: 0px';

  if (el.checked) {
    for (var checkbox of checkboxes) {
      checkbox.checked = true;
      selectedSuffixes = suffix.map((i) => i.suffix);
      map.setFilter('byer', ['in', 'suffix'].concat(selectedSuffixes));
    }
  } else {
    map.setFilter('byer-label', ['in', 'suffix', '']);

    for (var checkbox of checkboxes) {
      checkbox.checked = false;
      selectedSuffixes = [];
      map.setFilter('byer', ['in', 'suffix'].concat(selectedSuffixes));
      map.setPaintProperty('byer', 'circle-color', circleColor(suffix));
      map.setPaintProperty('byer', 'circle-opacity', [
        'case',
        ['==', null, ['get', 'suffix']],
        0,
        0.7,
      ]);
    }
  }
};

const createCheckbox = (name, suffix, color) => {
  // create the necessary elements
  var label = document.createElement('label');
  var description = document.createTextNode(name);
  var checkbox = document.createElement('input');

  // set element properties
  label.id = suffix;
  label.classList.add('noselect');
  checkbox.type = 'checkbox';
  checkbox.name = 'legend';
  checkbox.value = suffix;
  checkbox.checked = true;

  // Add eventlisteners
  checkbox.addEventListener('change', function (e) {
    const suf = e.target.value;

    if (this.checked) {
      selectedSuffixes.push(suf);
      map.setFilter('byer', ['in', 'suffix'].concat(selectedSuffixes));
    } else {
      selectedSuffixes.splice(selectedSuffixes.indexOf(suf), 1);
      map.setFilter('byer', ['in', 'suffix'].concat(selectedSuffixes));
    }
  });

  //  Add hover effect depending on device
  if (mobile) {
    label.addEventListener('touchstart', function (e) {
      const suffix = e.target.id;
      highlightFeatures(suffix);
    });

    label.addEventListener('touchend', function () {
      console.log('object');
      map.setFilter('byer-highlight', ['in', 'suffix', '']);
      // map.setPaintProperty('byer', 'circle-radius', styles.radius);
      map.setPaintProperty('byer', 'circle-opacity', styles.opacity);
    });
  } else {
    label.addEventListener('mouseenter', function (e) {
      const suffix = e.target.id;
      highlightFeatures(suffix);
    });

    label.addEventListener('mouseleave', function () {
      map.setFilter('byer-highlight', ['in', 'suffix', '']);
      // map.setPaintProperty('byer', 'circle-radius', styles.radius);
      map.setPaintProperty('byer', 'circle-opacity', styles.opacity);
    });
  }

  label.appendChild(checkbox); // add the box to the element
  label.appendChild(description); // add the description to the element

  // add the label element to the div
  document.getElementById('suffix').appendChild(label).style.color = color;
};

const highlightFeatures = (suffix) => {
  map.setFilter('byer-highlight', ['==', suffix, ['get', 'suffix']]);
  map.setPaintProperty('byer', 'circle-opacity', 0.1);
};

const circleColor = (data) => {
  // create mapbox style expression for markers
  let style = data.reduce(
    (prev, curr) => {
      prev.push(curr.suffix, curr.color);
      return prev;
    },
    ['match', ['get', 'suffix']]
  );

  // default color
  style.push('lightgray');

  return style;
};

const searchFilter = () => {
  searchMode = true;
  input = document.getElementById('search-input').value;
  let counterElem = document.getElementById('count');

  if (input.length > 0) {
    // Filter features and apply single style
    const filter = ['in', input.toUpperCase(), ['upcase', ['get', 'navn']]];
    map.setFilter('byer', filter);
    map.setPaintProperty('byer', 'circle-opacity', 0.8);
    map.setPaintProperty('byer', 'circle-color', 'rgb(53, 175, 109)');

    // Filter labels
    map.setFilter('byer-label', filter);

    // Feature count
    map.on('render', () => {
      if (input.length > 0 && searchMode) {
        const feat = map.queryRenderedFeatures({
          layers: ['byer'],
          filter: filter,
        });
        const unique = getUniqueFeatures(feat, 'id');
        document.getElementById('count').innerHTML = '(' + unique.length + ')';
        document.getElementById('count').style = 'padding-right: 8px';
      }
    });
  } else {
    map.setFilter('byer-label', ['in', 'suffix', '']);
    map.setFilter('byer', ['in', 'suffix'].concat(selectedSuffixes));
    map.setPaintProperty('byer', 'circle-color', circleColor(suffix));
    map.setPaintProperty('byer', 'circle-opacity', [
      'case',
      ['==', null, ['get', 'suffix']],
      0,
      0.7,
    ]);
    document.getElementById('count').innerHTML = '';
    document.getElementById('count').style = 'padding-right: 0px';
  }
};

const getUniqueFeatures = (array, comparatorProperty) => {
  var existingFeatureKeys = {};
  // Because features come from tiled vector data, feature geometries may be split
  // or duplicated across tile boundaries and, as a result, features may appear
  // multiple times in query results.
  var uniqueFeatures = array.filter(function (el) {
    if (existingFeatureKeys[el.properties[comparatorProperty]]) {
      return false;
    } else {
      existingFeatureKeys[el.properties[comparatorProperty]] = true;
      return true;
    }
  });

  return uniqueFeatures;
};