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

Vind meer berichten getagd met

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!

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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