Implementing H3-JS in Mapbox based map to Openlayers based map

Question

In the H3-JS example I have, it is implemented in mapbox. But I would like to integrate the H3-JS binning as part of Openlayers map instead. This is the example I want to implement in OpenLayers. https://github.com/agrc/gis.utah.gov/tree/master/developer/applications/suitability

I had asked this question at the Mapbox Github repo, and was told it can be done. https://github.com/uber/h3-js/issues/160#issuecomment-1251248799

function renderHexes(map, hexagons) {
      console.log("renderHexes");

      // Transform the current hexagon map into a GeoJSON object
      // const geojson = geojson2h3.h3SetToFeatureCollection(
        binnedGeoJSON = geojson2h3.h3SetToFeatureCollection(
        Object.keys(hexagons),
        (hex) => ({ value: hexagons[hex] })
      );

      const sourceId = "h3-hexes";
      const layerId = `${sourceId}-layer`;
      let source = map.getSource(sourceId);

      // Add the source and layer if we haven't created them yet
      if (!source) {
        map.addSource(sourceId, {
          type: "geojson",
          data: binnedGeoJSON, //geojson,
        });
        map.addLayer({
          id: layerId,
          source: sourceId,
          type: "fill",
          interactive: false,
          paint: {
            "fill-outline-color": "rgba(0,0,0,0)",
          },
        });
        source = map.getSource(sourceId);           
      }

      // Update the geojson data
      source.setData(binnedGeoJSON); //geojson);
      //Call my new function to carry out H3-JS in Openlayers
      newMap(binnedGeoJSON);
      console.log('end tomap2')

      // Update the layer paint properties, using the current config values
      map.setPaintProperty(layerId, "fill-color", {
        property: "value",
        stops: [
          [0, config.colorScale[0]],
          [0.5, config.colorScale[1]],
          [1, config.colorScale[2]],
        ],
      });

      map.setPaintProperty(layerId, "fill-opacity", config.fillOpacity);
    }

And my new function is

function newMap(geoJSON)
{
    console.log('Begin NewMap Function: ');
    var coord = [-76.95266723632812, 39.07974903895123];
    
    var features = new ol.format.GeoJSON().readFeatures(geoJSON, { //geojsonObject
    featureProjection: 'EPSG:3857'
    });

    var vectorSource = new ol.source.Vector({ features: features });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
            style: function (feature, resolution) {
                console.log(feature.getProperties(), feature.get('marker-color'));
                return [new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10,
                    fill: new ol.style.Fill({ color: feature.get('marker-color') })
                })
                })];
        }
    });

    var map3 = new ol.Map({
        target: 'map3',
            layers: [
                new ol.layer.Tile({ source: new ol.source.OSM() }),
                vectorLayer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat(coord),
                zoom: 5
            })
    });
    // Add the created layer to the Map
    //map3.addLayer(vectorLayer);
    console.log('End NewMap Function: ');
}

But still the H3-binning results are now shown in the OpenLayers map. Maybe I have to find the Openlayers equivalent for the following function.

So my main question is how to convert the below code block in Mapbox into Openlayers?

// Update the layer paint properties, using the current config values
  map.setPaintProperty(layerId, "fill-color", {
    property: "value",
    stops: [
      [0, config.colorScale[0]],
      [0.5, config.colorScale[1]],
      [1, config.colorScale[2]],
    ],
  });

Upon commenting out the style function, as suggested by Mike, I only get the frames pf the hexagons. They are not shaded and also binning needs to be carried out.

Please advice.

[![enter image description here][2]][2]

Answer 1

If you wish to style the features according to a property "value" as the the Mapbox code you should create corresponding OpenLayers fill styles from your colorScale array

var outlineColor = 'rgba(0,0,0,0)';
var styles = config.colorScale.map(function(fillColor) {
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: outlineColor,
      width: 1,
    }),
    fill: new ol.style.Fill({
      color: fillColor,
    }),
  });
});

then you can use a style function to return the appropriate style

style: function (feature, resolution) {
  var value = feature.get('value');
  return styles[value < 0.5 ? 0 : value < 1 ? 1 : 2];
}),

If you have two sets of data from h3 (geojson and binnedGeoJSON?) it will probably be easier to use a separate OpenLayers source and layer for each.

UPDATE

Your Mapbox code is interpolating colors instead of using simple stops, which will make the OpenLayers style function more involved, as it will need to calculate interpolated colors:

function interpolateColor(value, stops, colors) {
  const index = stops.findIndex((stop) => value <= stop);
  if (index < 0) {
    return colors[colors.length - 1];
  }
  if (index === 0) {
    return colors[0];
  }
  const startColor = ol.color.asArray(colors[index - 1]);
  const endColor = ol.color.asArray(colors[index]);
  const startStop = stops[index - 1];
  const endStop = stops[index];
  const result = [0, 0, 0, 0]
  for (let i = 0; i < 4; ++i) {
    result[i] = startColor[i] + ((endColor[i] - startColor[i]) * (value - startStop) / (endStop - startStop))
  }
  return ol.color.asString(result);
}

var outlineColor = 'rgba(0,0,0,0)';
var style = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: outlineColor,
    width: 1,
  }),
  fill: new ol.style.Fill(),
});

and set that in the returned style

style: function (feature, resolution) {
  var value = feature.get('value');
  style.getFill().setColor(interpolateColor(value, [0, 0.5, 1], config.colorScale))
  return style;
}),

Working example https://jsbin.com/nosoyonemi/edit?html,output (without your school and bus stop local data)