wrld.js

Picking buildings

Highlight buildings by clicking on them.

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
  </head>
  
  <body>
  <div style="position: relative">
    <div id="map" style="height: 400px"></div>
    <script>
        var map = L.Wrld.map("map", "your_api_key_here", {
            center: [37.795641, -122.404173],
            zoom: 18
        });

        var _mouseDownPoint = null;

        map.on("mousedown", onMouseDown);
        map.on("mouseup", onMouseUp);

        function onMouseDown(event) {
            _mouseDownPoint = event.layerPoint;
        }

        function onMouseUp(event) {
            var mouseUpPoint = event.layerPoint;
            var mouseMoved = mouseUpPoint.distanceTo(_mouseDownPoint) > 5;

            if (!mouseMoved) {
                var result = map.buildings.findBuildingAtScreenPoint(event.layerPoint);
                if (result.found) {
                    var buildingHighlight = L.Wrld.buildings.buildingHighlight(
                        L.Wrld.buildings.buildingHighlightOptions()
                            .highlightBuildingAtScreenPoint(event.layerPoint)
                            .color([255, 255, 0, 128])
                        )
                        .addTo(map);

                    setTimeout(function() {
                        buildingHighlight.remove();
                    }, 4000);
                }

            }
        }
    </script>
  </div>
  </body>
</html>
v0.1.1452