Release SDK 1.3 - Searching Data Attributes

jsFiddle demo that allow you to Search the data bounded to current extent author(s): Woosmap DevTeam

by woosmap

HTML

<script src="https://sdk.woosmap.com/locator/loader.js"></script>
<div id="my-map"></div>
<div class="info-geography-data-tool">
  <div id="geography-data-tool">
    <div class="header">Search In Attributes</div>
    <div class="dropShadow">
      <div>
        <label for="search-input">Search in Stores</label>
        <input type="text" name="Search" id="search-input" placeholder="Search in Stores..." />
        <label>For Selected Fields</label>
        <ul class="grid">
          <li>
            <input type="checkbox" id="name" class="fieldchk" value="name" checked="true" />
            <label for="name">Name</label>
          </li>
          <li>
            <input type="checkbox" id="city" class="fieldchk" value="city" checked="true" />
            <label for="city">City</label>
          </li>
        </ul>
      </div>
      <br/>
      <div>
        <label>Where To Search</label>
        <br/>
        <input type="radio" name="group-bounds" id="chk-current-extent" checked>Current Extent
        <input type="radio" name="group-bounds">Everywhere
        <table class="north-arrow">
          <tr>
            <td></td>
            <td>
              <div id="northBound"></div>
            </td>
            <td></td>
          </tr>
          <tr>
            <td>
              <div id="westBound"></div>
            </td>
            <td><img class="northarrow-img" src="https://images.woosmap.com/northarrow.svg" />
            </td>
            <td>
              <div id="eastBound"></div>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <div id="southBound"></div>
            </td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="count-store-container">Displayed Stores: <strong id="count-store-value"></strong></div>

CSS

#my-map {
     height: 540px;
     width: 100%;
   }
   
   .header {
     padding: 8px;
     margin: -8px -8px 8px;
     color: #FFF;
     background-color: #607d8b;
   }
   
   .dropShadow {
     box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
     padding: 8px;
     margin: -8px;
     overflow: auto;
   }
   
   input[type=text],
   input[type=text],
   input[type=number],
   select {
     margin: .25em 0 0.7em;
     padding: .5em .6em;
     border: 1px solid #ccc;
     box-shadow: inset 0 1px 3px #ddd;
     border-radius: 4px;
     vertical-align: middle;
     font-weight: normal;
     letter-spacing: 0.01em;
     font-size: 1em;
     display: inline-block;
     box-sizing: border-box;
     width: 100%;
   }
   
   input[type=text]:focus,
   input[type=text]:focus {
     outline: 0;
     border-color: #03A9F4;
   }
   
   select {
     height: 2.25em;
     border: 1px solid #ccc;
     background-color: #fff;
   }
   
   #geography-data-tool,
   .count-store-container {
     padding: 8px;
     border-style: none;
     border-radius: 2px;
     box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
     background-color: #fafafa;
     max-height: 500px;
     overflow: auto;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   }
   
   .info-geography-data-tool {
     margin: 18px;
     z-index: 0;
     position: absolute;
     display: block;
     max-width: 280px;
     max-height: 500px;
   }
   
   .info-geography-data-tool {
     left: 0;
     top: 0;
   }
   
   .north-arrow {
     margin-top: 10px;
     border: 1px dashed #D6D6D6;
     height: 150px;
     width: 100%;
     text-align: center;
   }
   
   .grid li {
     display: block;
     float: left;
     width: 33%;
   }
   
   ul {
     margin: 0;
     margin-bottom: 2em;
     padding: 0;
   }
   
   .northarrow-img {
     position: absolute;
     left: 116px;
     top: 310px;
   }
  ...

JavaScript

var projectKey = 'woos-0c78592f-13ea-362b-aa07-ba4ba9ea3dae';
  var locatorConfigFile = 'https://s3.eu-central-1.amazonaws.com/webapp-conf.woosmap.com/woos-0c78592f-13ea-362b-aa07-ba4ba9ea3dae/webapp-conf.json';
  var mSearch = null;


  /*----- instantiate a Custom Search Object-----*/
  function Search() {
    var mapView, dataSource, searchParameters = null;
    var bounds = {};
    var refresh = false;
    var textToSearch = "";
    return {
      getMapView: function() {
        return mapView;
      },
      setMapView: function(newMapView) {
        mapView = newMapView;
      },
      setDataSource: function(newDataSource) {
        dataSource = newDataSource;
      },
      setBounds: function(newBounds) {
        bounds = newBounds;
        woosmap.$("#northBound").text(bounds.north.toFixed(3));
        woosmap.$("#southBound").text(bounds.south.toFixed(3));
        woosmap.$("#eastBound").text(bounds.east.toFixed(3));
        woosmap.$("#westBound").text(bounds.west.toFixed(3));
      },
      setTextToSearch: function(newText) {
        textToSearch = newText;
        refresh = true;
      },
      setSearchParameters: function(callback) {
        var paramForSearch = {};
        var q = woosmap.query;
        if (textToSearch) {
          var conditionFields = [];
          woosmap.$(".fieldchk:checked").each(function() {
            conditionFields.push(woosmap.$(this).val());
          });
          if (conditionFields.length > 0) {
            var condition = conditionFields.map(function(val) {
              return q.F(val, textToSearch);
            });

            paramForSearch.query = condition.length > 1 ? q.or(condition).toString() : condition;
          }
        }

        if (bounds.south && woosmap.$("#chk-current-extent").is(":checked")) {
          paramForSearch.bounds = bounds;
        }
        searchParameters = new woosmap.search.SearchParameters(paramForSearch);
        callback();

      },
      doSearch: function() {
       ...