Highlighting indoor map entities from search results

This example shows how you can highlight indoor map entities using POI search results from the searchbar widget.

Enter Westport House and go to the 2nd floor. Perform a category search from the menu and then select one of the results or click on one of the markers.

To use the components in this example, you will have to include JQuery and 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://code.jquery.com/ui/1.12.0/jquery-ui.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/indoor_control/v1/latest/indoor_control.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="searchbar-widget-container" class="wrld-widget-container"></div>
    <div id="indoor-control-widget-container" style="position: absolute; right: 10px; top: 10px; bottom: 26px"></div>
    <div id="map" style="height: 400px"></div>
    <script>
      var map = Wrld.map("map", "your_api_key_here", {
        center: [56.459801, -2.977928],
        zoom: 18,
        indoorsEnabled: true
      });

      var indoorControl = new WrldIndoorControl("indoor-control-widget-container", map);

      var searchbarConfig = {
        apiKey: "your_api_key_here",
        skipYelpSearch: true,
        overrideIndoorSearchMenuItems: true,
        outdoorSearchMenuItems: [
          {name: "Around Me", searchTag: "", iconKey: "aroundme"},
          {name: "Desks", searchTag: "desk", iconKey: "desk"},
          {name: "Meeting Rooms", searchTag: "meeting_room", iconKey: "meeting_room"}
        ],
        locationJumps: [
          {name: "Dundee", latLng: [56.459801, -2.977928]}
        ]
      };
      var searchbar = new WrldSearchbar("searchbar-widget-container", map, searchbarConfig);
      var markerController = new WrldMarkerController(map, {
        searchbar: searchbar
      });

      searchbar.on("searchresultselect", onSearchResultSelect);
      searchbar.on("searchresultsclear", clearHighlights);

      markerController.on("searchresultaddmarker", onMarkerAddFromSearchResult);

      function onSearchResultSelect(event) {
        map.setView(event.result.location.latLng, 20);
        highlightResult(event.result);
      }

      function onMarkerAddFromSearchResult(event) {
        event.marker.on("click", highlightResult.bind(highlightResult, event.result));
      }
      
      function highlightResult(result) {
        clearHighlights();
        map.indoors.setEntityHighlights(result.data.user_data.highlight, result.data.user_data.highlight_color);
      }

      function clearHighlights() {
        map.indoors.clearEntityHighlights();
      }
    </script>

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