Get features under the mouse pointer

Use queryRenderedFeatures to show properties of hovered-over map elements. See the example: https://docs.mapbox.com//mapbox-gl-js/example/queryrenderedfeatures/

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0-rc.6/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.0.0-rc.6/mapbox-gl.css">
<div id="map"></div>
<pre id="features"></pre>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #features {
        position: absolute;
        height: 240px;
        overflow: scroll;
        top: 0;
        right: 0;
        width: 50%;
        background: rgba(0, 0, 0, 0.25);
        color: white;
    }
    #map canvas {
        cursor: crosshair;
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

const style = {
  "version": 8,
  "name": "Streets",
  "center": [-73.988171, 40.733843],
  "zoom": 17.19,
  "bearing": -24.799999999999955,
  "pitch": 0,
  "fragment": false,
  "lights": [{
      "id": "ambient",
      "type": "ambient",
      "properties": {
        "color": "hsl(0, 0%, 100%)",
        "intensity": 0.8
      }
    },
    {
      "id": "directional",
      "type": "directional",
      "properties": {
        "color": "hsl(0, 22%, 81%)"
      }
    }
  ],
  "sources": {
    "mapbox://mapbox.mapbox-3dbuildings-v1": {
      "url": "mapbox://mapbox.mapbox-3dbuildings-v1",
      "type": "batched-model"
    }
  },
  "sprite": "mapbox://sprites/fallsemo21/clphgq7a9000f01oibxgf375w/ck2u8j60r58fu0sgyxrigm3cu",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "projection": {
    "name": "globe"
  },
  "layers": [{
    "id": "building-models",
    "type": "model",
    "source": "mapbox://mapbox.mapbox-3dbuildings-v1",
    "minzoom": 14,
    "paint": {
      "model-scale": [
        "interpolate",
        ["linear"],
        ["zoom"],
        14.2,
        [1, 1, 0],
        14.5,
        [1, 1, 1]
      ],
      "model-opacity": [
        "interpolate",
        ["linear"],
        ["zoom"],
        14.2,
        0,
        14.5,
        1
      ],
      "model-roughness": ["match", ["get", "part"], "window", 0, 1],
      "model-emissive-strength": [
        "match",
        ["get", "part"],
        "door",
        [
          "interpolate",
          ["linear"],
          ["measure-light", "brightness"],
          0.2,
          1.5,
          0.4,
          2.5
        ],
        "logo",
        0.6,
        "wall",
        [
          "interpolate",
          ["linear"],
          ["measure-light", "brightness"],
          0,
          0.1,
          0.2,
          0.2
        ],
        "window",
        ["random", 0.5, 0.8,...