Trouble Getting setExtent to work

[SteveSmith1]

I am trying to set my map extent to the last place it was located when a user comes back to the page.  When I use setExtent, the page comes up blank without showing the map at all.  I think it may have to do with the spatialReference, but I am not sure.  Any help would be appreciated.

require([

        "dojo/dom-construct",

        "esri/Color",

        "esri/dijit/Geocoder",

        "esri/dijit/Popup",

        "esri/InfoTemplate",

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/map",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol", "dojo/domReady!",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane"

        ], function (

        domConstruct, Color, Geocoder, Popup, InfoTemplate,

        ArcGISDynamicMapServiceLayer, Map, SimpleFillSymbol, SimpleLineSymbol

        ) {

            try {

                var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);

                var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

                var popup = new Popup({

                    fillSymbol: sfs,

                    lineSymbol: null,

                    markerSymbol: null

                }, domConstruct.create("div"));

                map = new Map("ui-esri-map", {

                    basemap: "streets",

                    center: [-76.347304, 39.533987], // long, lat

                    zoom: 11,

                    sliderStyle: "small"

                });

                pathArray = location.href.split('/');

                protocol = pathArray[0];

                host = pathArray[2];

                var appFolder = '<%=PavementManagement.Properties.Settings.Default.appFolder %>';

                url = protocol + '//' + host;

                var _pavementInfoTemplate = new InfoTemplate();

                _pavementInfoTemplate.setTitle("<b>Road Condition Information</b>");

                _pavementInfoTemplate.setContent("Road Name: ${NAME} <br> Type: ${SURFDESC} <br> From Street: ${FROMSTREET} <br> To Street: ${TOSTREET} <br> Assessed: ${RoadAssessed} <br><a href='" + url + appFolder.replace("none", "") +  "/Assessment/AssessmentEntry.aspx?id=${OBJECTID_1}'>Update Road Assessment</a>");

            var pavementLayerURL = "http://gismaps.harfordcountymd.gov/arcgis/rest/services/ICT/PavementManagement/MapServer";

            var pavementLayerOptions = {

                "id": "pavementlineLayer",

                "opacity": .5,

                "showAttribution": false

            };

            var pavementLayer = new ArcGISDynamicMapServiceLayer(pavementLayerURL, pavementLayerOptions);

            pavementLayer.setDisableClientCaching(true);

            pavementLayer.setInfoTemplates({

                0: { infoTemplate: _pavementInfoTemplate }

            });

            pavementLayer.setVisibleLayers([0, 1, 2]);

            map.addLayer(pavementLayer);

             updateExtent(map, pavementLayer);

            dojo.connect(map, "onExtentChange", showExtent);

            geocoder = new Geocoder({

                arcgisGeocoder: {

                    url: "http://gismaps.harfordcountymd.gov/arcgis/rest/services/ICT/OriginalGeoFencesAddress/GeocodeServer",

                    placeholder: "Enter Address (No Suffix)",

                    autonavigate: "True"

                },

                map: map

            }, "ui-esri-dijit-geocoder");

            geocoder.startup();

        }

            catch (err) {

                alert('error: ' + err);

            }

        });

function updateExtent(map, pavementLayer) {

        try{

            var Xmin = getCookie('Xmin');

            var Ymin = getCookie('Ymin');

            var Xmax = getCookie('Xmax');

            var Ymax = getCookie('Ymax');

            if (typeof Xmin !== 'undefined') {

                var startExtent = new esri.geometry.Extent();

                startExtent.xmin = parseFloat(Xmin);

                startExtent.ymin = parseFloat(Ymin);

                startExtent.xmax = parseFloat(Xmax);

                startExtent.ymax = parseFloat(Ymax);

                startExtent.spatialReference = pavementLayer.spatialReference;  

                map.setExtent(startExtent);

            };

        }

        catch (err) {

            alert('error: ' + err);

        }

    }

[KenBuja]

What is happening is that the updateExtent function is getting called before the pavementLayer is fully ready. This would mean the spatial reference is incorrect. I would call that function when the "layer-add-result" function fires.

var pavementLayer = new ArcGISDynamicMapServiceLayer(pavementLayerURL, pavementLayerOptions);
pavementLayer.setDisableClientCaching(true);
pavementLayer.setInfoTemplates({
    0: { infoTemplate: _pavementInfoTemplate }
});
pavementLayer.setVisibleLayers([0, 1, 2]);
map.addLayer(pavementLayer);
pavementLayer.on("layer-add-result", function (){
    updateExtent(map, pavementLayer);
});

[SteveSmith1]

I moved it to here.

dojo.connect(map, "layer-add-result", updateExtent(map, pavementLayer));

Still get the same result.  Can't help but feel I'm missing something small.

[KenBuja · Accepted solution]

I didn't look closely at the URL of the pavementLayer. Its spatial reference is different from that of the map, so you'll have to project that extent to the map's spatial reference. Here's an example of that: JS Bin - Collaborative JavaScript Debugging

[SteveSmith1]

I had originally been trying the map, but it seems like I always get a undefined value for the map's.

[SteveSmith1]

But now that i have moved it into that function, it works.  Thanks a lot.

[SteveSmith1]

So it worked when i first tried it, but I had an alert in the function.  When I take the alert out, it goes back to the map not showing up, almost like the alert allows it time to catch up.  Is there something else that may not be fully loaded?

[KenBuja]

Can you post your updated code?

[SteveSmith1]

require([

        "dojo/dom-construct",

        "esri/Color",

        "esri/dijit/Geocoder",

        "esri/dijit/Popup",

        "esri/InfoTemplate",

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/map",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol", "dojo/domReady!",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane"

        ], function (

        domConstruct, Color, Geocoder, Popup, InfoTemplate,

        ArcGISDynamicMapServiceLayer, Map, SimpleFillSymbol, SimpleLineSymbol

        ) {

            try {

                var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);

                var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

                var popup = new Popup({

                    fillSymbol: sfs,

                    lineSymbol: null,

                    markerSymbol: null

                }, domConstruct.create("div"));

                map = new Map("ui-esri-map", {

                    basemap: "streets",

                    center: [-76.347304, 39.533987], // long, lat

                    zoom: 11,

                    sliderStyle: "small"

                });

                pathArray = location.href.split('/');

                protocol = pathArray[0];

                host = pathArray[2];

                var appFolder = '<%=PavementManagement.Properties.Settings.Default.appFolder %>';

                url = protocol + '//' + host;

                var _pavementInfoTemplate = new InfoTemplate();

                _pavementInfoTemplate.setTitle("<b>Road Condition Information</b>");

                _pavementInfoTemplate.setContent("Road Name: ${NAME} <br> Type: ${SURFDESC} <br> From Street: ${FROMSTREET} <br> To Street: ${TOSTREET} <br> Assessed: ${RoadAssessed} <br><a href='" + url + appFolder.replace("none", "") +  "/Assessment/AssessmentEntry.aspx?id=${OBJECTID_1}'>Update Road Assessment</a>");

            var pavementLayerURL = "http://gismaps.harfordcountymd.gov/arcgis/rest/services/ICT/PavementManagement/MapServer";

            var pavementLayerOptions = {

                "id": "pavementlineLayer",

                "opacity": .5,

                "showAttribution": false

            };

             var pavementLayer = new ArcGISDynamicMapServiceLayer(pavementLayerURL, pavementLayerOptions);

            pavementLayer.setDisableClientCaching(true);

            pavementLayer.setInfoTemplates({

                0: { infoTemplate: _pavementInfoTemplate }

            });

            pavementLayer.setVisibleLayers([0, 1, 2]);

            map.addLayer(pavementLayer);

            dojo.connect(map, "layer-add-result", updateExtent(map, pavementLayer));

            dojo.connect(map, "onExtentChange", showExtent);

            geocoder = new Geocoder({

                arcgisGeocoder: {

                    url: "http://gismaps.harfordcountymd.gov/arcgis/rest/services/ICT/OriginalGeoFencesAddress/GeocodeServer",

                    placeholder: "Enter Address (No Suffix)",

                    autonavigate: "True"

                },

                map: map

            }, "ui-esri-dijit-geocoder");

            geocoder.startup();

        }

            catch (err) {

                alert('error: ' + err);

            }

        });

    function updateExtent(map, pavementLayer) {

        try{

            var Xmin = getCookie('Xmin');

            var Ymin = getCookie('Ymin');

            var Xmax = getCookie('Xmax');

            var Ymax = getCookie('Ymax');

            if (typeof Xmin !== 'undefined') {

                var startExtent = new esri.geometry.Extent();

                startExtent.xmin = parseFloat(Xmin);

                startExtent.ymin = parseFloat(Ymin);

                startExtent.xmax = parseFloat(Xmax);

                startExtent.ymax = parseFloat(Ymax);

                startExtent.spatialReference = pavementLayer.spatialReference;  

                map.setExtent(startExtent);

               };

        }

        catch (err) {

            alert('error: ' + err);

        }

    }

[KenBuja]

When you use "dojo.connect", you have to use "onLayerAddResult". Is there a reason you're using "dojo.connect" instead of "on"? Take a look at this page.