cmv / cmv-app

CMV - The Configurable Map Viewer - A community supported open source mapping framework built with the Esri JavaScript API and the Dojo Toolkit
https://demo.cmv.io/
MIT License
325 stars 278 forks source link

Enhancement Opportunity basemaps.js mapStartBasemap not being honored #176

Closed kcarrier closed 10 years ago

kcarrier commented 10 years ago

To repo this issue

viewer.js

        mapOptions: {
            basemap: 'hybrid',
            center: [-84.1652, 39.4531],
            zoom: 11,
            sliderStyle: 'small'
        },

basemaps.js

        map: true,
        //must be either 'agol' or 'custom'
        mode: 'agol',
        title: 'Basemaps',
        // must match one of the basemap keys below
        mapStartBasemap: 'hybrid',
        //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: ['streets', 'satellite', 'hybrid', 'topo', 'lightGray', 'gray', 'national-geographic', 'osm', 'oceans'],

In this case hyrbid will show when app loads, but then streets will show. It would appear that mapStartBasemap is not being honored. In addition, it seems like it is showing the first basemap in the basemapsToShow array. I say this because if I move 'hybrid' to the first item in the array the hybrid will show when app finishes loading.

DavidSpriggs commented 10 years ago

@kcarrier Turns out everything is working for me as expected. I could not repo this. Can you post your full configs?

DavidSpriggs commented 10 years ago

I did however, in the commit above, fix the basemap 'blink' issue.

kcarrier commented 10 years ago

@DavidSpriggs - Sure thing David here are the 2 configs, in my experience, this only works if the basemap specified in basemaps.js is the first in the array, here are the contents of both files.

basemaps.js

define([
    'esri/dijit/Basemap',
    'esri/dijit/BasemapLayer',
    'esri/layers/osm'
], function (Basemap, BasemapLayer, osm) {
    return {
        map: true,
        //must be either 'agol' or 'custom'
        mode: 'agol',
        title: 'Basemaps',
        // must match one of the basemap keys below
        mapStartBasemap: 'topo',
        //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: ['topo', 'hybrid', 'streets', 'satellite', 'lightGray', 'gray', 'national-geographic', 'osm', 'oceans'],

        // define all valid custom basemaps here. Object of Basemap objects. For custom basemaps, the key name and basemap id must match.
        basemaps: {

            // agol basemaps
            streets: {
                title: 'Streets'
            },
            satellite: {
                title: 'Satellite'
            },
            hybrid: {
                title: 'Hybrid'
            },
            topo: {
                title: 'Topo'
            },
            gray: {
                title: 'Gray'
            },
            oceans: {
                title: 'Oceans'
            },
            'national-geographic': {
                title: 'Nat Geo'
            },
            osm: {
                title: 'Open Street Map'
            }

            // examples of custom basemaps
            /*
            streets: {
                title: 'Streets',
                basemap: new Basemap({
                    id: 'streets',
                    layers: [new BasemapLayer({
                        url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
                    })]
                })
            },
            satellite: {
                title: 'Satellite',
                basemap: new Basemap({
                    id: 'satellite',
                    layers: [new BasemapLayer({
                        url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                    })]
                })
            },
            hybrid: {
                title: 'Hybrid',
                basemap: new Basemap({
                    id: 'hybrid',
                    layers: [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',
                        isReference: true,
                        displayLevels: [0, 1, 2, 3, 4, 5, 6, 7]
                    }), new BasemapLayer({
                        url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer',
                        isReference: true,
                        displayLevels: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
                    })]
                })
            },
            lightGray: {
                title: 'Light Gray Canvas',
                basemap: new Basemap({
                    id: 'lightGray',
                    layers: [new BasemapLayer({
                        url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer'
                    }), new BasemapLayer({
                        url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer',
                        isReference: true
                    })]
                })
            }
            */
        }
    };
});

viewer.js

define([
    'esri/units',
    'esri/geometry/Extent',
    'esri/config',
    'esri/tasks/GeometryService',
    'esri/layers/ImageParameters'
], function(units, Extent, esriConfig, GeometryService, ImageParameters) {

    // url to your proxy page, must be on same machine hosting you app. See proxy folder for readme.
    esriConfig.defaults.io.proxyUrl = 'proxy/proxy.ashx';
    esriConfig.defaults.io.alwaysUseProxy = false;
    // url to your geometry server.
    esriConfig.defaults.geometryService = new GeometryService('http://engineer.gomvo.org/arcgis/rest/services/Utilities/Geometry/GeometryServer');

    //image parameters for dynamic services, set to png32 for higher quality exports.
    var imageParameters = new ImageParameters();
    imageParameters.format = 'png32';

    return {
        //default mapClick mode, mapClickMode lets widgets know what mode the map is in to avoid multipult map click actions from taking place (ie identify while drawing).
        defaultMapClickMode: 'identify',
        // map options, passed to map constructor. see: https://developers.arcgis.com/javascript/jsapi/map-amd.html#map1
        mapOptions: {
            basemap: 'topo',
            navigationMode: 'classic',
            center: [-84.259420, 39.750745],
            zoom: 11,
            sliderStyle: 'small'
        },

        // operationalLayers: Array of Layers to load on top of the basemap: valid 'type' options: 'dynamic', 'tiled', 'feature'.
        // The 'options' object is passed as the layers options for constructor. Title will be used in the legend only. id's must be unique and have no spaces.
        // 3 'mode' options: MODE_SNAPSHOT = 0, MODE_ONDEMAND = 1, MODE_SELECTION = 2
        operationalLayers: [{
            type: 'dynamic',
            url: 'http://engineer01.gomvo.org/arcgis/rest/services/SP/StreetNames/MapServer',
            title: 'Street Labels',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'streetlabels',
                opacity: 1.0,
                visible: true
            }
        },{
            type: 'dynamic',
            url: 'http://engineer02.gomvo.org/arcgis/rest/services/SP/SurveyRecords/MapServer',
            title: 'Survey Records',
        noLegend: true,
        collapsed: true,
        identifyLayerInfos: {
            include: false
        },
        options: {
            id: 'surveyrecords',
            opacity: 1.0,
            visible: true
        }
        }, {
            type: 'dynamic',
            url: 'http://engineer03.gomvo.org/arcgis/rest/services/SP/SectionCornerRecover/MapServer',
            title: 'Section Corner Recovery',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'sectioncornerrecovery',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer04.gomvo.org/arcgis/rest/services/SP/ControlCorner_ROW/MapServer',
            title: 'Right of Way Control Corners',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'rowcontrolcorners',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer05.gomvo.org/arcgis/rest/services/SP/ControlCorner_ROW/MapServer',
            title: 'Plan Links',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'planlinks',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer06.gomvo.org/arcgis/rest/services/SP/RoadRecords/MapServer',
            title: 'Road Records',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                layerIds: [1, 3, 5, 7, 9, 11, 13]
            },
            options: {
                id: 'roadrecords',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer07.gomvo.org/arcgis/rest/services/SP/Parcels/MapServer',
            title: 'Parcels',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                layerIds: [1, 3, 5, 7, 9]
            },
            options: {
                id: 'parcels',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer08.gomvo.org/arcgis/rest/services/SP/MunicipalPLSSBoundaries/MapServer',
            title: 'PLSS and Corp Lines',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'plsscorplines',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer09.gomvo.org/arcgis/rest/services/SP/map_PLSSSurveySystem/MapServer',
            title: 'PLSS Survey System',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'plsssurverysystem',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer10.gomvo.org/arcgis/rest/services/SP/STR/MapServer',
            title: 'Section Town Range',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'str',
                opacity: 1.0,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer11.gomvo.org/arcgis/rest/services/SP/OLS_Townships/MapServer',
            title: 'Original Land Subd Townships',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'orglst',
                opacity: 0.6,
                visible: true
            }
        }, {
            type: 'dynamic',
            url: 'http://engineer12.gomvo.org/arcgis/rest/services/SP/StreetIntersections/MapServer',
            title: 'Street Intersections',
            noLegend: true,
            collapsed: true,
            identifyLayerInfos: {
                include: false
            },
            options: {
                id: 'streetintersections',
                opacity: 1.0,
                visible: true
            }

        }],
        // set include:true to load. For titlePane type set position the the desired order in the sidebar
        widgets: {
            growler: {
                include: true,
                id: 'growler',
                type: 'domNode',
                path: 'gis/dijit/Growler',
                srcNodeRef: 'growlerDijit',
                options: {}
            },
            geocoder: {
                include: false,
                id: 'geocoder',
                type: 'domNode',
                path: 'gis/dijit/Geocoder',
                srcNodeRef: 'geocodeDijit',
                options: {
                    map: true,
                    mapRightClickMenu: true,
                    geocoderOptions: {
                        autoComplete: true,
                        arcgisGeocoder: {
                            placeholder: 'Enter an address or place'
                        }
                    }
                }
            },
            identify: {
                include: true,
                id: 'identify',
                type: 'invisible',
                path: 'gis/dijit/Identify',
                title: 'Identify',
                open: false,
                position: 3,
                options: 'config/identify'
            },
            basemaps: {
                include: true,
                id: 'basemaps',
                type: 'domNode',
                path: 'gis/dijit/Basemaps',
                srcNodeRef: 'basemapsDijit',
                options: 'config/basemaps'
            },
            mapInfo: {
                include: false,
                id: 'mapInfo',
                type: 'domNode',
                path: 'gis/dijit/MapInfo',
                srcNodeRef: 'mapInfoDijit',
                options: {
                    map: true,
                    mode: 'dms',
                    firstCoord: 'y',
                    unitScale: 3,
                    showScale: true,
                    xLabel: '',
                    yLabel: '',
                    minWidth: 286
                }
            },
            scalebar: {
                include: true,
                id: 'scalebar',
                type: 'map',
                path: 'esri/dijit/Scalebar',
                options: {
                    map: true,
                    attachTo: 'bottom-left',
                    scalebarStyle: 'line',
                    scalebarUnit: 'dual'
                }
            },
            locateButton: {
                include: true,
                id: 'locateButton',
                type: 'domNode',
                path: 'gis/dijit/LocateButton',
                srcNodeRef: 'locateButton',
                options: {
                    map: true,
                    publishGPSPosition: true,
                    highlightLocation: true,
                    useTracking: true,
                    geolocationOptions: {
                        maximumAge: 0,
                        timeout: 15000,
                        enableHighAccuracy: true
                    }
                }
            },
            overviewMap: {
                include: false,
                id: 'overviewMap',
                type: 'map',
                path: 'esri/dijit/OverviewMap',
                options: {
                    map: true,
                    attachTo: 'bottom-right',
                    color: '#0000CC',
                    height: 100,
                    width: 125,
                    opacity: 0.30,
                    visible: false
                }
            },
            homeButton: {
                include: true,
                id: 'homeButton',
                type: 'domNode',
                path: 'esri/dijit/HomeButton',
                srcNodeRef: 'homeButton',
                options: {
                    map: true,
                    extent: new Extent({
                        xmin: -9408264.905707937,
                        ymin: 4794230.484511463,
                        xmax: -9353150.09901452,
                        ymax: 4858288.438354023,
                        spatialReference: {
                            wkid: 3857
                        }
                    })
                }
            },
            legend: {
                include: false,
                id: 'legend',
                type: 'titlePane',
                path: 'esri/dijit/Legend',
                title: 'Legend',
                open: false,
                position: 0,
                options: {
                    map: true,
                    legendLayerInfos: true
                }
            },
            TOC: {
                include: true,
                id: 'toc',
                type: 'titlePane',
                path: 'gis/dijit/TOC',
                title: 'Layers',
                open: false,
                position: 1,
                options: {
                    map: true,
                    tocLayerInfos: true
                }
            },
            bookmarks: {
                include: true,
                id: 'bookmarks',
                type: 'titlePane',
                path: 'gis/dijit/Bookmarks',
                title: 'Bookmarks',
                open: false,
                position: 2,
                options: 'config/bookmarks'
            },
            find: {
                include: true,
                id: 'find',
                type: 'titlePane',
                canFloat: true,
                path: 'gis/dijit/Find',
                title: 'Find',
                open: false,
                position: 3,
                options: 'config/find'
            },
            draw: {
                include: true,
                id: 'draw',
                type: 'titlePane',
                canFloat: true,
                path: 'gis/dijit/Draw',
                title: 'Draw',
                open: false,
                position: 4,
                options: {
                    map: true,
                    mapClickMode: true
                }
            },
            measure: {
                include: true,
                id: 'measurement',
                type: 'titlePane',
                canFloat: true,
                path: 'gis/dijit/Measurement',
                title: 'Measurement',
                open: false,
                position: 5,
                options: {
                    map: true,
                    mapClickMode: true,
                    defaultAreaUnit: units.SQUARE_MILES,
                    defaultLengthUnit: units.MILES
                }
            },
            print: {
                include: true,
                id: 'print',
                type: 'titlePane',
                canFloat: true,
                path: 'gis/dijit/Print',
                title: 'Print',
                open: false,
                position: 6,
                options: {
                    map: true,
                    printTaskURL: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task',
                    copyrightText: 'Copyright 2014',
                    authorText: 'Me',
                    defaultTitle: 'Viewer Map',
                    defaultFormat: 'PDF',
                    defaultLayout: 'Letter ANSI A Landscape'
                }
            },
            directions: {
                include: true,
                id: 'directions',
                type: 'titlePane',
                path: 'gis/dijit/Directions',
                title: 'Directions',
                open: false,
                position: 7,
                options: {
                    map: true,
                    mapRightClickMenu: true,
                    options: {
                        routeTaskUrl: 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Route',
                        routeParams: {
                            directionsLanguage: 'en-US',
                            directionsLengthUnits: units.MILES
                        }
                    }
                }
            },
            editor: {
                include: false,
                id: 'editor',
                type: 'titlePane',
                path: 'gis/dijit/Editor',
                title: 'Editor',
                open: false,
                position: 8,
                options: {
                    map: true,
                    mapClickMode: true,
                    editorLayerInfos: true,
                    settings: {
                        toolbarVisible: true,
                        showAttributesOnClick: true,
                        enableUndoRedo: true,
                        createOptions: {
                            polygonDrawTools: ['freehandpolygon', 'autocomplete']
                        },
                        toolbarOptions: {
                            reshapeVisible: true,
                            cutVisible: true,
                            mergeVisible: true
                        }
                    }
                }
            },
            streetview: {
                include: true,
                id: 'streetview',
                type: 'titlePane',
                canFloat: true,
                position: 9,
                path: 'gis/dijit/StreetView',
                title: 'Google Street View',
                options: {
                    map: true,
                    mapClickMode: true,
                    openOnStartup: true,
                    mapRightClickMenu: true
                }
            },
            help: {
                include: true,
                id: 'help',
                type: 'floating',
                path: 'gis/dijit/Help',
                title: 'Help',
                options: {}
            }

        }
    };
});
DavidSpriggs commented 10 years ago

@kcarrier try moving topo to a different spot to test, it should work. I have the same thing you have (but topo in a different spot) and its working fine.

kcarrier commented 10 years ago

Weird, maybe I had some syntax errors somewhere on Friday but now it appears to be working fine, I will close this as it appears to be user error, my apologies.

marhensa commented 9 years ago

hm.. why do we have to set two basemap configurations in different config file?

we can't use custom basemap without it blinks first to show one of those agol basemap.

for example, i have custom basemap named "xxx", and i already set in basemap.js to use custom basemap, and set mapStartBasemap to use xxx

but in viewer.js I cant use that xxx custom basemap, it has to be one of those agol basemap (streets, sattellite, etc).

and because of that, those agol basemap will flash few seconds, then my xxx custom basemap starts loading.

i can't use agol basemap because it's uninformative and lack of data in my country. i have to use my own basemap.

any suggestion, and solution about this?

thank you... :)