basemap imagery with street labels

Question

So, the default "hybrid" basemap (the one with the "hybrid" well-known ID) only has place labels and no street labels. My clients always want to see street labels, too, but that isn't one of the well-known basemap options. For this project we were using a custom map box basemap, but they just sent me this screenshot that shows "tears" in the mapbox imagery which look like the city is on fire. So I'm back to trying an Esri version - but I'm struggling to make it work. I found this: https://www.arcgis.com/home/item.html?id=28f49811a6974659988fd279de5ce39f However, when I add it along with the other basemaps to the basemap gallery, the thumbnail aspect ratio doesn't match the others that I am pulling in with "fromId("topo"), etc. It also has this bizarre popup when they click on the map, which I don't want to show up at all. My code: //this version has the weird thumbnail and popup var labeledStreetsBasemap = new Basemap({ portalItem: { id: "28f49811a6974659988fd279de5ce39f" }, thumbnailUrl: "/images/imageryhybridthumb.png" //this doesn't seem to do anything }); //custom basemap attempt: this doesn't work either (in actual code it's commented out now) //the basemap appears blank/white - templateUrl problem? var labeledStreetsBasemap = new Basemap({ baseLayers: [ new WebTileLayer({ urlTemplate: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/{level}/{col}/{row}.png", subDomains: ['a', 'b', 'c', 'd'], copyright: "Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community." }) ], referenceLayers: [ //hybrid refrence layer: https://www.arcgis.com/home/item.html?id=30d6b8271e1849cd9c3042060001f425 new WebTileLayer({ urlTemplate: "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/{level}/{col}/{row}.png", subDomains: ['a', 'b', 'c', 'd'] }) ], title: "Imagery Reference Hybrid", thumbnailUrl: "/images/imageryhybridthumb.png" }); //... other code // base map gallery var basemapGallery = new BasemapGallery({ view: view, container: document.createElement("div"), source: [ mapboxImagery, labeledStreetsBasemap, Basemap.fromId("streets-navigation-vector"), Basemap.fromId("topo"), Basemap.fromId("hybrid") ] }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ How do I get a basemap with street labels?

Noah Sager · Answer

I think the issue is related to adding a vector basemap to the list of raster basemaps in the basemap gallery widget. If you just use the list of vector basemaps, the thumbnails look fine.

Example: https://codepen.io/noash/pen/NZKZNy

-Noah