uber / h3-js

h3-js provides a JavaScript version of H3, a hexagon-based geospatial indexing system.
https://uber.github.io/h3
Apache License 2.0
867 stars 78 forks source link

some h3index values create distorted long horizontal line on map #158

Closed neerajTiwari-truminds closed 2 years ago

neerajTiwari-truminds commented 2 years ago

h3 values examples -859b436ffffffff ,859b5dd7fffffff ,859b5dc7fffffff I created hex boundary by using h3ToGeoBoundary(perh3index['key'],true) and when i map them on map they create long horizontal distorted hex(as shown in image). image

Can I know how to resolve this incorrect hex boundary conversion issue?

nrabinowitz commented 2 years ago

This is a rendering issue, not an issue with library output. The library guarantees output within standard lat/lng bounds (-180 to 180 longitude, -90 to 90 latitude), but many renders have poor results for polygons that cross the antimeridian.

To fix in Javascript, see this function: https://observablehq.com/@nrabinowitz/mapbox-utils#fixTransmeridian - it takes the coordinates on the east (negative) side of the antimeridian and turns them into non-standard values > 180 degrees, which generally renders correctly.