Distorted h3 hexagons using h3js with Mapbox

Question

When a user clicks on a Mapbox streets-v11 map, I'm attempting to:

1. Take the clicked point, and identify the h3 hexagon (at resolution 10) around the point
2. Convert the hexagon coordinates into the polygon hexPolygon
3. Highlight building features (from streets-v11/composite source) within hexPolygon

Currently, this functionality is working as expected, except the h3 hexagon coordinates are forming a narrow distorted hexagon. Below is an image of the distorted hexagons being created.

Here is a jsbin with my code. To reproduce, can zoom in on the map until you see buildings render, and click on the map. At that point, a narrow hexagon of buildings should appear highlighted.

(You can then copy the hexPolygon object from the console and paste it into a tool like geojson.io to view the polygon that was created)

And here is the function:

map.on("click", function (e) {

  // Convert a lat/lng point to a hexagon index at resolution 10
  const h3Index = h3.geoToH3(e.lngLat.lng, e.lngLat.lat, 10);

  // Get the center of the hexagon
  const hexCenterCoordinates = h3.h3ToGeo(h3Index);

  // Get the vertices of the hexagon
  const hexBoundary = h3.h3ToGeoBoundary(h3Index);

  hexBoundary.push(hexBoundary[0]);

  console.log(h3Index);
  console.log(hexCenterCoordinates);
  console.log(hexBoundary);


  const hexPolygon = {
    type: 'Feature',
    properties: {
      paint: {
        "line-color": "red"
      }
    },
    geometry: {
      type: 'Polygon',
      coordinates: [hexBoundary]
    }
  };


  var features = map.querySourceFeatures("composite", {
    sourceLayer: "building"
  });

  console.log("features:");
  console.log(features);

  const collector = [];

  console.log('hexPolygon:');
  console.log(hexPolygon);

  for (let i = 0; i < features.length; i++) {

    const feature = features[i]

    if (feature.geometry.type === "Polygon" && turf.booleanWithin(feature, hexPolygon)) {
      collector.push(features[i]);
    }
  }

  console.log("collector:");
  console.log(collector);

  const buildingsHighlightedLayer = map.getSource("buildings");
  buildingsHighlightedLayer.setData({
    type: "FeatureCollection",
    features: collector
  });
});

Answer 1

Something is definitely off there - while H3 hexagons do have some distortion in various parts of the globe, and while this distortion is further distorted at extreme latitudes when rendered in a Mercator projection, this is significantly more distorted than it ought to be.

• What lat/long are you displaying? Have you tried the same hex indexes in https://observablehq.com/@nrabinowitz/h3-index-inspector ?
• It looks like you’re probably using lat,long output from h3ToGeoBoundary, which is probably the issue. Tryh3.h3ToGeoBoundary(h3Index, true) (the second argument gives you GeoJSON-conformal output)

Answer 2

When you run h3ToGeoBoundary it returns pairs of long,lat not lat,long. Make sure you account for this properly.

Answer 3

const h3Index = h3.geoToH3(e.lngLat.lng, e.lngLat.lat, 10);

geoToH3 function accepts latitude and then longitude. You changed places.

h3.geo_to_h3(lat, lng, resolution)