Merge pull request #73 from Woosmap/dev/marker-html-css

Added sample for custom HTML Markers

samples/marker-html-css/index.njk

@@ -0,0 +1,4 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block html %}
+    <div id="map"></div>
+{% endblock %}

samples/marker-html-css/index.ts

@@ -0,0 +1,142 @@
+// [START woosmap_marker_html_css]
+interface MarkerData {
+  price: string;
+}
+
+function initMap(): void {
+  class HTMLMapMarker extends woosmap.map.OverlayView {
+    private readonly latlng: woosmap.map.LatLng;
+    private readonly html: string;
+    public div: HTMLDivElement | null = null;
+
+    constructor({ latlng, map, data }) {
+      super();
+      this.latlng = latlng;
+      this.html = `<div class="popover-content">
+                      <span class="icon">️</span>
+                      <span class="price">${data.price}</span>
+                    </div>
+                     <div class="popover-arrow-shadow"></div>
+                     <div class="popover-arrow"></div>`;
+      this.setMap(map);
+    }
+
+    private createDiv(): void {
+      this.div = document.createElement("div");
+      this.div.style.position = "absolute";
+      this.div.className = "popover";
+      if (this.html) {
+        this.div.innerHTML = this.html;
+      }
+      woosmap.map.event.addDomListener(this.div, "click", () => {
+        woosmap.map.event.trigger(this, "click");
+      });
+    }
+
+    private appendDivToOverlay(): void {
+      // @ts-ignore
+      const panes = this.getPanes();
+      if (panes && this.div) {
+        panes.overlayImage.appendChild(this.div);
+      }
+    }
+
+    private positionDiv(): void {
+      // @ts-ignore
+      const point = this.getProjection()?.fromLatLngToDivPixel(this.latlng);
+      if (point && this.div) {
+        // Offset should depend on the style of your popover
+        const offsetWidth = this.div.offsetWidth / 2; // 50% of div width
+        const offsetHeight = this.div.offsetHeight + 6; // Full height of div plus the arrow height
+        this.div.style.left = `${point.x - offsetWidth}px`;
+        this.div.style.top = `${point.y - offsetHeight}px`;
+      }
+    }
+
+    draw(): void {
+      if (!this.div) {
+        this.createDiv();
+        this.appendDivToOverlay();
+      }
+      this.positionDiv();
+    }
+
+    remove(): void {
+      if (this.div && this.div.parentNode) {
+        this.div.parentNode.removeChild(this.div);
+        this.div = null;
+      }
+    }
+
+    getPosition(): woosmap.map.LatLng {
+      return this.latlng;
+    }
+
+    addEventListener(eventName: string, callback: () => void): void {
+      if (this.div) {
+        this.div.addEventListener(eventName, callback);
+      }
+    }
+  }
+
+  const center: woosmap.map.LatLngLiteral = { lat: 51.5074, lng: -0.1278 };
+
+  const map = new woosmap.map.Map(
+    document.getElementById("map") as HTMLElement,
+    {
+      zoom: 13,
+      center: center,
+    },
+  );
+
+  const markersData: MarkerData[] = [
+    { price: "100 €" },
+    { price: "200 €" },
+    { price: "300 €" },
+    { price: "400 €" },
+    { price: "500 €" },
+  ];
+
+  const positions: woosmap.map.LatLngLiteral[] = [
+    { lat: 51.5074, lng: -0.1278 },
+    { lat: 51.5174, lng: -0.1378 },
+    { lat: 51.4974, lng: -0.1178 },
+    { lat: 51.5074, lng: -0.1478 },
+    { lat: 51.5074, lng: -0.1078 },
+  ];
+
+  const markers: HTMLMapMarker[] = [];
+
+  markersData.forEach((data, index) => {
+    const marker = new HTMLMapMarker({
+      latlng: new woosmap.map.LatLng(
+        positions[index].lat,
+        positions[index].lng,
+      ),
+      map: map,
+      data: data,
+    });
+
+    marker.addEventListener("click", () => {
+      markers.forEach((m) => {
+        if (m.div) {
+          m.div.classList.remove("active");
+        }
+      });
+      if (marker.div) {
+        marker.div.classList.add("active");
+      }
+    });
+
+    markers.push(marker);
+  });
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_marker_html_css]
+export {};

samples/marker-html-css/marker-html-css.json

@@ -0,0 +1,15 @@
+{
+  "title": "Marker HTML CSS",
+  "description": "Create markers with HTML and CSS",
+  "category": "Markers",
+  "callback": "initMap",
+  "libraries": [],
+  "tag": "marker_html_css",
+  "name": "marker-html-css",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+}

samples/marker-html-css/style.scss

@@ -0,0 +1,93 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START woosmap_marker_html_css] */
+@include meta.load-css("../../shared/scss/_default.scss");
+
+.popover {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  cursor: pointer;
+
+  .popover-content {
+    display: flex;
+    align-items: center;
+    background-color: #FFF;
+    color: #1D1D1D;
+    padding: 6px 8px;
+    border-radius: 20px;
+    font-family: Roboto, Arial, sans-serif;
+    font-size: 15px;
+    font-weight: 500;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f50057;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      margin-right: 6px;
+
+
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNNDAtMjAwdi02MDBoODB2NDAwaDMyMHYtMzIwaDMyMHE2NiAwIDExMyA0N3Q0NyAxMTN2MzYwaC04MHYtMTIwSDEyMHYxMjBINDBabTI0MC0yNDBxLTUwIDAtODUtMzV0LTM1LTg1cTAtNTAgMzUtODV0ODUtMzVxNTAgMCA4NSAzNXQzNSA4NXEwIDUwLTM1IDg1dC04NSAzNVoiLz48L3N2Zz4=");
+      background-repeat: no-repeat;
+      background-size: 16px 16px;
+      background-position: center;
+    }
+
+    .price {
+      white-space: nowrap;
+    }
+  }
+
+  .popover-arrow-shadow {
+    position: absolute;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-top: 7px solid rgba(0, 0, 0, 0.2);
+    filter: blur(2px);
+    z-index: 0;
+  }
+
+  .popover-arrow {
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #FFF;
+    z-index: 1;
+  }
+
+  &.active {
+    .popover-content {
+      background-color: #f50057;
+      color: #FFFFFF;
+
+      .icon {
+        background-color: #FFFFFF;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZjUwMDU3Ij48cGF0aCBkPSJNNDAtMjAwdi02MDBoODB2NDAwaDMyMHYtMzIwaDMyMHE2NiAwIDExMyA0N3Q0NyAxMTN2MzYwaC04MHYtMTIwSDEyMHYxMjBINDBabTI0MC0yNDBxLTUwIDAtODUtMzV0LTM1LTg1cTAtNTAgMzUtODV0ODUtMzVxNTAgMCA4NSAzNXQzNSA4NXEwIDUwLTM1IDg1dC04NSAzNVoiLz48L3N2Zz4=");
+      }
+    }
+
+    .popover-arrow {
+      border-top: 6px solid #f50057;
+    }
+  }
+}
+
+/* [END woosmap_marker_html_css] */