Custom POI Views

This example shows how to display POI Views containing custom HTML.

Click on the marker to display the POI card. Then click on the POI card to display the POI View.

This is an optional component with a few dependencies. To use it, you will have to include JQuery, wrld.css and marker_controller.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" />

    <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/marker_controller/v1/latest/marker_controller.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: [56.461387, -2.976966],
        zoom: 17,
        headingDegrees: 310
      });

      var markerController = new WrldMarkerController(map, { poiViewsEnabled: true });

      var markerId = 0;
      var markerOptions = {
        poiView: {
          title: "WRLD",
          customView: "custom_view.html",
          customViewHeight: 200
        },
        iconKey: "offices"
      };

      var marker = markerController.addMarker(markerId, [56.459941, -2.978211], markerOptions);
    </script>

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