ngalford

ios5/ipad won't show feature layers

Discussion created by ngalford on Apr 24, 2012
Latest reply on Apr 25, 2012 by ngalford
I'm trying the "Map with Feature Layers" example. When I call an ESRI external service I can see the feature layer. When I call an internal service (through our ARCGIS development or production server/service) the layers
don't show. Testing the page on a desktop shows the layer just fine.
I've run the ipad in "developer mode" and recieve a "Javascript: Log on Line 48" error which points to "<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8compact"></script>"
It seems the browser isn't downloading the compact javascript package written by esri. This is only problem I immediately notice.

Hopefully someone has seen this problem before and has a solution because I'm stumped.

Thanks

Code is below:
<!DOCTYPE html>

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <!-- meta tags to hide url and minimize status bar to give the web app
    a native app look this only happens after app is saved to the desktop-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> IPAD Test Site </title>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8compact"></script>
    <style type="text/css">
      html, body
      {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
      }
      .esriSimpleSlider
       div
      {
        height: 30px !important;
        width: 30px !important;
      }
    </style>

    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.virtualearth.VETiledLayer");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("esri.tasks.query");
        

        var map;
        var veTileLayer;

        function init() {
            //onorientationchange doesn't always fire in a timely manner in Android so check for both orientationchange and resize 
            var supportsOrientationChange = "onorientationchange" in window,
            orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

            /*window.addEventListener(orientationEvent, function () {
                orientationChanged();
            }, false);*/

            var initialExtent = new esri.geometry.Extent({ "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679, "spatialReference": { "wkid": 102100} });
            map = new esri.Map("map", {extent: initialExtent});
            veTileLayer = new esri.virtualearth.VETiledLayer({bingMapsKey: 'Insert BING Key Here',mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD });

            map.addLayer(veTileLayer);

            dojo.connect(map, "onLoad", function (evt) {
                //add a feature layer
                var content = "<b>Div Code</b>: ${DIVCODE} <br /><b>Date Created</b>: ${CREATEDATE}";

                var infoTemplate = new esri.InfoTemplate("Norfolk Southern", content);
                map.infoWindow.resize(225, 75);
                //This is Feature Layer pointing to the internal service
                //I've removed the majority of the link for security purposes but you get the idea
                var featureLayer = new esri.layers.FeatureLayer(".....MapServer/6", {
                    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                    outFields: ["DIVCODE", "CREATEDATE"],
                    infoTemplate: infoTemplate
                });
                /*var sls = new esri.symbol.SimpleLineSymbol(new esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 215, 0]), 3);
                featureLayer.setRenderer(sls);

                featureLayer.setSelectionSymbol(new esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([30, 144, 255]), 3);*/

                dojo.connect(featureLayer, 'onClick', function (evt) {
                    //select the clicked feature
                    var query = new esri.tasks.Query();
                    query.geometry = evt.mapPoint;
                    featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);

                });

                map.addLayer(featureLayer);
            });
        }

        function orientationChanged() {
            console.log("Orientation changed: " + window.orientation);
            if (map) {
                map.reposition();
                map.resize();
            }
        }


        dojo.addOnLoad(init);
    </script>
  </head>
  
  <body >
    <div id="map" style="width:100%; height:100%;">
    </div>
  </body>

</html>
}

Outcomes