Possible Enhancement Opportunity

[kcarrier]

@DavidSpriggs - I got my basemaps to load somewhat properly without using the basemapGallery option with some help from Esri Support. Although I still think basemapGallery would be a great feature. The issue I am now running into is that in viewer.js the default basemap is streets, but in my basemaps.js, I chose satellite to be the default. What I noticed is streets would load briefly then the screen would flicker and then my custom satellite basemap would load. This prompted me to look for where this was occurring. Once I found it in viewer.js I tried to change it to satellite but noticed it was loading the ArcGIS basemaps before my custom basemaps. The reason this becomes an issue is because my basemaps go in 2 scales beyond ArcGIS basemaps but because the first basemap loaded is ArcGIS/Esri it defaults to those LODS instead of mine. So I guess the question is, is the viewer.js reading from basemaps.js or is viewer.js just seeing streets or satellite and loading the default ArcGIS/Esri basemap specified?

If it was reading from the basemaps.js I would think it would pick up my LODS because of how I have the basemaps structured.

Notice in my code how I have a service called LODS defined for each of my custom basemaps. This is so my empty cache with the extra LODS gets loaded before Esri so the map should assume my LODS and not the Esri default LODS.

https://gist.github.com/kcarrier/ca3188e2d67cfc720143

Any thoughts on how this could be overcome?

[tmcgee]

Hello @kcarrier,

There was a lot of discussion about a similar requirement in June/July. That one related to using a non-web mercator base maps so a default AGOL map was not appropriate there either. Look at issue #84, for the gory details.

Basically, you need to also put your initial custom basemap satellite as the basemap in the mapOptions within viewer.js. I think it would go something like this:

mapOptions: {
    basemap: new Basemap({
        id: 'satellite',
        layers: [new BasemapLayer({
            url: 'http://maps.clermontauditor.org/arcgis/rest/services/WMAS/LODS/MapServer'
        }), new BasemapLayer({
            url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        }), new BasemapLayer({
            url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer'
        }), new BasemapLayer({
            url: 'http://maps1.clermontauditor.org/arcgis/rest/services/WMAS/2014Ortho_WMAS/MapServer'
        }), new BasemapLayer({
            url: 'http://maps2.clermontauditor.org/arcgis/rest/services/WMAS/Hybrid/MapServer'
        })]
    }),
    center: yourCenter,
    zoom: yourZoom
},

Let me know if this works for you.

[friendde]

My work around to the viewer.js and basemap.js basemap layer issue is to use a custom basemap I publish with no layers visible in viewer.js then in basemaps.js I load another basemap with layers visible.

This serves two purposes. First I get the infinite zoom desired for all basemaps in the gallery (because first basemap in will define zoom levels) and second the end user never sees two maps flash while the app loads.

[green3g]

@tmcgee that is what we are currently using in our app. @friendde I still don't quite understand how to obtain infinite zoom, however, could you explain that a little better? I've noticed our zoom seems limited, although it may be because of our custom baselayer.

[tmcgee]

@roemhildtg, @friendde can probably elaborate better than I can. The example I posted in issue #84 on Jul 7th uses services from Sonoma County. I was able to achieve infinite zoom with those services. I don't think there's anything particularly special about the services. They were dynamic layers that result in dynamic tiles at each zoom vs the fixed tile scheme at AGOL or an on-site AGS tile cache.

[kcarrier]

@tmcgee , @friendde , @roemhildtg - Since my services only go in 2 levels beyond the Esri scales. More specifically 600 and 300. I created an empty cache service with those LODS defined. Therefore, when the map loads it is an empty map and then the basemap widget kicks in and the map shows as expected. Here is what I ended up doing in the viewer.js

define(["esri/InfoTemplate", "esri/units", "esri/geometry/Extent", "esri/config", "esri/tasks/GeometryService", 'esri/dijit/Basemap', 'esri/dijit/BasemapLayer'],
    function (a, b, c, d, e, Basemap, BasemapLayer) {
        return d.defaults.io.proxyUrl = "proxy/proxy.ashx", d.defaults.io.alwaysUseProxy = !1,
            d.defaults.geometryService = new e("http://maps10.clermontauditor.org/arcgis/rest/services/Utilities/Geometry/GeometryServer"), {
                defaultMapClickMode: "identify",
                mapOptions: {
                    basemap: new Basemap({
                        layers: [new BasemapLayer({
                            url: 'http://maps.clermontauditor.org/arcgis/rest/services/WMAS/LODS/MapServer'
                        })]
                    }),
                    center: [-96.59179687497497, 39.09596293629694],
                    zoom: 5,
                    sliderStyle: "small"
                },

[friendde]

@kcarrier glad you found the work around, my solution is similar.

I think the heart of the issue is not within the implementation of CMV but with the ArcGIS API itself. Slightly related to the issue is that the CMV is flashing two basemaps during the initial loading of the app.

Due to the ArcGIS API, when the Map object is created, the first Basemap passed in sets the WKID and LODS for that session, even if the user swizzles a basemap in the BaseMap Gallery. Unfortunately, the API (at least in my environment of v3.9) does not permit a Dynamic map service to be used as an initial basemap parameter. I can, however, switch to another basemap using a Dynamic map service with the BaseMap Gallery after the app loads.

@roemhildtg my work around is to utilize two map services, the first one is published as a Tiled Map with WKID 102660 (2238). This service is published using the Toolbox in ArcCatalog and not the "Share As A Service" UI within ArcMap. This is because the only option with the ArcMAP UI is Web Mercator, which is not what I need.

The first basemap service is configured in the ArcMap MXD with only our County outline, this layer is not visible by default. It's only purpose is to set the WKID and zoom levels plus hide the workflow of the CMV when loading/flashing two basemaps This first basemap is configured in viewer.js as the start basemap.

The second basemap is configured in basemaps.js which is our Dynamic Map service published inside the ArcMap UI "Share As Service". It's WKID is the same as the first.

viewer.js

        mapOptions: {
            basemap: new Basemap({
                id: 'startMap',
                layers: [new BasemapLayer({
                    url: 'http://ServerName/arcgis/rest/services/StartMap/MapServer'
                })]
            }),
            extent: new Extent({
                        xmin:2477366.16285146,ymin:138442.9863259355,xmax:2824588.385073682,ymax:371732.916881491,spatialReference:{"wkid":102660}                      
                    }),
            logo: false
        },

basemaps.js

return {
        map: true,
        //must be either 'agol' or 'custom'
        mode: 'custom',
        title: 'Basemaps',
        // must match one of the basemap keys below
        mapStartBasemap: 'dynamicMap',
        //basemaps to show in menu. define in basemaps object below and reference by name here
        // TODO Is this array necessary when the same keys are explicitly included/excluded below?
        basemapsToShow: ['dynamicMap'],

        // define all valid custom basemaps here. Object of Basemap objects. For custom basemaps, the key name and basemap id must match.
        basemaps: {
            // custom ags basemaps
            dynamicMap: {
                title: 'GRU Dynamic Basemap',
                basemap: new Basemap({
                    id: 'dynamicMap',
                    layers: [new BasemapLayer({
                        url: 'http://ServerName/arcgis/rest/services/BaseMapDynamic/MapServer'
                    })]
                })
            },

[kcarrier]

@friendde - I have also seen similar behavior in AGOL. In talking with some others at Esri the flashing of the maps without a smooth refresh like you see in Silverlight or Flex is at the core of the API. While the loading of the maps in AGOL is not the same as in this viewer I have noticed when rendering cached map services that are mashed up in the JS API the map flash or flicker while rendering. I am hoping since this has been brought up in the AGOL realm that it will be fixed in the API itself, so zooming in and out becomes smoother. Thank you for the help and insight.

[tmcgee]

@friendde thanks for those details. it helps me better connect more of the dots relating to the challenges you were experiencing when we were working through that last month and the creative solutions you used to solve them.

[DavidSpriggs]

Good collaboration folks! I think having some sample config files in the repo would be helpful for everyone. Something like: viewer-nonMercatorBasemap.js and viewer-customBasemap.js etc. We could also have some layout samples as well viewer-left-sidebar.js etc.

[kcarrier]

@DavidSpriggs - In my opinion I think we have found a workaround and other examples to handle this situation so for the sake of keeping the issues clean I am going to close this incident, thank you to everyone for your help and guidance.