topic Re: Image disappears after zooming to extent? in ArcGIS JavaScript Maps SDK Questions

Image disappears after zooming to extent?

JerryGarcia — Thu, 30 Aug 2012 15:58:33 GMT

After zooming to SITE 2 Image Service, the service disappears? This does not happen with Site 1 or 2.

See code below? You should be able to copy/paste code to test. Any input would be great. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>GES Demo</title>
   <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/2.8/jsapi/js/dojo/dijit/themes/tundra/tundra.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
      body{
        background-color:#777; overflow:hidden; font-family: "Trebuchet MS";
      }
      #map{
        overflow:hidden;
        padding:0;
      }
    </style>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };

        function OnChangeDDMapService() {
            var dd = document.getElementById('siteDD');
            var dd2 = document.getElementById('siteDD2');
            if (dd[1].selected) {
                map.setExtent(imageServiceLayer.fullExtent);
                //lockRasterID1 = 10;
                dd2.selectedIndex = lockRasterID1;
            }
            if (dd[2].selected) {
                map.setExtent(imageServiceLayer2.fullExtent);
                //lockRasterID2 = 10;
                dd2.selectedIndex = lockRasterID2;
            }
            if (dd[3].selected) {
                map.setExtent(imageServiceLayer3.fullExtent);
                //lockRasterID3 = 10;
                dd2.selectedIndex = lockRasterID3;
            }


     return true;
        }

        function OnChangeDDImage() {

            var dd = document.getElementById('siteDD');
            var dd2 = document.getElementById('siteDD2');

            var params = new esri.layers.ImageServiceParameters();
            var mr = new esri.layers.MosaicRule();
            mr.method = esri.layers.MosaicRule.METHOD_LOCKRASTER;
            mr.lockRasterIds = [dd2.selectedIndex];
            params.noData = 0;

            if (dd[1].selected)
            {
                map.removeLayer(imageServiceLayer);
                map.removeLayer(dynlayer);
                lockRasterID1 = dd2.selectedIndex;
                if (lockRasterID1!=10) params.mosaicRule = mr;
                imageServiceLayer = new esri.layers.ArcGISImageServiceLayer(imgSrvURL1, {
                    imageServiceParameters: params
                });
                map.addLayer(imageServiceLayer);

                dynlayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL1, { "opacity": 0.5 });
                map.addLayer(dynlayer);
            }

            if (dd[2].selected) {
                map.removeLayer(imageServiceLayer2);
                map.removeLayer(dynlayer2);
                lockRasterID2 = dd2.selectedIndex;
                if (lockRasterID2 != 10) params.mosaicRule = mr;
                imageServiceLayer2 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL2, {
                    imageServiceParameters: params
                });
                map.addLayer(imageServiceLayer2);

                dynlayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL2, { "opacity": 0.5 });
                map.addLayer(dynlayer2);
            }

            if (dd[3].selected) {
                map.removeLayer(imageServiceLayer3);
                map.removeLayer(dynlayer3);
                lockRasterID3 = dd2.selectedIndex;
                if (lockRasterID3 != 10) params.mosaicRule = mr;
                imageServiceLayer3 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL3, {
                    imageServiceParameters: params
                });
                map.addLayer(imageServiceLayer3);

                dynlayer3 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL3, { "opacity": 0.5 });
                map.addLayer(dynlayer3);
            }
            return true;
        }

    </script>
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/2.8/jsapi/">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");

        var map;

        var basemapURL = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
        var imgSrvURL1 = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Portland/CascadeLandsat/ImageServer";
        var mapSrvURL1 = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";
        var imgSrvURL2 = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/CharlotteLAS/ImageServer";
        var mapSrvURL2 = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer";
        var imgSrvURL3 = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/CaliforniaDEM/ImageServer";
        var mapSrvURL3 = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer";

        var imageServiceLayer;
        var imageServiceLayer2;
        var imageServiceLayer3;
        var dynlayer;
        var dynlayer2;
        var dynlayer3;

        var lockRasterID1 = 10;
        var lockRasterID2 = 10;
        var lockRasterID3 = 10;

        function init() {
            var initialExtent = new esri.geometry.Extent({ "xmin": -2920505.97, "ymin": 2930600.98, "xmax": 7215655.47, "ymax": 6834392.88,

"spatialReference": { "wkid": 102113} });
            map = new esri.Map("map", {
                extent: initialExtent
            });

            dojo.connect(map, 'onLoad', function (map) {
                //resize the map when the browser resizes
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });

            var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
            map.addLayer(basemap);

            var params = new esri.layers.ImageServiceParameters();
            params.noData = 0;

            //Site 1
            imageServiceLayer = new esri.layers.ArcGISImageServiceLayer(imgSrvURL1, {
                imageServiceParameters: params
            });
            map.addLayer(imageServiceLayer);
            dynlayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL1, { "opacity": 0.5 });
            map.addLayer(dynlayer);

            //Site 2
            imageServiceLayer2 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL2, {
                imageServiceParameters: params
            });
            map.addLayer(imageServiceLayer2);
            dynlayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL2, { "opacity": 0.5 });
            map.addLayer(dynlayer2);

            //Site 3
            imageServiceLayer3 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL3, {
                imageServiceParameters: params
            });
            map.addLayer(imageServiceLayer3);
            dynlayer3 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL3, { "opacity": 0.5 });
            map.addLayer(dynlayer3);



        }

        //show map on load
        dojo.addOnLoad(init);
    </script>
</head>
<body class="tundra">

Zoom to Site:
<select name='siteDD' id='siteDD' onchange='OnChangeDDMapService();'>
<option selected>Select a Site</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Lock Raster Ids:
<select name='siteDD2' id='siteDD2' onchange='OnChangeDDImage();'>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option selected>ALL</option>
</select>

    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
    </div>

</body>

</html>

Re: Image disappears after zooming to extent?

__Rich_ — Sat, 11 Dec 2021 06:11:24 GMT

After zooming to SITE 2 Image Service, the service disappears? This does not happen with Site 1 or 2.

See code below? You should be able to copy/paste code to test. Any input would be great. Thanks!

That first sentence hurts my head! (after zooming to site 2 / does not happen with site 2!)

Please wrap code in tags, I've removed your local paths to the API so this is now copy/pastable:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>GES Demo</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/tundra/tundra.css">
<style type="text/css">
html, body {
height: 100%; width: 100%; margin: 0; padding: 0;
}
body{
background-color:#777; overflow:hidden; font-family: "Trebuchet MS";
}
#map{
overflow:hidden;
padding:0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};

function OnChangeDDMapService() {
var dd = document.getElementById('siteDD');
var dd2 = document.getElementById('siteDD2');
if (dd[1].selected) {
map.setExtent(imageServiceLayer.fullExtent);
//lockRasterID1 = 10;
dd2.selectedIndex = lockRasterID1;
}
if (dd[2].selected) {
map.setExtent(imageServiceLayer2.fullExtent);
//lockRasterID2 = 10;
dd2.selectedIndex = lockRasterID2;
}
if (dd[3].selected) {
map.setExtent(imageServiceLayer3.fullExtent);
//lockRasterID3 = 10;
dd2.selectedIndex = lockRasterID3;
}


return true;
}

function OnChangeDDImage() {

var dd = document.getElementById('siteDD');
var dd2 = document.getElementById('siteDD2');

var params = new esri.layers.ImageServiceParameters();
var mr = new esri.layers.MosaicRule();
mr.method = esri.layers.MosaicRule.METHOD_LOCKRASTER;
mr.lockRasterIds = [dd2.selectedIndex];
params.noData = 0;

if (dd[1].selected)
{
map.removeLayer(imageServiceLayer);
map.removeLayer(dynlayer);
lockRasterID1 = dd2.selectedIndex;
if (lockRasterID1!=10) params.mosaicRule = mr;
imageServiceLayer = new esri.layers.ArcGISImageServiceLayer(imgSrvURL1, {
imageServiceParameters: params
});
map.addLayer(imageServiceLayer);

dynlayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL1, { "opacity": 0.5 });
map.addLayer(dynlayer);
}

if (dd[2].selected) {
map.removeLayer(imageServiceLayer2);
map.removeLayer(dynlayer2);
lockRasterID2 = dd2.selectedIndex;
if (lockRasterID2 != 10) params.mosaicRule = mr;
imageServiceLayer2 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL2, {
imageServiceParameters: params
});
map.addLayer(imageServiceLayer2);

dynlayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL2, { "opacity": 0.5 });
map.addLayer(dynlayer2);
}

if (dd[3].selected) {
map.removeLayer(imageServiceLayer3);
map.removeLayer(dynlayer3);
lockRasterID3 = dd2.selectedIndex;
if (lockRasterID3 != 10) params.mosaicRule = mr;
imageServiceLayer3 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL3, {
imageServiceParameters: params
});
map.addLayer(imageServiceLayer3);

dynlayer3 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL3, { "opacity": 0.5 });
map.addLayer(dynlayer3);
}
return true;
}

</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");

var map;

var basemapURL = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
var imgSrvURL1 = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Portland/CascadeLandsat/ImageServer";
var mapSrvURL1 = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";
var imgSrvURL2 = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/CharlotteLAS/ImageServer";
var mapSrvURL2 = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer";
var imgSrvURL3 = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/CaliforniaDEM/ImageServer";
var mapSrvURL3 = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer";

var imageServiceLayer;
var imageServiceLayer2;
var imageServiceLayer3;
var dynlayer;
var dynlayer2;
var dynlayer3;

var lockRasterID1 = 10;
var lockRasterID2 = 10;
var lockRasterID3 = 10;

function init() {
var initialExtent = new esri.geometry.Extent({ "xmin": -2920505.97, "ymin": 2930600.98, "xmax": 7215655.47, "ymax": 6834392.88,

"spatialReference": { "wkid": 102113} });
map = new esri.Map("map", {
extent: initialExtent
});

dojo.connect(map, 'onLoad', function (map) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});

var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
map.addLayer(basemap);

var params = new esri.layers.ImageServiceParameters();
params.noData = 0;

//Site 1
imageServiceLayer = new esri.layers.ArcGISImageServiceLayer(imgSrvURL1, {
imageServiceParameters: params
});
map.addLayer(imageServiceLayer);
dynlayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL1, { "opacity": 0.5 });
map.addLayer(dynlayer);

//Site 2
imageServiceLayer2 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL2, {
imageServiceParameters: params
});
map.addLayer(imageServiceLayer2);
dynlayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL2, { "opacity": 0.5 });
map.addLayer(dynlayer2);

//Site 3
imageServiceLayer3 = new esri.layers.ArcGISImageServiceLayer(imgSrvURL3, {
imageServiceParameters: params
});
map.addLayer(imageServiceLayer3);
dynlayer3 = new esri.layers.ArcGISDynamicMapServiceLayer(mapSrvURL3, { "opacity": 0.5 });
map.addLayer(dynlayer3);



}

//show map on load
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">

Zoom to Site:
<select name='siteDD' id='siteDD' onchange='OnChangeDDMapService();'>
<option selected>Select a Site</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

Lock Raster Ids:
<select name='siteDD2' id='siteDD2' onchange='OnChangeDDImage();'>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option selected>ALL</option>
</select>

<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center">
</div>
</div>

</body>

</html>

Haven't looked into the issue yet though...

Re: Image disappears after zooming to extent?

__Rich_ — Fri, 31 Aug 2012 08:26:05 GMT

OK, here are the parameters sent to the server when I use your dropdown to zoom to site 2:

bbox=1431448.2240601347,536394.5923657297,1463551.7759398653,548605.4076342703
bboxSR=102719
f=image
imageSR=102719
noData=0
size=1680,639

Using these, the image is successfully returned.

Then here are the parameters sent to the server if I manually zoom to the same extent:

bbox=1431448.2240601347,536394.5923657297,1463551.7759398653,548605.4076342703
bboxSR=102113
f=image
imageSR=102113
noData=0
size=1680,639

The image is not successfully returned.

Spot the difference?