Datasets Api - Using DatasetsOverlay & DatasetsService classes

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

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>
      Datasets Api - Using DatasetsOverlay &amp; DatasetsService classes
    </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 id="container">
      <div id="sidebar">
        <div id="innerWrapper">
          <div class="sectionHeader">
            <span>Filters</span>
          </div>
          <div class="dropdown__container">
            <div id="od-selector">
              <div class="od-container">
                <span>Dataset</span>
                <select id="dataset">
                  <option value="c3262b13-4884-4761-bec4-dac28abf7137">
                    US National Risk Index
                  </option>
                  <option value="223a1c86-39bc-4979-a53e-afef9b8d20fd">
                    Worldwide Solar Potential
                  </option>
                  <option selected value="a01df3d6-fe7d-42df-8fee-9f31726a2641">
                    US - Seismic Hazard Map
                  </option>
                </select>
              </div>
              <div class="od-container">
                <span>Operator </span>
                <select id="operator">
                  <option value="intersects" selected>Intersects</option>
                  <option value="within">Within</option>
                  <option value="contains">Contains</option>
                </select>
              </div>
              <button class="btn" id="btnReset" type="button">
                <span class="btnText" tabindex="-1">Reset</span>
              </button>
            </div>
          </div>

          <div class="sectionHeader">
            <span>Results</span>
          </div>
          <ol id="results"></ol>
        </div>
      </div>
      <div id="mapContainer">
        <div id="map"></div>
        <div id="autocomplete-container">
          <svg class="search-icon" viewBox="0...

CSS

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;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 12rem;
  flex-grow: 1;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 70vw;
  flex-grow: 5;
  height: 100%;
}

#autocomplete-container {
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
  background: #fff;
  border-radius: 12px;
  padding: 0 12px;
  max-width: 320px;
  width: 100%;
  height: 42px;
  border: none;
  box-sizing: border-box;
  align-items: center;
  cursor: text;
  font-size: 15px;
}

#autocomplete-container .search-icon, #autocomplete-container .clear-icon {
  color: inherit;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
}

#autocomplete-container .clear-icon {
  transform: scale(1.3);
}

#autocomplete-input {
  box-sizing: border-box;
  padding: 0;
  height: 40px;
  line-height: 24px;
  vertical-align: top;
  transition-property: color;
  transition-duration: 0.3s;
  width: 100%;
  text-overflow: ellipsis;
  background: transparent;
  border-radius: 0;
  border: 0;
  margin: 0 8px;
  outline: 0;
  overflow: visible;
  appearance: textfield;
  font-size: 100%;
}

.clear-searchButton {
  display: none;
  height: 18px;
  width: 22px;
  background: none;
  border: none;
  vertical-align: middle;
  pointer-events: all;
  cursor: pointer;
}

#suggestions-list {
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  position: absolute;
  max-width: 320px;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 1;
  list-style: none;
  max-height: 80vh;
  margin: 5px 0 0;
  padding: 0;
 ...

JavaScript

// Initialize and add the map
let map;
let drawTools;
let datasetsOverlay;
let datasetsService;
let localitiesService;
let request;
let inputElement;
let suggestionsList;
let clearSearchBtn;
let datasetSelect;
let operatorSelect;
let debouncedLocalitiesAutocomplete;
let results;
let resetButton;
const datasetId = "a01df3d6-fe7d-42df-8fee-9f31726a2641"; //US - Seismic Hazard Map

function initMap() {
  map = new woosmap.map.Map(document.getElementById("map"), {
    gestureHandling: "auto",
    defaultStyle: "streets",
  });
  map.fitBounds({
    east: -66.93457,
    north: 49.384358,
    south: 24.396308,
    west: -125.00165,
  });
  initDrawing();
  initServices();
  initUIElements();
  manageFiltersElements();
}

function initServices() {
  datasetsOverlay = new woosmap.map.DatasetsOverlay(datasetId);
  datasetsService = new woosmap.map.DatasetsService(datasetId);
  datasetsOverlay.setMap(map);
  localitiesService = new window.woosmap.map.LocalitiesService();
  request = {
    input: "",
    types: ["locality", "address", "postal_code"],
  };
  debouncedLocalitiesAutocomplete = debouncePromise(
    localitiesService.autocomplete,
    0,
  );
  initAutoComplete();
}

function initDrawing() {
  drawTools = new woosmap.map.Drawing({
    controls: {
      combine_features: false,
      uncombine_features: false,
    },
  });
  drawTools.addControl(map);
  drawTools.addListener("draw.create", async (ev) => {
    const collection = drawTools.getAll();

    if (collection.features.length > 1) {
      for (const feature of collection.features.slice(0, -1)) {
        if (feature && feature.id) {
          drawTools.delete(feature.id.toString());
        }
      }
    }

    await intersectCb(drawTools.getAll());
  });
  drawTools.addListener("draw.delete", () => {
    map.data.forEach((feature) => {
      map.data.remove(feature);
    });
    results.innerHTML = "";
  });
  drawTools.addListener("draw.update", async (ev) => {
    await intersectCb(ev);
  });
}

function...