Code Samples
Community Forum

Datasets Api - Using DatasetsOverlay & DatasetsService classes

Advanced geospatial search and query functions
  1. Example
  2. Running the Sample Locally

Example

Datasets Api - Using DatasetsOverlay & DatasetsService classes
        // Initialize and add the map
let map: woosmap.map.Map;
let drawTools: woosmap.map.Drawing;
let datasetsOverlay: woosmap.map.DatasetsOverlay;
let datasetsService: woosmap.map.DatasetsService;
let localitiesService: woosmap.map.LocalitiesService;
let request: woosmap.map.localities.LocalitiesAutocompleteRequest;
let inputElement: HTMLInputElement;
let suggestionsList: HTMLUListElement;
let clearSearchBtn: HTMLButtonElement;
let datasetSelect: HTMLSelectElement;
let operatorSelect: HTMLSelectElement;
let debouncedLocalitiesAutocomplete: (...args: any[]) => Promise<any>;
let results: HTMLOListElement;
let resetButton: HTMLButtonElement;

const datasetId = "fd2732a6-714d-4894-98ef-c0c7744a399c"; //US - Seismic Hazard Map

function initMap(): void {

  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
    gestureHandling: "auto",
    defaultStyle: "streets",
  });
  map.fitBounds({
    east: -66.93457,
    north: 49.384358,
    south: 24.396308,
    west: -125.00165,
  });
  initDrawing();
  initServices();
  initUIElements();
  manageFiltersElements();
}
function initServices(): void {
  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(): void {
  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 initAutoComplete(): void {
  inputElement = document.getElementById(
    "autocomplete-input",
  ) as HTMLInputElement;
  suggestionsList = document.getElementById(
    "suggestions-list",
  ) as HTMLUListElement;
  clearSearchBtn = document.getElementsByClassName(
    "clear-searchButton",
  )[0] as HTMLButtonElement;
  if (inputElement && suggestionsList) {
    inputElement.addEventListener("input", handleAutocomplete);
    inputElement.addEventListener("keydown", (event) => {
      if (event.key === "Enter") {
        const firstLi = suggestionsList.querySelector("li");
        if (firstLi) {
          firstLi.click();
        }
      }
    });
  }
  clearSearchBtn.addEventListener("click", () => {
    inputElement.value = "";
    suggestionsList.style.display = "none";
    clearSearchBtn.style.display = "none";
    results.innerHTML = "";
    inputElement.focus();
  });
}
function initUIElements(): void {
  results = document.querySelector("#results") as HTMLOListElement;
  resetButton = document.getElementById("btnReset") as HTMLButtonElement;
  resetButton.onclick = function () {
    resetElements();
  };
}
function resetElements(): void {
  datasetsOverlay.setMap(null);
  datasetsOverlay = new woosmap.map.DatasetsOverlay(datasetId);
  datasetsService = new woosmap.map.DatasetsService(datasetId);
  datasetsOverlay.setMap(map);
  map.flyTo({ center: { lat: 38, lng: -99 } });
  datasetSelect.selectedIndex = 2;
  operatorSelect.selectedIndex = 0;
  drawTools.deleteAll();
  map.data.forEach((feature) => {
    map.data.remove(feature);
  });
  inputElement.value = "";
  suggestionsList.style.display = "none";
  clearSearchBtn.style.display = "none";
  results.innerHTML = "";
}
function handleAutocomplete(): void {
  if (inputElement && suggestionsList) {
    request.input = inputElement.value;
    if (request.input) {
      debouncedLocalitiesAutocomplete(request)
        .then((localities) => displaySuggestions(localities))
        .catch((error) =>
          console.error("Error autocomplete localities:", error),
        );
    } else {
      suggestionsList.style.display = "none";
      clearSearchBtn.style.display = "none";
    }
  }
}
function handleDetails(publicId: string) {
  localitiesService
    .getDetails({ publicId })
    .then((locality) => displayLocality(locality.result))
    .catch((error) => console.error("Error getting locality details:", error));
}
function displayLocality(
  locality: woosmap.map.localities.LocalitiesDetailsResult,
) {
  if (locality?.geometry) {
    map.flyTo({ center: locality.geometry.location });

    const feature: woosmap.map.GeoJSONFeature = {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [
          locality.geometry.location.lng,
          locality.geometry.location.lat,
        ],
      },
      properties: {},
    };
    drawTools.add(feature);

    intersectCb({
      features: [feature],
    });
  }
}

function displaySuggestions(
  localitiesPredictions: woosmap.map.localities.LocalitiesAutocompleteResponse,
) {
  if (inputElement && suggestionsList) {
    suggestionsList.innerHTML = "";
    if (localitiesPredictions.localities.length > 0 && request["input"]) {
      localitiesPredictions.localities.forEach((locality) => {
        const li = document.createElement("li");
        li.textContent = locality.description ?? "";
        li.addEventListener("click", () => {
          inputElement.value = locality.description ?? "";
          suggestionsList.style.display = "none";
          handleDetails(locality.public_id);
        });
        suggestionsList.appendChild(li);
      });
      suggestionsList.style.display = "block";
      clearSearchBtn.style.display = "block";
    } else {
      suggestionsList.style.display = "none";
    }
  }
}
function manageFiltersElements() {
  datasetSelect = document.getElementById("dataset") as HTMLSelectElement;
  operatorSelect = document.getElementById("operator") as HTMLSelectElement;
  datasetSelect.addEventListener("change", (event) => {
    const selectElement = event.target as HTMLSelectElement;
    updateDataset(selectElement.value);
  });
  operatorSelect.addEventListener("change", async (ev) => {
    const collection = drawTools.getAll();
    await intersectCb(collection);
  });
}
async function updateDataset(datasetId: string) {
  datasetsOverlay.setMap(null);
  datasetsOverlay = new woosmap.map.DatasetsOverlay(datasetId);
  datasetsService = new woosmap.map.DatasetsService(datasetId);
  datasetsOverlay.setMap(map);
  const collection = drawTools.getAll();
  await intersectCb(collection);
}
async function intersectCb(ev) {
  async function applyOperator(geometry, operator) {
    let response;

    switch (operator) {
      case "intersects":
        response = await datasetsService.intersects({ geometry });
        break;
      case "within":
        response = await datasetsService.within({ geometry });
        break;
      case "contains":
        response = await datasetsService.contains({ geometry });
        break;
    }

    return response;
  }

  await applyOperator(ev.features[0].geometry, operatorSelect.value)
    .then((response) => {
      const features = [];
      bindResultsToPanel(response.features);
      map.data.forEach((feature) => {
        map.data.remove(feature);
      });
      for (const feature of response.features) {
        // @ts-ignore TypeDef to be updated
        features.push({
          type: "Feature",
          geometry: feature.geometry,
        });
      }

      map.data.addGeoJson({
        type: "FeatureCollection",
        features: features,
      });
    })
    .catch((error) => {
      results.innerHTML = error;
      results.classList.add("error");
    });
}
function bindResultsToPanel(features: woosmap.map.GeoJSONFeature[]) {
  results.innerHTML = "";
  if (features.length > 0) {
    features.map((feature) => {
      const attributes = feature["attributes"];
      const resultListItem = document.createElement("table");
      results.classList.remove("error");
      resultListItem.classList.add("result");
      Object.keys(attributes).map((key) => {
        if (attributes[key]) {
          resultListItem.innerHTML =
            resultListItem.innerHTML +
            `<tr><td><b>${key} </b></td><td>${attributes[key]}</td></tr>`;
        }
      }),
        results.appendChild(resultListItem);
    });
  } else {
    results.innerHTML = "No results found";
    results.classList.add("error");
  }
}

type DebouncePromiseFunction<T, Args extends any[]> = (
  ...args: Args
) => Promise<T>;

function debouncePromise<T, Args extends any[]>(
  fn: (...args: Args) => Promise<T>,
  delay: number,
): DebouncePromiseFunction<T, Args> {
  let timeoutId: ReturnType<typeof setTimeout> | null = null;
  let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
  let latestReject: ((reason?: any) => void) | null = null;

  return function (...args: Args): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      if (timeoutId !== null) {
        clearTimeout(timeoutId);
      }
      latestResolve = resolve;
      latestReject = reject;
      timeoutId = setTimeout(() => {
        fn(...args)
          .then((result) => {
            if (latestResolve === resolve && latestReject === reject) {
              resolve(result);
            }
          })
          .catch((error) => {
            if (latestResolve === resolve && latestReject === reject) {
              reject(error);
            }
          });
      }, delay);
    });
  };
}


declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

    
        // 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 = "fd2732a6-714d-4894-98ef-c0c7744a399c"; //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 initAutoComplete() {
  inputElement = document.getElementById("autocomplete-input");
  suggestionsList = document.getElementById("suggestions-list");
  clearSearchBtn = document.getElementsByClassName("clear-searchButton")[0];
  if (inputElement && suggestionsList) {
    inputElement.addEventListener("input", handleAutocomplete);
    inputElement.addEventListener("keydown", (event) => {
      if (event.key === "Enter") {
        const firstLi = suggestionsList.querySelector("li");

        if (firstLi) {
          firstLi.click();
        }
      }
    });
  }

  clearSearchBtn.addEventListener("click", () => {
    inputElement.value = "";
    suggestionsList.style.display = "none";
    clearSearchBtn.style.display = "none";
    results.innerHTML = "";
    inputElement.focus();
  });
}

function initUIElements() {
  results = document.querySelector("#results");
  resetButton = document.getElementById("btnReset");
  resetButton.onclick = function () {
    resetElements();
  };
}

function resetElements() {
  datasetsOverlay.setMap(null);
  datasetsOverlay = new woosmap.map.DatasetsOverlay(datasetId);
  datasetsService = new woosmap.map.DatasetsService(datasetId);
  datasetsOverlay.setMap(map);
  map.flyTo({ center: { lat: 38, lng: -99 } });
  datasetSelect.selectedIndex = 2;
  operatorSelect.selectedIndex = 0;
  drawTools.deleteAll();
  map.data.forEach((feature) => {
    map.data.remove(feature);
  });
  inputElement.value = "";
  suggestionsList.style.display = "none";
  clearSearchBtn.style.display = "none";
  results.innerHTML = "";
}

function handleAutocomplete() {
  if (inputElement && suggestionsList) {
    request.input = inputElement.value;
    if (request.input) {
      debouncedLocalitiesAutocomplete(request)
        .then((localities) => displaySuggestions(localities))
        .catch((error) =>
          console.error("Error autocomplete localities:", error),
        );
    } else {
      suggestionsList.style.display = "none";
      clearSearchBtn.style.display = "none";
    }
  }
}

function handleDetails(publicId) {
  localitiesService
    .getDetails({ publicId })
    .then((locality) => displayLocality(locality.result))
    .catch((error) => console.error("Error getting locality details:", error));
}

function displayLocality(locality) {
  if (locality?.geometry) {
    map.flyTo({ center: locality.geometry.location });

    const feature = {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [
          locality.geometry.location.lng,
          locality.geometry.location.lat,
        ],
      },
      properties: {},
    };

    drawTools.add(feature);
    intersectCb({
      features: [feature],
    });
  }
}

function displaySuggestions(localitiesPredictions) {
  if (inputElement && suggestionsList) {
    suggestionsList.innerHTML = "";
    if (localitiesPredictions.localities.length > 0 && request["input"]) {
      localitiesPredictions.localities.forEach((locality) => {
        const li = document.createElement("li");

        li.textContent = locality.description ?? "";
        li.addEventListener("click", () => {
          inputElement.value = locality.description ?? "";
          suggestionsList.style.display = "none";
          handleDetails(locality.public_id);
        });
        suggestionsList.appendChild(li);
      });
      suggestionsList.style.display = "block";
      clearSearchBtn.style.display = "block";
    } else {
      suggestionsList.style.display = "none";
    }
  }
}

function manageFiltersElements() {
  datasetSelect = document.getElementById("dataset");
  operatorSelect = document.getElementById("operator");
  datasetSelect.addEventListener("change", (event) => {
    const selectElement = event.target;

    updateDataset(selectElement.value);
  });
  operatorSelect.addEventListener("change", async (ev) => {
    const collection = drawTools.getAll();

    await intersectCb(collection);
  });
}

async function updateDataset(datasetId) {
  datasetsOverlay.setMap(null);
  datasetsOverlay = new woosmap.map.DatasetsOverlay(datasetId);
  datasetsService = new woosmap.map.DatasetsService(datasetId);
  datasetsOverlay.setMap(map);

  const collection = drawTools.getAll();

  await intersectCb(collection);
}

async function intersectCb(ev) {
  async function applyOperator(geometry, operator) {
    let response;

    switch (operator) {
      case "intersects":
        response = await datasetsService.intersects({ geometry });
        break;
      case "within":
        response = await datasetsService.within({ geometry });
        break;
      case "contains":
        response = await datasetsService.contains({ geometry });
        break;
    }
    return response;
  }

  await applyOperator(ev.features[0].geometry, operatorSelect.value)
    .then((response) => {
      const features = [];

      bindResultsToPanel(response.features);
      map.data.forEach((feature) => {
        map.data.remove(feature);
      });

      for (const feature of response.features) {
        // @ts-ignore TypeDef to be updated
        features.push({
          type: "Feature",
          geometry: feature.geometry,
        });
      }

      map.data.addGeoJson({
        type: "FeatureCollection",
        features: features,
      });
    })
    .catch((error) => {
      results.innerHTML = error;
      results.classList.add("error");
    });
}

function bindResultsToPanel(features) {
  results.innerHTML = "";
  if (features.length > 0) {
    features.map((feature) => {
      const attributes = feature["attributes"];
      const resultListItem = document.createElement("table");

      results.classList.remove("error");
      resultListItem.classList.add("result");
      Object.keys(attributes).map((key) => {
        if (attributes[key]) {
          resultListItem.innerHTML =
            resultListItem.innerHTML +
            `<tr><td><b>${key} </b></td><td>${attributes[key]}</td></tr>`;
        }
      }),
        results.appendChild(resultListItem);
    });
  } else {
    results.innerHTML = "No results found";
    results.classList.add("error");
  }
}

function debouncePromise(fn, delay) {
  let timeoutId = null;
  let latestResolve = null;
  let latestReject = null;

  return function (...args) {
    return new Promise((resolve, reject) => {
      if (timeoutId !== null) {
        clearTimeout(timeoutId);
      }

      latestResolve = resolve;
      latestReject = reject;
      timeoutId = setTimeout(() => {
        fn(...args)
          .then((result) => {
            if (latestResolve === resolve && latestReject === reject) {
              resolve(result);
            }
          })
          .catch((error) => {
            if (latestResolve === resolve && latestReject === reject) {
              reject(error);
            }
          });
      }, delay);
    });
  };
}

window.initMap = initMap;

    
        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;
  display: none;
  overflow-y: auto;
  background-color: #fff;
}

#suggestions-list.visible {
  display: block;
}

#suggestions-list li {
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#suggestions-list li:hover {
  background-color: #f2f2f2;
}

#sidebar {
  flex-basis: 18rem;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12);
  z-index: 1;
}

#innerWrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 10px 40px;
}

#mapContainer {
  display: flex;
  flex-direction: column;
  flex-basis: 70vw;
  flex-grow: 5;
  position: relative;
}

#od-selector {
  width: 100%;
}

.od-container {
  padding: 5px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#od-selector span {
  padding: 0 5px;
  width: 100px;
  font-size: 10pt;
  font-weight: 600;
}

.sectionHeader {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  margin: 20px -10px 5px;
  padding: 5px 10px;
  color: #222;
}
.sectionHeader span {
  font-size: 0.85em;
  font-weight: 600;
}
.sectionHeader:first-child {
  margin-top: 0;
}

.dropdown__container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dropdown__container > label {
  padding-left: 10px;
}

ol#results {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}
ol#results.error {
  font-size: 10pt;
  font-style: italic;
  font-weight: 600;
}
ol#results > table {
  border: none;
  border-bottom: 1px solid #dfdfdf;
  padding: 5px;
}
ol#results > table:hover {
  cursor: pointer;
  background-color: #f2f2f2;
}
ol#results > table table.result:last-child {
  border: none;
}
ol#results > table td {
  font-size: 10pt;
  max-width: 200px;
  text-align: left;
  color: #555;
  word-break: break-word;
  vertical-align: top;
}

.btn {
  width: 80px;
  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: #0a2ffe;
}

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


    
        <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" />

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </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="07908ffb-14e8-46a1-a35e-5d5a305ca140">
                    US National Risk Index
                  </option>
                  <option value="bd95d206-4822-4b78-9e82-ab724a888aeb">
                    Worldwide Solar Potential
                  </option>
                  <option selected value="fd2732a6-714d-4894-98ef-c0c7744a399c">
                    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 0 16 16">
            <path
              d="M3.617 7.083a4.338 4.338 0 1 1 8.676 0 4.338 4.338 0 0 1-8.676 0m4.338-5.838a5.838 5.838 0 1 0 2.162 11.262l2.278 2.279a1 1 0 0 0 1.415-1.414l-1.95-1.95A5.838 5.838 0 0 0 7.955 1.245"
              fill-rule="evenodd"
              clip-rule="evenodd"
            ></path>
          </svg>

          <input
            type="text"
            id="autocomplete-input"
            placeholder="Search an Address..."
            autocomplete="off"
          />
          <button aria-label="Clear" class="clear-searchButton" type="button">
            <svg class="clear-icon" viewBox="0 0 24 24">
              <path
                d="M7.074 5.754a.933.933 0 1 0-1.32 1.317L10.693 12l-4.937 4.929a.931.931 0 1 0 1.319 1.317l4.938-4.93 4.937 4.93a.933.933 0 0 0 1.581-.662.93.93 0 0 0-.262-.655L13.331 12l4.937-4.929a.93.93 0 0 0-.663-1.578.93.93 0 0 0-.656.261l-4.938 4.93z"
              ></path>
            </svg>
          </button>
          <ul id="suggestions-list"></ul>
        </div>
      </div>
    </div>

    <script
      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap&libraries=drawing"
      defer
    ></script>
  </body>
</html>

Running the Sample Locally

Before you can run this sample on your local machine, you need to have Git and Node.js installed. If they’re not already installed, follow these instructions to get them set up.

Once you have Git and Node.js installed, you can run the sample by following these steps:

  1. Clone the repository and navigate to the directory of the sample.

  2. Install the necessary dependencies.

  3. Start running the sample.

Here are the commands you can use in your terminal to do this:

Shell
        git clone -b sample/datasets-api https://github.com/woosmap/js-samples.git
cd js-samples
npm i
npm start

You can experiment with other samples by switching to any branch that starts with the pattern sample/SAMPLE_NAME.

Shell
        git checkout sample/SAMPLE_NAME
npm i
npm start
Was this article helpful?
Have more questions? Submit a request