go to developers doc

Render store listing nearby a position

Build the coffee shop location listing by searching for stores nearby a position.
  1. Search Stores
  2. Build Store Listing

Search Stores

JavaScript
        function search(location) {
  if (location) {
    const searchParams = new woosmap.search.SearchParameters({
      lat: location.lat,
      lng: location.lng,
      page: 1,
      storesByPage: 15
    });
    let dataSource = new woosmap.DataSource();
    dataSource.searchStoresByParameters(searchParams, function(stores) {
      mapView.set('location', location);
      mapView.set('stores', stores.features);
      buildTableView(stores.features);
    });
  }
}
search({lat: 51.53, lng: -0.185});

Build Store Listing

HTML
        <div id="main">
  <div id="my-map-container">
    <div id="my-map"></div>
  </div>
  <div id="sidebar-container">
    <div id="sidebar">
      <section id="listing-stores-container">
      </section>
      <section id="selected-store-container">
      </section>
    </div>
  </div>
</div>
JavaScript
        const summaryStoreTemplate = "<div class='controls summary-store-card'><div>" +
        "<div><strong>{{name}} - {{address.city}}</strong></div>" +
        "<div><div class='store-address'>{{address.lines}}</div>" +
        "{{#contact.phone}}<div class='store-contact'>"+
        "<a href='tel:{{contact.phone}}'>{{contact.phone}}</a></div>{{/contact.phone}}</div></div>" +
        "<div class='store-photo'><img src='./images/default.svg'/></div></div>";

function getSummaryRenderedTemplate(store) {
  const templateRenderer = new woosmap.TemplateRenderer(summaryStoreTemplate);
  return templateRenderer.render(store.properties);
}

function buildTableView(stores) {
  const $listingStores = woosmap.$('#listing-stores-container');
  for (store in stores) {
    const $cell = woosmap.$(document.createElement('div'));
    $cell.append(getSummaryRenderedTemplate(stores[store]));
    $cell.data('store', stores[store]);
    $cell.click(function() {
      const storeData = woosmap.$(this).data('store');
      selectedStoreObj.set('selectedStore', storeData);
    });
    $listingStores.append($cell);
  }
}