nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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"?

Find more posts tagged with

Accepted answers

ReneRubalcava

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);

All comments

ReneRubalcava

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-BasemapGalleryViewModel.html?

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/#referenceElement

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-javascript-maps-sdk-components/

ForrestLin

@ReneRubalcava

Thank you so much!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.