Release SDK 1.3 - Filtering Data

jsFiddle demo that allow you to Filter the data 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">Refine By Geography</div>
    <div class="dropShadow">
      <div>
        <label for="address">Search Stores Nearby </label>
        <input type="text" name="Address" id="address" placeholder="Address" />
      </div>
      <div>
        <label for="stores-limit">Max Returned Stores</label>
        <input name="stores-limit" type="number" id="stores-limit" min="10" max="200" step="10" value="100">
      </div>
      <div>
        <label for="stores-distance">Max Distance (km)</label>
        <input name="stores-distance" type="number" id="stores-distance" min="10" max="500" step="10" value="150">
      </div>
    </div>
  </div>
</div>
<div class="info-filtering-data-tool">
  <div id="filtering-data-tool">
    <div class="header">Filtering</div>
    <div class="dropShadow">
      <div>
        <label for="type">Filter by Type </label>
        <select id="type">
          <option value="all">All</option>
          <option value="bose_store">Bose Store</option>
          <option value="bose_reseller">Reseller</option>
          <option value="professional_systems">Professional Systems</option>
          <option value="aviation">Aviation</option>
          <option value="bose_music_partners">Music Partners</option>
          <option value="bose_excellence_centre">Excellence Centre</option>
          <option value="bose_factory_store">Factory Store</option>
          <option value="bose_shop-in-shop">Shop In Shop</option>
        </select>
      </div>
      <div>
        <label for="tag">Filter by Available Service (Tag) </label>
        <select id="tag">
          <option value="all">All</option>
          <option value="wheelchair_access">Wheelchair Access</option>
          <option value="in-store_wi-fi">Wi-Fi</option>
          <option value="parking">Parking</option>
         ...

CSS

#my-map {
   height: 540px;
   width: 100%;
 }
 
 .header,
 .header-grey {
   padding: 8px;
   margin: -8px -8px 8px;
   color: #FFF;
 }
 
 .header {
   background-color: #03A9F4;
 }
 
 .header-grey {
   background-color: #9e9e9e;
 }
 
 .dropShadow {
   box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
   padding: 8px;
   margin: -8px;
   overflow: auto;
 }
 
 hr {
   border: 0;
   height: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 code {
   font-family: Consolas, Courier, monospace;
   color: #333;
   padding: 0.2em 0.4em;
   font-size: 0.9em;
   background: rgb(247, 247, 247);
 }
 
 input,
 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=select]:focus {
   outline: 0;
   border-color: #03A9F4;
 }
 
 select {
   height: 2.25em;
   border: 1px solid #ccc;
   background-color: #fff;
 }
 
 #filtering-data-tool,
 #geography-data-tool,
 #result-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-filtering-data-tool,
 .info-geography-data-tool,
 .info-search-parameters-options {
   margin: 18px;
   z-index: 0;
   position: absolute;
   display: block;
   max-width: 280px;
   max-height: 500px;
 }
 
 .info-filtering-data-tool {
   left: 0;
   top: 292px;
 }
 
 .info-geography-data-tool {
   left: 0;
   top: 0;
 }
 
 .info-search-parameters-options {
   right: 0;
   top: 0;
 }
 
 pre...

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;
var googleKey = "AIzaSyCOtRab6Lh2pNn7gYxvAqN5leETC24OXYQ";


/*---- for pretty print json Search Parameters -----*/
function syntaxHighlight(json) {
  if (typeof json != 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
    var cls = 'number';
    if (/^"/.test(match)) {
      if (/:$/.test(match)) {
        cls = 'key';
      } else {
        cls = 'string';
      }
    } else if (/true|false/.test(match)) {
      cls = 'boolean';
    } else if (/null/.test(match)) {
      cls = 'null';
    }
    return '<span class="' + cls + '">' + match + '</span>';
  });
}


/*----- instantiate a Custom Search Object-----*/
function Search() {
  var mapView, dataSource, searchParameters = null;
  var query = {}; //looks like {type: "myType", tag: "myTag"}
  var latitude, longitude = null;
  return {
    getMapView: function() {
      return mapView;
    },
    setMapView: function(newMapView) {
      mapView = newMapView;
    },
    setDataSource: function(newDataSource) {
      dataSource = newDataSource;
    },
    setLatitude: function(newLat) {
      latitude = newLat;
    },
    setLongitude: function(newLng) {
      longitude = newLng;
    },
    setQuery: function(filter, newQueryEntry) {
      query[filter] = newQueryEntry;
    },
    removeQuery: function(filter) {
      delete query[filter];
    },
    setSearchParameters: function(callback) {
      var paramForSearch = {};
      var level = Object.keys(query).length;
      var typeCondition = 'type:\"' + query.type + '\"';
      var tagCondition =...