basemap imagery with street labels

1807
1
06-05-2019 11:43 AM
EllaHaines
New Contributor III

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.

NYC on fire (Mapbox)

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.

basemap gallery with rectangular thumbnail next to square thumbnails, and esri basemap popup reading "New York State (New York City2018) imagery taken NaN years NaN months ago, on , NaN, NaN. "

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? 

0 Kudos
1 Reply
Noah-Sager
Esri Regular Contributor

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

0 Kudos