Using the Marker Controller

Create and manipulate styled markers.

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: [37.7849, -122.4024],
        zoom: 17
      });

      var markerController = new WrldMarkerController(map);

      // Markers must have unique ids
      var markerIds = [0, 1];
      var marker0 = markerController.addMarker(markerIds[0], [37.7856, -122.4027], { iconKey: "pin" });
      var marker1 = markerController.addMarker(markerIds[1], [37.7845, -122.4012], { iconKey: "aroundme" });

      marker0.on("click", function(e) { markerController.selectMarker(marker0); });
      marker1.on("click", function(e) { markerController.selectMarker(marker1); });
    </script>

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