wrld.js
JavaScript
iOS
Android
Unity

Using a custom Places search service with the Searchbar

This example demonstrates the use of a custom Places search service with the Searchbar.

Try performing an 'Around Me' search from the 'Find' menu to view all available Places results.

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://unpkg.com/wrld.js@1.x.x"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />

    <link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/v1/latest/css/wrld.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/searchbar/v1/latest/searchbar.js"></script>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/marker_controller/v1/latest/marker_controller.js"></script>

  </head>
  
  <body>
  <div style="position: relative">
    <div id="widget-container" class="wrld-widget-container"></div>
    <div id="map" style="height: 400px"></div>
    <script>
      var map = Wrld.map("map", "your_api_key_here", {
        center: [37.794, -122.41],
        zoom: 15
      });

      var tags = [
        {name: "Around Me", searchTag: "", iconKey: "aroundme"},
        {name: "Accommodation", searchTag: "accommodation", iconKey: "accommodation"},
        {name: "Burgers", searchTag: "burgers", iconKey: "burgers"},
        {name: "Food & Drink", searchTag: "food_drink", iconKey: "food_drink"},
        {name: "Hotel", searchTag: "hotel", iconKey: "hotel"},
        {name: "Tourism", searchTag: "tourist_info", iconKey: "tourist_info"},
        {name: "Wine", searchTag: "wine", iconKey: "wine"}
      ];

      var places = [
        {title: "Transamerica Pyramid", location: { latLng: Wrld.latLng(37.7952, -122.4028) , elevation: 260 }, tags: ["tourist_info"], iconKey: "tourist_info"},
        {title: "A Place to Stay", location: { latLng: Wrld.latLng(37.7918, -122.401) }, tags: ["accommodation"], iconKey: "accommodation"},
        {title: "A Grand Hotel", location: { latLng: Wrld.latLng(37.7928, -122.402) }, tags: ["hotel", "accommodation"], iconKey: "hotel"},
        {title: "Wine & Dine", subtitle: "California St, San Francisco", location: { latLng: Wrld.latLng(37.7922, -122.406) }, tags: ["wine", "food_drink"], iconKey: "wine"},
        {title: "San Fran Burgers", subtitle: "Powell St, San Francisco", location: { latLng: Wrld.latLng(37.7905, -122.409) }, tags: ["burgers", "food_drink"], iconKey: "burgers"}
      ];

      var sort = function(arrayToSort) {
        return arrayToSort.sort(function(lhs, rhs) {
          if (lhs.pos === rhs.pos) {
            if (!("distSqr" in lhs)) return 0;
            return lhs.distSqr - rhs.distSqr;
          }
          return lhs.pos - rhs.pos;
        });
      };

      var calculateDistSqr = function(latLng1, latLng2) {
        return Math.pow(latLng1.lat - latLng2.lat, 2) + Math.pow(latLng1.lng - latLng2.lng, 2);
      };

      var placesSearchService = {
        fetchAllNearbyPlaces: function(latLng, callback) {
          var results = places.map(function(place, index) {
            return Object.assign({}, place, {
              sourceId: index,
              distSqr: calculateDistSqr(latLng, place.location.latLng)
            });
          });
          callback(sort(results));
        },

        fetchNearbyPlacesByTerm: function(latLng, term, callback) {
          term = term.trim().toLowerCase();
          var results = [];
          if (term.length > 0) {
            places.forEach(function(place, index) {
              var termPos = place.title.toLowerCase().indexOf(term);
              if (termPos !== -1) {
                results.push(Object.assign({}, place, {
                  sourceId: index,
                  pos: termPos,
                  distSqr: calculateDistSqr(latLng, place.location.latLng)
                }));
              }
            });
          }
          callback(sort(results));
        },

        fetchNearbyPlacesByTag: function(latLng, tag, callback) {
          var results = [];
          places.forEach(function(place, index) {
            var tagPos = place.tags.indexOf(tag);
            if (tagPos !== -1) {
              results.push(Object.assign({}, place, {
                sourceId: index,
                pos: tagPos,
                distSqr: calculateDistSqr(latLng, place.location.latLng)
              }));
            }
          });
          callback(sort(results));
        },

        fetchAutocompleteOptions: function(latLng, term, callback) {
          term = term.trim().toLowerCase();
          var options = [];
          if (term.length > 0) {
            places.forEach(function(place, index) {
              var termPos = place.title.toLowerCase().indexOf(term);
              if (termPos !== -1) {
                options.push(Object.assign({}, place, {
                  pos: termPos,
                  distSqr: calculateDistSqr(latLng, place.location.latLng)
                }));
              }
            });
          }
          callback(sort(options));
        },

        fetchTagOptions: function(term, callback) {
          term = term.trim().toLowerCase();
          var options = [];
          if (term.length > 0) {
            tags.forEach(function(tag, index) {
              var termPos = tag.name.toLowerCase().indexOf(term);
              if (termPos !== -1) {
                options.push(Object.assign({}, tag, {pos: termPos}));
              }
            });
          }
          callback(sort(options));
        }
      };

      var searchbarConfig = {
        outdoorSearchMenuItems: tags,
        placesSearchService: placesSearchService
      };

      var searchbar = new WrldSearchbar("widget-container", map, searchbarConfig);
      new WrldMarkerController(map, { searchbar: searchbar });
    </script>

  </div>
  </body>
</html>
v1.1.0