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 -->
    <div id="map"></div>
    <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
      src="https://sdk.woosmap.com/map/map.js?key=woos-e1e5490b-19d1-34f8-9955-fd5cfc8c880f&callback=initMap&libraries=drawing"
      defer
    ></script>
  </body>
</html>

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  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: none;
}

.container {
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 10px;
}

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");

function initMap() {
  map = new window.woosmap.map.Map(document.getElementById("map"), {
    gestureHandling: "greedy",
    center: { lng: 3.878, lat: 43.611 },
    zoom: 15,
  });

  const draw = new window.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
  window.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],
                  [3.876219401810511, 43.611657529015126],
                  [3.876386298388794,...