How to create a component in 4.32 like creating a widget before

[ForrestLin]

I created basemapGallery:

const basemapGallery = new BasemapGallery({

      view,

      container: "basemap-gallery",

      source: new LocalBasemapsSource({

        basemaps

      })

    });

I got this after updating to 4.32.

How to create a BasemapGallery using "@arcgis/map-components/components/arcgis-basemap-gallery"?

[ReneRubalcava · Accepted solution]

I suppose there's a couple of ways you can do this.

You can update the source on the BasemapGallery element https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-basemap-gallery/

<arcgis-map item-id="06ca49d0ddb447e7817cfc343ca30df9">
  <arcgis-basemap-gallery position="top-right"></arcgis-basemap-gallery>
</arcgis-map>

// in your app somewhere
import LocalBasemapsSource from "@arcgis/core/widgets/BasemapGallery/support/LocalBasemapsSource.js";
const bmgElement = document.querySelector('arcgis-basemap-gallery');
bmgElement.source = new LocalBasemapsSource({
  basemaps
});

If you want to do it all via JS

import LocalBasemapsSource from "@arcgis/core/widgets/BasemapGallery/support/LocalBasemapsSource.js";
const bmgElement = document.createElement('arcgis-basemap-gallery');
bmgElement.position = "top-right";
bmgElement.source = new LocalBasemapsSource({
  basemaps
});
document.querySelector('arcgis-map').appendChild(bmgElement);

[ForrestLin]

Hello @ReneRubalcava,

Thank you for your answer.

Looks like the basemapGallery needs to be on the map:

In my case, it is on different component (in a calcite-panel):

Maybe, I should use BasemapGalleryViewModel? How to use BasemapGalleryViewModel?

BasemapGalleryViewModel provides the logic for the BasemapGallery widget and component. How does it provide?

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery-BasemapGal...?

Forrest

[ReneRubalcava]

All of the components have a referenceElement property and reference-element attribute so it does not need to be inside a map component.

https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-basemap-gallery/#re...

That can be the id to the arcgis-map component. Here is a blog post that might be useful.

https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/build-gis-web-apps-with-javascrip...

[ForrestLin]

@ReneRubalcava 

Thank you so much!