Added query helper sample

package.json

@@ -37,7 +37,7 @@
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-img": "^1.1.0",
     "@playwright/test": "^1.40.1",
-    "@types/woosmap.map": "^1.4.10",
+    "@types/woosmap.map": "^1.4.11",
     "@types/supercluster": "^7.1.3",
     "@types/geojson": "^7946.0.14",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

samples/stores-overlay-query-advanced/index.njk

@@ -0,0 +1,51 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block html %}
+    <div id="map-panel">
+        <div id="innerWrapper">
+            <div class="sectionHeader"><span>setQuery using <em>Query Helper</em></span></div>
+            <div class="options">
+                <label class="options__header" for="type">Filter by Type </label>
+                <select id="type">
+                    <option value="all">All</option>
+                    <option value="bose_store">Bose Store</option>
+                    <option value="bose_reseller">Reseller</option>
+                    <option value="professional_systems">Professional Systems</option>
+                    <option value="aviation">Aviation</option>
+                    <option value="bose_music_partners">Music Partners</option>
+                    <option value="bose_excellence_centre">Excellence Centre</option>
+                    <option value="bose_factory_store">Factory Store</option>
+                    <option value="bose_shop-in-shop">Shop In Shop</option>
+                </select>
+            </div>
+            <div class="options">
+                <label class="options__header" for="tag">Filter by Available Service (Tag) </label>
+                <select id="tag">
+                    <option value="all">All</option>
+                    <option value="wheelchair_access">Wheelchair Access</option>
+                    <option value="in-store_wi-fi">Wi-Fi</option>
+                    <option value="parking">Parking</option>
+                    <option value="schedule_a_demo">Schedule a Demo</option>
+                    <option value="reserve_and_collect">Reserve & Collect</option>
+                    <option value="delivery_and_installation_service">Delivery & Installation</option>
+                    <option value="customised_solutions">Customised Solutions</option>
+                    <option value="financing">Financing</option>
+                    <option value="repair_service">Repair Service</option>
+                </select>
+            </div>
+            <div class="options"><span
+                        class="options__header">Clause</span>
+                <div class="options__input">
+                    <input id="clauseAND" aria-label="Yes" name="clauses" type="radio"
+                           value="AND" checked="">
+                    <label for="true">AND</label>
+                </div>
+                <div class="options__input">
+                    <input id="clauseOR" aria-label="No" name="clauses" type="radio"
+                           value="OR">
+                    <label for="false">OR</label>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="map"></div>
+{% endblock %}

samples/stores-overlay-query-advanced/index.ts

@@ -0,0 +1,119 @@
+// [START woosmap_stores_overlay_query_advanced]
+let typeSelect: HTMLSelectElement;
+let tagSelect: HTMLSelectElement;
+let clauseAnd: HTMLInputElement;
+let clauseOr: HTMLInputElement;
+let storesOverlay: woosmap.map.StoresOverlay;
+
+// Function to build and set the query
+function setQuery() {
+  const type = typeSelect.value;
+  const tag = tagSelect.value;
+  const clauseFunction = clauseAnd.checked
+    ? woosmap.map.query.and
+    : woosmap.map.query.or;
+
+  let query: woosmap.map.query.Query;
+
+  if (type !== "all" && tag !== "all") {
+    query = clauseFunction([
+      woosmap.map.query.F("type", type),
+      woosmap.map.query.F("tag", tag),
+    ]);
+  } else if (type !== "all") {
+    query = clauseFunction([woosmap.map.query.F("type", type)]);
+  } else if (tag !== "all") {
+    query = clauseFunction([woosmap.map.query.F("tag", tag)]);
+  } else {
+    query = clauseFunction([]);
+  }
+
+  storesOverlay.setQuery(query.toString());
+}
+
+function initMap(): void {
+  const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };
+  const icon: woosmap.map.Icon = {
+    url: "https://images.woosmap.com/marker-blue.svg",
+    scaledSize: {
+      height: 40,
+      width: 34,
+    },
+  };
+  const style: woosmap.map.Style = {
+    breakPoint: 18,
+    rules: [
+      {
+        type: "bose_store",
+        color: "#2d2d2d",
+        icon,
+      },
+      {
+        type: "professional_systems",
+        color: "#733f00",
+        icon,
+      },
+      {
+        type: "bose_excellence_centre",
+        color: "#ef8900",
+        icon,
+      },
+      {
+        type: "bose_reseller",
+        color: "#607c92",
+        icon,
+      },
+      {
+        type: "bose_factory_store",
+        color: "#607c92",
+        icon,
+      },
+    ],
+    default: {
+      color: "#2D2D2D",
+      size: 11,
+      minSize: 3,
+      icon,
+      selectedIcon: {
+        url: "https://images.woosmap.com/marker-red.svg",
+        scaledSize: {
+          height: 50,
+          width: 43,
+        },
+      },
+    },
+  };
+  const map = new woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      zoom: 8,
+      center: center,
+    },
+  );
+
+  storesOverlay = new woosmap.map.StoresOverlay(style);
+  storesOverlay.setMap(map);
+  initUI();
+}
+
+function initUI() {
+  typeSelect = document.getElementById("type") as HTMLSelectElement;
+  tagSelect = document.getElementById("tag") as HTMLSelectElement;
+  clauseAnd = document.getElementById("clauseAND") as HTMLInputElement;
+  clauseOr = document.getElementById("clauseOR") as HTMLInputElement;
+
+  // Add event listeners to form elements
+  typeSelect.addEventListener("change", setQuery);
+  tagSelect.addEventListener("change", setQuery);
+  clauseAnd.addEventListener("change", setQuery);
+  clauseOr.addEventListener("change", setQuery);
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_stores_overlay_query_advanced]
+export {};

samples/stores-overlay-query-advanced/stores-overlay-query-advanced.json

@@ -0,0 +1,16 @@
+{
+  "title": "Stores Overlay Query- Advanced",
+  "description": "Filter the displayed stores based on a specific query using Query Helper",
+  "category": "Stores Overlay",
+  "callback": "initMap",
+  "WOOSMAP_PUBLIC_API_KEY": "woos-c562b391-2e0d-33f5-80c6-0cfd1e5bea09",
+  "libraries": [],
+  "tag": "stores_overlay_query_advanced",
+  "name": "stores-overlay-query-advanced",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+}

samples/stores-overlay-query-advanced/style.scss

@@ -0,0 +1,72 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START woosmap_stores_overlay_query_advanced] */
+@include meta.load-css("../../shared/scss/_default.scss");
+@import "../../shared/scss/mixins.scss";
+
+#map-panel {
+  @include map-panel($top: 0, $left: 0);
+  max-width: 280px;
+  padding: 0;
+}
+
+#innerWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 0 10px 10px;
+  font-size: .85em;
+}
+
+.sectionHeader {
+  font-weight: 600;
+  background: #EEE;
+  border-bottom: 1px solid #eeeeee;
+  margin: 0 -10px 10px;
+  padding: 5px 10px;
+  color: #222;
+}
+
+select {
+  margin: .25em 0 0.7em;
+  padding: .5em .6em;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 3px #ddd;
+  border-radius: 4px;
+  vertical-align: middle;
+  font-weight: normal;
+  letter-spacing: 0.01em;
+  font-size: 1em;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+input[type=select]:focus {
+  outline: 0;
+  border-color: #03A9F4;
+}
+
+select {
+  height: 2.25em;
+  border: 1px solid #ccc;
+  background-color: #fff;
+}
+
+.options {
+  &__header {
+    font-weight: 600;
+    line-height: 24px;
+    display: flex;
+  }
+
+  &__input {
+    height: 24px;
+    display: flex;
+    align-items: baseline;
+  }
+}
+
+/* [END woosmap_stores_overlay_query_advanced] */