Highlight features containing similar data

Hover over counties to highlight counties that share the same name. See the example: https://docs.mapbox.com/mapbox-gl-js/example/query-similar-features/

by cs09g

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css">


<div id="map"></div>
<div id="map-overlay" class="map-overlay"></div>

CSS

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.map-overlay {
  font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  position: absolute;
  width: 25%;
  top: 10px;
  left: 10px;
  padding: 10px;
  display: none;
}

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoiY3MwOWciLCJhIjoiY2s0N3Uxemp5MGVzcjNrcGE3bG1uaWs1MCJ9.3-rt7AqzSgxkKKOWR3TEFQ";
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [-98, 38.88],
  minZoom: 2,
  zoom: 8
});

var overlay = document.getElementById("map-overlay");

// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
  closeButton: false
});

map.on("load", function() {
  // Add the source to query. In this example we're using
  // county polygons uploaded as vector tiles
  map.addSource("counties", {
    type: "vector",
    url: "mapbox://mapbox.82pkq93d"
  });

  map.addLayer(
    {
      id: "counties",
      type: "fill",
      source: "counties",
      "source-layer": "original",
      paint: {
        "fill-outline-color": "rgba(0,0,0,0.1)",
        "fill-color": "rgba(0,0,0,0.1)"
      }
    },
    "settlement-label"
  ); // Place polygon under these labels.

  map.addLayer(
    {
      id: "counties-highlighted",
      type: "fill",
      source: "counties",
      "source-layer": "original",
      paint: {
        "fill-outline-color": "#484896",
        "fill-color": "#6e599f",
        "fill-opacity": 0.75
      },
      filter: ["in", "COUNTY", ""]
    },
    "settlement-label"
  ); // Place polygon under these labels.

  map.on("mousemove", "counties", function(e) {
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = "pointer";

    // Single out the first found feature.
    var feature = e.features[0];

    // Query the counties layer visible in the map. Use the filter
    // param to only collect results that share the same county name.
    var relatedFeatures = map.querySourceFeatures("counties", {
      sourceLayer: "original",
      filter: ["in", "COUNTY", feature.properties.COUNTY]
    });

    // Render found features in an overlay.
    overlay.innerHTML = "";
console.log(relatedFeatures);
    // Total the population of all...