static/js/map-helper-functions.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

// Useful functions for interacting with markers

const animation_duration = 1250;

function get_marker_img_name(marker_img) {
  const img_parts = marker_img.src.split('/');
  return img_parts[img_parts.length - 1];
}

function open_marker(marker_img) {
  const img_name = get_marker_img_name(marker_img);
  marker_img.src = `/static/images/${img_name}`;
  marker_img.classList.remove('marker-img-hoverable');
  marker_img.classList.add('marker-img-open');

}

function close_marker(marker_img) {
  const img_name = get_marker_img_name(marker_img);
  marker_img.src = `/static/thumbnail/${img_name}`;
  marker_img.classList.add('marker-img-hoverable');
  marker_img.classList.remove('marker-img-open');
}

function close_all_markers(exclude=[]) {
  const open_imgs = map_element.getElementsByClassName('maplibregl-canvas-container')[0].getElementsByClassName('marker-img-open')
  for (let i = 0; i < open_imgs.length; i++) {
    if (!exclude.includes(open_imgs[i])) {
      close_marker(open_imgs[i]);
    }
  }
}

function toggle_marker_open(marker_img) {
  // Close marker if open, open it, if closed

  if (marker_img.classList.contains('marker-img-open'))
  {
    close_marker(marker_img)
  } else {
    open_marker(marker_img)
  }
}

function focus_marker(marker, open=true, ) {
  map.flyTo({
    center: marker.getLngLat(),
    zoom: map.getZoom() < cluster_max_zoom ? cluster_max_zoom + 1.1 : map.getZoom(),
    duration: animation_duration,
  });
  if (open) {
    const marker_img = marker.getElement().children[0];
    close_all_markers([marker_img])
    setTimeout(function() { // Run open animation after flyto animation
      open_marker(marker_img);
    }, animation_duration + 100);
  }
}