JerryGarcia

Image disappears after zooming to extent?

Discussion created by JerryGarcia on Aug 30, 2012
Latest reply on Aug 31, 2012 by geos_rfleet
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" />
    <!--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://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>

Outcomes