basemap-gallery and arcgis-map components and USA style

[GaryB]

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

[ReneRubalcava]

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-speci...

  <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

[ReneRubalcava]

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

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

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/

[GaryB]

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!

[ReneRubalcava]

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-unite...

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

[GaryB]

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.