javascript - h3 で世界地図をグリッドに分割する

Question

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiYWhtZXRiYXlyYWtjaSIsImEiOiJja3lqN2lzemwxcDZnMzBxcDZ3OHVrdjU5In0.jgPDOZKWtnkHlZiinlNK6Q';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v9',
            center: [-103.5917, 40.6699],
            zoom: 3
        });

        map.on('load', () => {
 
            map.addSource('earthquakes', {
                type: 'geojson',
 
                data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
                cluster: true,
                clusterMaxZoom: 14,  
                clusterRadius: 50  
            });

map.addSource('urban-areas', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson',
});
            map.addLayer({
                id: 'clusters',
                type: 'circle',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                paint: {
 
                    'circle-color': [
                        'step',
                        ['get', 'point_count'],
                        '#51bbd6',
                        100,
                        '#f1f075',
                        750,
                        '#f28cb1'
                    ],
                    'circle-radius': [
                        'step',
                        ['get', 'point_count'],
                        20,
                        100,
                        30,
                        750,
                        40
                    ]
                }
            });

            map.addLayer({
                id: 'cluster-count',
                type: 'symbol',
                source: 'earthquakes',
                filter: ['has', 'point_count'],
                layout: {
                    'text-field': '{point_count_abbreviated}',
                    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                    'text-size': 14
                }
            });

            map.addLayer({
                id: 'unclustered-point',
                type: 'circle',
                source: 'earthquakes',
                filter: ['!', ['has', 'point_count']],
                paint: {
                    'circle-color': '#ccc',
                    'circle-radius': 10,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#fff'
                }
            });
            map.addLayer(
{
'id': 'urban-areas-fill',
'type': 'fill',
'source': 'urban-areas',
'layout': {},
'paint': {
'fill-color': '#f08',
'fill-opacity': 0.4
}
 
} 
);

 
            map.on('click', 'clusters', (e) => {
                const features = map.queryRenderedFeatures(e.point, {
                    layers: ['clusters']
                });
                const clusterId = features[0].properties.cluster_id;
                map.getSource('earthquakes').getClusterExpansionZoom(
                    clusterId,
                    (err, zoom) => {
                        if (err) return;

                        map.easeTo({
                            center: features[0].geometry.coordinates,
                            zoom: zoom
                        });
                    }
                );
            });
 
            map.on('click', 'unclustered-point', (e) => {
                const coordinates = e.features[0].geometry.coordinates.slice();
                const mag = e.features[0].properties.mag;
                const tsunami = e.features[0].properties.tsunami === 1 ? 'yes' : 'no';

 
                while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                }
                new mapboxgl.Popup()
                    .setLngLat(coordinates)
                    .setHTML(
                        `magnitude: ${mag}<br>Was there a tsunami?: ${tsunami}`
                    )
                    .addTo(map);
            });
            map.on('mouseenter', 'clusters', () => {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'clusters', () => {
                map.getCanvas().style.cursor = '';
            });
            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]); 
});
 
    });
        
    </script>

私がやろうとしていることのnode.jsの例を見つけましたが、node.jsを知りません。ここで行ったことを html で js を使用して実行する必要があります。

map.on click で h3index コードへの新しいポイントを作成したいと考えています。これらのドットを丸ではなく六角形にするにはどうすればよいですか?

私は長い間努力してきましたが、できませんでした。例: https://www.marketplace.ovr.ai