Draw Shapes

Sample code for Woosmap Map JavaScript API author(s): Woosmap

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Draw Shapes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div class="container">
      <button class="btn" id="getDrawData" type="button">
        <span class="btnText" tabindex="-1">Get GeoJSON</span>
      </button>
    </div>
    <!--The div element for the map -->
    <wmp-map id="map"></wmp-map>
    <div class="modal-overlay closed" id="modal-overlay"></div>
    <div class="modal closed" id="modal">
      <!-- Modal content -->
      <div class="modal-content" id="modal-content"></div>
    </div>

    <script>
      (g=>{var p,w=window,d=document,l="importLibrary",q="__ib__",e="The Woosmap Maps JavaScript API",o=w.woosmap||(w.woosmap={}),m=o.map||(o.map={}),r=new Set(String(g.libraries||"").split(",").filter(Boolean)),s=new URLSearchParams,u=()=>p||(p=new Promise((f,n)=>{var a=d.createElement("script");s.set("libraries",[...r]+"");for(var k in g)k!="libraries"&&g[k]&&s.set(k,g[k]);s.set("callback","woosmap.map."+q);a.src="https://sdk.woosmap.com/map/map.js?"+s;m[q]=f;a.onerror=()=>n(Error(e+" could not load."));a.nonce=d.querySelector("script[nonce]")?.nonce||"";d.head.append(a)}));m[l]?console.warn(e+" only loads once. Ignoring:",g):m[l]=(f,...n)=>r.add(f)&&u().then(()=>m[l](f,...n))})({
        key: "woos-e1e5490b-19d1-34f8-9955-fd5cfc8c880f",
        libraries: "drawing",
      });
    </script>
  </body>
</html>

CSS

/*
 * Always set the map height explicitly to define the size of the element
 * that contains the map. `display: block` is required for <wmp-map>/<gmp-map>,
 * which default to inline like any other custom element outside a flex/grid
 * container (no-op for a plain <div>).
 */
#map {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.modal {
  display: block;
  width: 80%;
  max-width: 100%;
  height: 80%;
  max-height: 100%;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.25);
}

.modal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px 50px 20px 20px;
  box-sizing: border-box;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
}

.closed {
  display: none;
}

.btn {
  background: #3d5afe;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  -webkit-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
  box-sizing: border-box;
  font-size: 14px;
  color: #202124;
  cursor: pointer;
  display: flex;
  font-weight: 600;
  height: 32px;
  padding: 0 15px;
  position: relative;
  align-items: center;
}
.btn:hover {
  background: rgb(10.2615384615, 46.8461538462, 253.7384615385);
}

.btnText {
  color: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25rem;
}
.btnText:hover {
  text-decoration:...

JavaScript

// Initialize and add the map
let map;
const modal = document.getElementById("modal");
const modalOverlay = document.getElementById("modal-overlay");
const modalContent = document.getElementById("modal-content");

async function initMap() {
  await woosmap.map.importLibrary("maps");
  await woosmap.map.importLibrary("drawing");
  map = document.getElementById("map").innerMap;
  map.setOptions({
    gestureHandling: "greedy",
  });
  map.moveCamera({
    center: { lng: 3.878, lat: 43.611 },
    zoom: 15,
  });

  const draw = new woosmap.map.Drawing({});

  draw.addControl(map);

  const getDrawDataBtn = document.getElementById("getDrawData");

  getDrawDataBtn.onclick = function () {
    // Retrieve geospatial data of all features
    const data = draw.getAll();

    if (modalContent && modal && modalOverlay) {
      modalContent.innerHTML =
        "<div><pre>" + JSON.stringify(data, null, 2) + "</pre></div>";
      modal.classList.toggle("closed");
      modalOverlay.classList.toggle("closed");
    }
  };

  // Once map is loaded, load features and update them
  woosmap.map.event.addListenerOnce(map, "idle", () => {
    const data = {
      type: "FeatureCollection",
      features: [
        {
          id: "ce1e70483f88a26d67f0e8c4e7ab291d",
          type: "Feature",
          properties: { id: 178 },
          geometry: {
            coordinates: [
              [
                [
                  [3.87723568380971, 43.61004510654826],
                  [3.877173232470241, 43.609995174554946],
                  [3.875969990473409, 43.610782435129295],
                  [3.874992977309363, 43.61085322572703],
                  [3.87490330500336, 43.61085798523777],
                  [3.874920299074426, 43.61088783061132],
                  [3.875033981566216, 43.61100234133091],
                  [3.875239327484033, 43.61124839893764],
                  [3.875341755448687, 43.61128653729499],
                  [3.875821584563326, 43.61142547901778],
      ...