@trailstash/ultra/lib/queryMap.js

A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc

import maplibregl from "maplibre-gl";
import equal from "fast-deep-equal";

import { h } from "../lib/dom.js";

let currentPopup;
let currentFeatures;

export const handleMouseMove = (
  e,
  popupTemplate,
  popupContextBuilder,
  querySources,
  onHover = false,
) => {
  if (popupTemplate === false) {
    return;
  }
  const features = e.target
    .queryRenderedFeatures(e.point)
    .filter((l) => querySources?.includes(l.source));
  if (features.length > 0) {
    e.target.getCanvas().style.cursor = "pointer";
  } else {
    e.target.getCanvas().style.cursor = "";
  }
  if (onHover) {
    handleMouseClick(e, popupTemplate, popupContextBuilder, querySources);
  }
};

export const handleMouseClick = (
  e,
  popupTemplate,
  popupContextBuilder,
  querySources,
) => {
  if (popupTemplate === false) {
    return;
  }
  const features = e.target
    .queryRenderedFeatures(e.point)
    .filter((l) => querySources?.includes(l.source));
  const distinctFeatures = {};
  for (const f of features) {
    distinctFeatures[f.id] = f;
  }
  if (
    equal(currentFeatures, distinctFeatures) &&
    currentPopup &&
    e.type !== "click"
  ) {
    currentPopup.setLngLat(e.lngLat);
    return;
  }
  currentFeatures = distinctFeatures;
  if (currentPopup) {
    currentPopup.remove();
  }
  const popup = h("map-popup");
  popup.features = distinctFeatures;
  if (popupTemplate) {
    popup.template = popupTemplate;
  }
  if (popupContextBuilder) {
    popup.contextBuilder = popupContextBuilder;
  }
  if (features.length > 0) {
    currentPopup = new maplibregl.Popup()
      .setMaxWidth("400px")
      .setLngLat(e.lngLat)
      .setDOMContent(popup)
      .addTo(e.target);
  }
};