topic Re: basemap-gallery and arcgis-map components and USA style in ArcGIS JavaScript Maps SDK Questions

basemap-gallery and arcgis-map components and USA style

GaryB — Mon, 19 May 2025 14:58:20 GMT

My organization’s AGOL is configured to use the U.S. style (e.g. Gulf of America), but I see Gulf of Mexico on my initial map. When I change my basemap (via the basemap gallery) it shows Gulf of America from then on. How does one configure the arcgis-map component so the initial basemap also honors the required style?

Unrelated to the above, the basemap-gallery component has about 35 maps by default. I struggled a bit trying to specify a subset of basemaps to present the user with but I was not successful and would appreciate any code snippets (I think it’s in the view model but I couldn’t get it working).

Re: basemap-gallery and arcgis-map components and USA style

ReneRubalcava — Mon, 19 May 2025 15:30:13 GMT

You can accomplish this by leaving the item-id and basemap empty attributes on the arcgis-map component, then creating your own map/basemap as needed.

https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/how-to-use-a-basemap-with-a-specific-world-view-in-your-web-app

<arcgis-map> </arcgis-map> <script type="module"> const VectorTileLayer = await $arcgis.import("@arcgis/core/layers/VectorTileLayer.js"); const ArcGISMap = await $arcgis.import("@arcgis/core/Map.js"); const Basemap = await $arcgis.import("@arcgis/core/Basemap.js"); const mapElement = document.querySelector("arcgis-map"); // create a VectorTileLayer from a style URL const mapBaseLayer = new VectorTileLayer({ url: "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/topographic", // set the worldview as a custom parameter customParameters: { worldview: "unitedStatesOfAmerica" }, }); const basemap = new Basemap({ // set the VTL as the basemap layer baseLayers: [mapBaseLayer] }); mapElement.map = new ArcGISMap({ basemap }); </script>

https://codepen.io/odoe/pen/dPPEvgY?editors=1000

Re: basemap-gallery and arcgis-map components and USA style

ReneRubalcava — Mon, 19 May 2025 15:32:55 GMT

For your basemap gallery question, you want to create a PortalBasemapSource.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery-support-PortalBasemapsSource.html

You can provide a query for basemaps to load.

This sample shows it's use.

https://developers.arcgis.com/javascript/latest/sample-code/basemaps-portal/

Re: basemap-gallery and arcgis-map components and USA style

GaryB — Tue, 20 May 2025 19:53:43 GMT

Thanks for the input @ReneRubalcava, with your suggestion I was able to figure out how to subset the basemaps in the gallery, however, with regards to the US worldmap style, now I am having the opposite problem where I can get the first map to show the US perspective, but the gallery basemaps revert to the non-US perspective. I've posted my test application at https://github.com/VolpeUSDOT/basemap-sytle. Thanks!

Re: basemap-gallery and arcgis-map components and USA style

ReneRubalcava — Tue, 20 May 2025 20:46:34 GMT

Looking at this blog post, it looks like you would need to set it up in your organization.

https://www.esri.com/arcgis-blog/products/arcgis-online/announcements/esri-vector-basemaps-for-united-states

I haven't done this, but you might be able to go through each one and assign the region in Map Viewer.

Re: basemap-gallery and arcgis-map components and USA style

GaryB — Tue, 20 May 2025 21:23:55 GMT

Our organization is set up for the United States and all of our basemaps in AGOL show up the way I need them to, it just doesn't work in my custom application. In my sample code (see GitHub link in my previous post) I iterated through the basemaps and tried loadedBasemap.style.worldview = 'unitedStatesOfAmerica' but that didn't work either. I'm at a bit of a loss as to what else to try.