Using the Marker Controller and Searchbar together with POI Views

This example shows how you can use the marker controller and searchbar together to easily display search results with POI views.

To use the components in this example, you will have to include JQuery, wrld.css 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" />

    <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.79505, -122.40815],
        zoom: 15
      });

      var searchbarConfig = {
        apiKey: "your_api_key_here",
        outdoorSearchMenuItems: [
          {name: "Around Me", searchTag: "", iconKey: "aroundme"},
          {name: "Tourism", searchTag: "tourist_info", iconKey: "tourist_info"}
        ],
        locationJumps: [
          {name: "San Francisco", latLng: [37.7952, -122.4028]}
        ]
      };
      var searchbar = new WrldSearchbar("widget-container", map, searchbarConfig);
      var markerController = new WrldMarkerController(map, {
        searchbar: searchbar,
        poiViewsEnabled: true
      });

      searchbar.on("searchresultselect", goToResult);

      function goToResult(event) {
        markerController.openPoiView(event.result.sourceId);
        map.setView(event.result.location.latLng, 15);
      }
    </script>

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