H3-Map.js

The goal of this project is to provide a proper workflow for working with uber/h3 by using the h3 API in the context of a map. H3 is a Hexagonal hierarchical geospatial indexing system created and used by uber most notably display surge regions on their app in the form of hexagons.

If you want to use h3 in your map there are a few practices that will make your map render appropriatelly and life easier and this project aims to help you implement this feature sucessfully.

Install

npm i h3-map-js

Getting Started

import H3Map from 'h3-map-js';

// 4 point rectangle bounds of map context
// formatted at [lat, long]
const bounds = [
  [10, 10],
  [-10, 10],
  [10, -10],
  [-10, -10],
];

// data points within map context
// formatted at [lat, long]
const focusPoints = [
  [1, 1],
  [5, 5],
  [-1, -1],
  [-5, -5],
];

// instance of map at current context
const mapResolution = 1;
const userPosition = [0, 0];
const mapContext = new H3Map(mapResolution, userPosition, bounds, focusPoints);

// get user position h3 index
mapContext.getUserH3Set();

// get h3 index set within bounds
mapContext.getBackgroundH3Set();

// get h3 index set for focus data points
mapContext.getFocusH3Set();

Rendering a Map

// returns unique sets grouped by type
mapContext.getDistinctSetGroup();