Unable to Load H3 hexagons on top of google vector maps

[vishnu947]

Description

Here i am trying to load hexagons using vector maps. But i am unable to load it. Instead i can able to load using raster Maps by using the same below snippet without mapId.

import { H3HexagonLayer } from "@deck.gl/geo-layers";
import { GoogleMapsOverlay as DeckOverlay } from "@deck.gl/google-maps";

map = new google.maps.Map(
document.getElementById("map"),
{
center: {
lat: intlat.value,
lng: intlong.value,
},
zoom: zoomVal,
mapId: "************", //Enabled for Vector Maps
}
);

 overlay.value = new DeckOverlay({
          layers: [layers],
        });
        overlay.value.setMap(map);
        
        My Layer i am using is **H3HexagonLayer** :
         layers = dataChunks.map(
      (chunk, chunkIndex) =>
        new H3HexagonLayer({
          id: `chunk-${chunkIndex}`,
          data: chunk,
          wireframe: true,
          filled: true,
          pickable: true,
          coverage: 1,
          // extruded: true,
          elevationScale: 10,
          getHexagon: (d) => d.hex,
        
        })
    );

Attached screenshot is the data format i am getting which works for raster maps but not for vector maps:

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

Make sure it will load the hexagons by using vector maps

Steps to Reproduce

https://deck.gl/docs/api-reference/geo-layers/h3-hexagon-layer

On top of google vector map i need to load like in the above link.

Environment

• Framework version: deck.gl@8.9.32
• Browser:
• OS:

Logs

No response

[emalihin]

PolygonLayer and IconLayer also don't render on top of a vector base map with GoogleMapsOverlay (when mapId is set to a vector map).

As soon as I comment out mapId to use a default raster map - polygons and icons are rendered.

All Deck packages at version 9.0.14

[Pessimistress]

https://deck.gl/examples/google-maps shows GoogleMapsOverlay working with a vector map.
If you believe there is a bug, provide fully functional code that reproduces your issue using Codepen, CodeSandbox or a similar service.

[emalihin]

Google's own ArcLayer example works on their site, but not with my vue3 app with vector map. Works ok with raster still.. going to try to dig into it..

upd1: downgrading from 9.0.14 to 8.9.36 doesn't help
upd2: I can see that canvas id="deckgl-overlay" is not added to DOM when I select a vector mapId, instead canvas w/o id is inserted into DOM

[Pessimistress]

Integration with raster and vector follow completely different implementations, please read https://deck.gl/docs/developer-guide/base-maps/using-with-google-maps#integration-modes

Your issue is very likely related to the particular setup of your project, so as I said, providing a full reproduction is necessary for the maintainers to look into it.

[emalihin]

my issue is this vuejs/core#10776. As soon as I don't store map in Pinia, all layers work fine.

[Pessimistress]

Vuejs is known to mutate data objects in a way that is incompatible with third party libraries. I do not know anything about the data store you are using, but in general we recommend vue users to opt out Deck/Layer instances from reactivity, e.g. markRaw

Some values simply should not be made reactive, for example a complex 3rd party class instance, or a Vue component object.

[emalihin]

thank you! TIL about markRaw & it worked right away:

        store.map = markRaw(new google.maps.Map(document.getElementById('map'), {
            maxZoom: 19,
            center: new google.maps.LatLng(56.95, 24.1),
            mapId: "f88f2570006f9309",
            zoom: 17,
        }));

I hope I haven't hijacked @vishnu947 issue, and theirs was in vuejs as well.