https://jitty.com/assets/atoms/map_component/concerns/h3_popup-f00c3188.js

1import * as h3 from "h3-js";
2export default {
3    h3Hovered(e) {
4        const feature = e.features[0];
5        const properties = feature.properties;
6
7        if (this.hoveredH3Feature && this.hoveredH3Feature.id === feature.id) {
8            return;
9        }
10
11        if (this.hoveredH3Feature) {
12            this.map.setFeatureState(
13                { source: 'h3Source', id: this.hoveredH3Feature.id },
14                { hover: false }
15            );
16        }
17
18        this.hoveredH3Feature = feature;
19        this.map.setFeatureState(
20            { source: 'h3Source', id: feature.id },
21            { hover: true }
22        );
23
24        if (!this.popup) {
25            this.popup = new mapboxgl.Popup({
26                closeButton: false,
27                closeOnClick: false,
28            })
29        }
30
31        const boundary = h3.cellToBoundary(properties.id, true);
32        let topPoint = boundary[0];
33        for (const point of boundary) {
34            if (point[1] > topPoint[1]) {
35                topPoint = point;
36            }
37        }
38
39        const popupContent = this.interpolateTemplate(properties);
40        this.popup
41            .setLngLat(topPoint)
42            .setHTML(popupContent)
43            .addTo(this.map);
44    },
45
46    h3Unhovered(e) {
47        if (this.hoveredH3Feature) {
48            this.map.setFeatureState(
49                { source: 'h3Source', id: this.hoveredH3Feature.id },
50                { hover: false }
51            );
52            this.hoveredH3Feature = null;
53        }
54
55        if (this.popup) {
56            this.popup.remove();
57        }
58    },
59
60    interpolateTemplate(properties) {
61        return this.h3PopupTemplateValue.replace(/\$\{(\w+)\}/g, (_match, key) => properties[key] || '');
62    },
63};