Using the POI API

Query the POI REST API. When you click on the map, this example will search and display markers for any nearby POIs. To set up places on your map that can be searched, use the Places Designer with your API key.

This is an optional component with a few dependencies. To use it, you will have to include poi_api.js as shown in the code sample below.

<!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" /><script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/poi_api/v1/latest/poi_api.js"></script>
  </head>
  
  <body>
  <div style="position: relative">
    <div id="map" style="height: 400px"></div>
    <script>
      var map = Wrld.map("map", "your_api_key_here", {
        center: [37.7952, -122.4028],
        zoom: 15
      });

      var poiApi = new WrldPoiApi("your_api_key_here");
      var markers = [];

      function displaySearchResults(success, results) {
          map.closePopup();
          if (success) {
              results.forEach(function(result) {
                  var marker = Wrld.marker([result["lat"], result["lon"]], {
                     title: result["title"],
                     elevation: result["height_offset"]
                  }).addTo(map);

                  markers.push(marker);
              });
          }
          else {
              map.openPopup("POI API query failed!", map.getCenter());
          }
      }

      function searchPoisAroundClick(event) {
          markers.forEach(function(marker) { marker.remove(); });
          map.openPopup("Searching...", event.latlng);

          var callback = displaySearchResults;
          var options = { range: 500, number: 5 };
          poiApi.searchTags([], event.latlng, callback, options);
      }

      map.on("click", searchPoisAroundClick);
    </script>

  </div>
  </body>
</html>