@mapslibvn/web 0.4.0

package/dist/index.js

@@ -0,0 +1,367 @@
+// src/map.ts
+import {
+  DEFAULT_POI_SOURCES,
+  POI_SOURCE_PROFILES,
+  attributionHtml,
+  createClient,
+  isPoiStyleLayer,
+  profileForSources
+} from "@mapslibvn/core";
+
+// src/language.ts
+import { isNameLabelLayer, nameExpression } from "@mapslibvn/core";
+function applyLanguage(gl, lang) {
+  for (const l of gl.getStyle()?.layers ?? []) {
+    if (isNameLabelLayer(l)) gl.setLayoutProperty(l.id, "text-field", nameExpression(lang));
+  }
+}
+
+// src/protocol.ts
+import { Protocol } from "pmtiles";
+var registered = false;
+function ensurePmtilesProtocol(host) {
+  if (registered) return;
+  host.addProtocol("pmtiles", new Protocol().tile);
+  registered = true;
+}
+
+// src/map.ts
+var isTheme = (s) => s === "light" || s === "dark";
+function createMap(opts, deps) {
+  const ml = deps?.maplibre ?? globalThis.maplibregl;
+  if (!ml)
+    throw new Error("C\u1EA7n maplibre-gl: import maplibre-gl ho\u1EB7c d\xF9ng b\u1EA3n UMD @mapslibvn/web/umd");
+  ensurePmtilesProtocol(ml);
+  const poiSources = opts.poiSources ?? DEFAULT_POI_SOURCES;
+  if (!profileForSources(poiSources)) {
+    const available = Object.values(POI_SOURCE_PROFILES).map((list) => list.join(",")).join(" | ");
+    throw new Error(
+      `poiSources "${poiSources.join(",")}" ch\u01B0a c\xF3 b\u1ED9 tiles; hi\u1EC7n h\u1ED7 tr\u1EE3: ${available}`
+    );
+  }
+  const places = createClient({ apiKey: opts.apiKey, baseUrl: opts.apiBase, poiSources });
+  const styleOpt = opts.style ?? "light";
+  const style = isTheme(styleOpt) ? places.styleUrl(styleOpt) : styleOpt;
+  const gl = new ml.Map({
+    container: opts.container,
+    style,
+    center: opts.center ?? [106.7, 10.776],
+    zoom: opts.zoom ?? 12,
+    attributionControl: false
+  });
+  gl.addControl(
+    new ml.AttributionControl({
+      compact: opts.compactAttribution ?? false,
+      customAttribution: attributionHtml()
+    })
+  );
+  const listeners = {
+    poiClick: /* @__PURE__ */ new Set(),
+    load: /* @__PURE__ */ new Set()
+  };
+  const emit = (k, e) => {
+    for (const fn of listeners[k]) fn(e);
+  };
+  gl.on("load", () => {
+    if (opts.lang && opts.lang !== "vi") applyLanguage(gl, opts.lang);
+    if (opts.poiLayer === false) {
+      for (const layer of gl.getStyle().layers ?? []) {
+        if (isPoiStyleLayer(layer) && gl.getLayer(layer.id)) {
+          gl.setLayoutProperty(layer.id, "visibility", "none");
+        }
+      }
+    }
+    emit("load", void 0);
+  });
+  gl.on("click", (e) => {
+    if (listeners.poiClick.size === 0 || !gl.getLayer("poi")) return;
+    const f = gl.queryRenderedFeatures(e.point, { layers: ["poi"] })[0];
+    if (!f || f.geometry.type !== "Point") return;
+    const p = f.properties;
+    emit("poiClick", {
+      id: String(p.id),
+      name: String(p.name ?? ""),
+      category: String(p.cat ?? ""),
+      group: String(p.grp ?? ""),
+      lngLat: f.geometry.coordinates
+    });
+  });
+  return {
+    gl,
+    places,
+    addMarker(o) {
+      const marker = new ml.Marker(o.color ? { color: o.color } : void 0).setLngLat([
+        o.lng,
+        o.lat
+      ]);
+      if (o.popupHtml) marker.setPopup(new ml.Popup({ offset: 24 }).setHTML(o.popupHtml));
+      return marker.addTo(gl);
+    },
+    fitBounds(bbox, padding = 40) {
+      gl.fitBounds(
+        [
+          [bbox[0], bbox[1]],
+          [bbox[2], bbox[3]]
+        ],
+        { padding }
+      );
+    },
+    flyTo(center, zoom) {
+      gl.flyTo(zoom === void 0 ? { center } : { center, zoom });
+    },
+    on(event, handler) {
+      listeners[event].add(handler);
+    },
+    off(event, handler) {
+      listeners[event].delete(handler);
+    },
+    remove() {
+      gl.remove();
+    }
+  };
+}
+
+// src/autocomplete-element.ts
+import {
+  createClient as createClient2,
+  parsePoiSourcesCsv
+} from "@mapslibvn/core";
+var STYLE = `
+:host { display: block; position: relative; color: #172033; font: 14px system-ui, sans-serif; }
+input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #9ca8ba;
+  border-radius: 8px; color: inherit; background: #fff; font: inherit; outline: none; }
+input:focus { border-color: #2458a6; box-shadow: 0 0 0 3px rgba(36,88,166,.18); }
+ul { position: absolute; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
+  background: #fff; border: 1px solid #c7cfda; border-radius: 8px; z-index: 30;
+  max-height: 280px; overflow-y: auto; box-shadow: 0 8px 24px rgba(23,32,51,.16); }
+li { padding: 8px 10px; border-radius: 5px; cursor: pointer; }
+li:hover, li[aria-selected="true"] { background: #e9f1fc; }
+.secondary { color: #667085; font-size: 12px; display: block; margin-top: 2px; }
+.icon { display: inline-block; width: 1.2em; color: #667085; font-size: 12px; }
+li[data-type="area"] .icon { color: #2458a6; }
+.status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+`;
+var instanceId = 0;
+var TYPE_ICON = {
+  poi: "\u25CF",
+  street: "\u2500",
+  address: "\u2302",
+  area: "\u25A3"
+};
+var MapsLibVNAutocomplete = class extends HTMLElement {
+  static observedAttributes = ["api-key", "api-base", "placeholder", "near", "sources"];
+  #map = null;
+  /** Gán map trả về từ createMap để dùng cùng Places client và tâm bản đồ. */
+  get map() {
+    return this.#map;
+  }
+  set map(value) {
+    if (value === this.#map) return;
+    this.#map = value;
+    clearTimeout(this.#timer);
+    this.#seq++;
+    this.#render([]);
+  }
+  #client = null;
+  #input = null;
+  #list = null;
+  #status = null;
+  #items = [];
+  #timer;
+  #seq = 0;
+  #activeIndex = -1;
+  #listId = `mapslibvn-autocomplete-${++instanceId}`;
+  connectedCallback() {
+    if (this.#input) return;
+    const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+    root.innerHTML = `<style>${STYLE}</style><input type="search" role="combobox" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-controls="${this.#listId}" /><ul id="${this.#listId}" role="listbox" hidden></ul><div class="status" role="status" aria-live="polite"></div>`;
+    this.#input = root.querySelector("input");
+    this.#list = root.querySelector("ul");
+    this.#status = root.querySelector(".status");
+    if (!this.#input || !this.#list || !this.#status) return;
+    this.#input.placeholder = this.getAttribute("placeholder") ?? "T\xECm \u0111\u1ECBa \u0111i\u1EC3m\u2026";
+    this.#input.addEventListener("input", this.#onInput);
+    this.#input.addEventListener("keydown", this.#onKeydown);
+    this.#input.addEventListener("blur", this.#onBlur);
+    this.#list.addEventListener("pointerdown", this.#onPointerDown);
+  }
+  disconnectedCallback() {
+    clearTimeout(this.#timer);
+    this.#seq++;
+    this.#input?.removeEventListener("input", this.#onInput);
+    this.#input?.removeEventListener("keydown", this.#onKeydown);
+    this.#input?.removeEventListener("blur", this.#onBlur);
+    this.#list?.removeEventListener("pointerdown", this.#onPointerDown);
+    this.#input = null;
+    this.#list = null;
+    this.#status = null;
+  }
+  attributeChangedCallback(name) {
+    if (name === "api-key" || name === "api-base" || name === "sources") {
+      this.#client = null;
+      this.#seq++;
+    }
+    if (name === "placeholder" && this.#input)
+      this.#input.placeholder = this.getAttribute("placeholder") ?? "T\xECm \u0111\u1ECBa \u0111i\u1EC3m\u2026";
+  }
+  #onInput = () => {
+    clearTimeout(this.#timer);
+    this.#seq++;
+    const value = this.#input?.value ?? "";
+    if (value.trim().length < 2) {
+      this.#seq++;
+      this.#render([]);
+      this.#announce("");
+      return;
+    }
+    this.#announce("\u0110ang t\xECm\u2026");
+    this.#timer = setTimeout(() => void this.#query(value), 200);
+  };
+  #onBlur = () => {
+    this.#seq++;
+    this.#timer = setTimeout(() => this.#render([]), 150);
+  };
+  #onKeydown = (event) => {
+    if (event.key === "Escape") {
+      clearTimeout(this.#timer);
+      this.#seq++;
+      this.#render([]);
+      return;
+    }
+    if (this.#items.length === 0) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const delta = event.key === "ArrowDown" ? 1 : -1;
+      const start = this.#activeIndex < 0 ? delta > 0 ? -1 : 0 : this.#activeIndex;
+      this.#setActive((start + delta + this.#items.length) % this.#items.length);
+    } else if (event.key === "Enter" && this.#activeIndex >= 0) {
+      event.preventDefault();
+      this.#select(this.#activeIndex);
+    }
+  };
+  #onPointerDown = (event) => {
+    event.preventDefault();
+    const option = event.target.closest('[role="option"]');
+    if (option) this.#select(Number(option.dataset.index));
+  };
+  #getClient() {
+    if (this.#map?.places) return this.#map.places;
+    if (this.#client) return this.#client;
+    const apiKey = this.getAttribute("api-key");
+    const baseUrl = this.getAttribute("api-base");
+    if (!apiKey || !baseUrl) return null;
+    const rawSources = this.getAttribute("sources");
+    const poiSources = rawSources === null ? null : parsePoiSourcesCsv(rawSources);
+    if (rawSources !== null && !poiSources) {
+      console.warn(`<mapslibvn-autocomplete sources="${rawSources}"> kh\xF4ng h\u1EE3p l\u1EC7 \u2014 d\xF9ng m\u1EB7c \u0111\u1ECBnh`);
+    }
+    this.#client = createClient2({
+      apiKey,
+      baseUrl,
+      ...poiSources ? { poiSources } : {}
+    });
+    return this.#client;
+  }
+  #near() {
+    if (this.#map) {
+      const center = this.#map.gl.getCenter();
+      return [center.lat, center.lng];
+    }
+    const parts = this.getAttribute("near")?.split(",").map(Number);
+    const lat = parts?.[0];
+    const lng = parts?.[1];
+    return lat !== void 0 && lng !== void 0 && Number.isFinite(lat) && Number.isFinite(lng) ? [lat, lng] : void 0;
+  }
+  async #query(raw) {
+    const query = raw.trim();
+    const client = this.#getClient();
+    if (!client || query.length < 2) {
+      this.#render([]);
+      this.#announce(client ? "" : "Thi\u1EBFu c\u1EA5u h\xECnh API.");
+      return;
+    }
+    const seq = ++this.#seq;
+    try {
+      const near = this.#near();
+      const { items } = await client.autocomplete(query, near ? { near } : {});
+      if (seq !== this.#seq) return;
+      this.#render(items);
+      this.#announce(items.length > 0 ? `C\xF3 ${items.length} k\u1EBFt qu\u1EA3.` : "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3.");
+    } catch {
+      if (seq !== this.#seq) return;
+      this.#render([]);
+      this.#announce("Kh\xF4ng th\u1EC3 t\u1EA3i g\u1EE3i \xFD. Vui l\xF2ng th\u1EED l\u1EA1i.");
+    }
+  }
+  #render(items) {
+    if (!this.#list || !this.#input) return;
+    this.#items = items;
+    this.#activeIndex = -1;
+    this.#input.removeAttribute("aria-activedescendant");
+    this.#input.setAttribute("aria-expanded", String(items.length > 0));
+    this.#list.hidden = items.length === 0;
+    this.#list.replaceChildren(
+      ...items.map((item, index) => {
+        const option = document.createElement("li");
+        option.id = `${this.#listId}-option-${index}`;
+        option.dataset.index = String(index);
+        option.dataset.type = item.type;
+        option.setAttribute("role", "option");
+        option.setAttribute("aria-selected", "false");
+        const icon = document.createElement("span");
+        icon.className = "icon";
+        icon.setAttribute("aria-hidden", "true");
+        icon.textContent = TYPE_ICON[item.type] ?? TYPE_ICON.poi;
+        const name = document.createElement("span");
+        name.textContent = item.name;
+        const secondary = document.createElement("span");
+        secondary.className = "secondary";
+        secondary.textContent = item.matched_alt ? `${item.secondary}${item.secondary ? " \xB7 " : ""}t\xEAn c\u0169: ${item.matched_alt}` : item.secondary;
+        option.append(icon, name, secondary);
+        return option;
+      })
+    );
+  }
+  #setActive(index) {
+    if (!this.#input || !this.#list) return;
+    this.#activeIndex = index;
+    for (const [optionIndex, option] of Array.from(this.#list.children).entries()) {
+      option.setAttribute("aria-selected", String(optionIndex === index));
+    }
+    const active = this.#list.children.item(index);
+    if (active) {
+      this.#input.setAttribute("aria-activedescendant", active.id);
+      active.scrollIntoView({ block: "nearest" });
+    }
+  }
+  #select(index) {
+    const item = this.#items[index];
+    if (!item || !this.#input) return;
+    this.#input.value = item.name;
+    this.#render([]);
+    this.#announce(`\u0110\xE3 ch\u1ECDn ${item.name}.`);
+    this.dispatchEvent(new CustomEvent("select", { detail: item, bubbles: true, composed: true }));
+  }
+  #announce(message) {
+    if (this.#status) this.#status.textContent = message;
+  }
+};
+function defineAutocomplete() {
+  if (!customElements.get("mapslibvn-autocomplete"))
+    customElements.define("mapslibvn-autocomplete", MapsLibVNAutocomplete);
+}
+
+// src/index.ts
+import { attributionHtml as attributionHtml2, attributionText, createClient as createClient3, MapsLibVNError } from "@mapslibvn/core";
+export {
+  MapsLibVNAutocomplete,
+  MapsLibVNError,
+  applyLanguage,
+  attributionHtml2 as attributionHtml,
+  attributionText,
+  createClient3 as createClient,
+  createMap,
+  defineAutocomplete,
+  nameExpression
+};