ESRI map services not loading properly

brianrathburn · ‎12-30-2010

Recently switched over to javascript and when loading some of them esri map services like the "WORLD_STREET_MAP" OR "WORLD_IMAGERY" it seems to randomly choose which tiles to load at a certain extent. sometimes when the map loads you have to zoom out very far before the tiles start to load and other times they will load fine.

Have been trying to get this resolved but the problem doesnt happen all the time, we used the samples on the esri site for reference and those always seem to load fine.

Any ideas or suggestions would be appreciated

Thanks

brianrathburn · ‎12-30-2010

I have pasted the code below that I am testing with, it is a straight copy from the Navigation sample on the ESRI site. All I did was swap out the extents for the extent we want to use and change from the imagery service to the street_map service. The tiles load fine in the esri sample site (http://help.arcgis.com/en/webapi/javascript/arcgis/demos/toolbar/toolbar_navigation.html) but on mine they do that same this with the tiles where some dont load at certain extents.

Previously we had used the web ADF to work with the maps and the tiles we are trying to view now worked fine.

Thanks
--------Code below-----------
<!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>Navigation toolbar</title>
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; }
    </style>
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");

      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");

      var map, navToolbar;
      function init() {
        esriConfig.defaults.map.sliderLabel = null;
       var startExtent = new esri.geometry.Extent({ "xmin": -9021050.935075, "ymin": 4156763.138429, "xmax": -9002021.136123, "ymax": 4179010.191384, "spatialReference": { "wkid": 102100} });
        map = new esri.Map("map",{extent:startExtent});
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("HTTP://SERVER.ARCGISONLINE.COM/ARCGIS/REST/SERVICES/WORLD_STREET_MAP/MAPSERVER"));

        navToolbar = new esri.toolbars.Navigation(map);
        dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
      }

      function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }

      dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">
    <div id="navToolbar" dojoType="dijit.Toolbar">
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full Extent</div>
      <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
      <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div>
      <div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()">Deactivate</div>
    </div>
    <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
</body>
</html>