AnsweredAssumed Answered

new esri.layers.FeatureLayer stop script

Question asked by denis.lapierre.1 on Feb 27, 2012
Latest reply on Feb 27, 2012 by DSwingley-esristaff
Hi, I'm trying to add a FeatureLayer to my map, but I can't seem to be able to create a FeatureLayer.
I tried with the featureCollection and the url (that was valid) but neither option worked. I added Firebug and JavaScript Debuger, but I don't really know how to use them yet. So I don't know how to get an error message to help me.

Any suggestions?

<code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--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></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css" />
    <style type="text/css">
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5" type="text/javascript"></script>
    <script type="text/javascript">
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
     
        var map;
       
     function CreateFeatureLayer(graphics) {
    //document.write("CreateFeatureLayer" + "<br />");

      var featrSet = new esri.tasks.FeatureSet();
      featrSet.features = graphics;
      featrSet.geometryType = "esriGeometryPoint";
 
      var layerDef = {
       "geometryType": "esriGeometryPoint",
       "fields": [{
        "name": "SITES",
        "type": "esriFieldTypeInteger",
        "alias": "Sites"
       }]
      }
    //document.write("CreateFeatureLayer mid1" + "<br />");

      var featureCollection = {"layerDefinition": layerDef, "featureSet": featrSet};

    //document.write("CreateFeatureLayer mid2" + "<br />");
      var featureLayer = new esri.layers.FeatureLayer(featureCollection, {mode: esri.layers.FeatureLayer.MODE_SNAPSHOT});

    //document.write("CreateFeatureLayer fin" + "<br />");
      return featureLayer;
     }

     function getSymbol(type) {
      var url = ""
      switch (type) {
          case "Permanent":
          url = "images/circle_blue.svg";
          break;
          case "Equipment":
          url = "images/triangle_blue.svg";
          break;
          case "Temporary":
          url = "images/star_blue.svg";
          break;
          case "Sprinkler":
          url = "images/square_blue.svg";
          break;
      }

         return new esri.symbol.PictureMarkerSymbol(url, 20, 20);
     }

     function GetGraphicArray(theString) {
    //document.write("GetGraphicArray" + "<br />");
      var firstsplit = theString.split(';');
      var singleElement
      var secondSplit
      var infoTemplate
            var pt
      var graphic
      var graphics = new Array();

      while(firstsplit.length > 0) {
       singleElement = firstsplit.shift();
       secondSplit = singleElement.split(",");

          symbol = getSymbol(secondSplit[1]);  
         infoTemplate = new esri.InfoTemplate(secondSplit[1], secondSplit[2]);
               pt = new esri.geometry.Point(secondSplit[3], secondSplit[4], 3400);
         merc_pt = esri.geometry.geographicToWebMercator(pt);

         graphic = new esri.Graphic(merc_pt, symbol, '', infoTemplate);

       graphics.push(graphic);
      }
 
      return graphics;
     }

     function DisplayElements(theString) {
    //document.write("DisplayElements" + "<br />");
            var graphics = GetGraphicArray(theString);

            var featureLayer = CreateFeatureLayer(graphics);

            //map.addLayer(featureLayer);

            map.graphics.add(graphics[0]);
            map.graphics.add(graphics[1]);
            map.graphics.add(graphics[2]);
            map.graphics.add(graphics[3]);
            map.graphics.add(graphics[4]);
            map.graphics.add(graphics[5]);
            map.graphics.add(graphics[6]);

     }


        function init() {
    //document.write("init" + "<br />");
         var initExtent = new esri.geometry.Extent({"xmin":-562799.140878082,"ymin":5331608.39701711,"xmax":1547257.08731259,"ymax":6786507.98048048,"spatialReference":{"wkid":3400}});
         map = new esri.Map("map",{extent:initExtent});

         //Add the basemap layer
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://oxpgisws01d.env.gov.ab.ca/ArcGIS/rest/services/Cached_Sample/MapServer", {"opacity":1});
            map.addLayer(basemap);
              
            dojo.connect(map, 'onLoad', function() { dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

                theString =  "Main Camp,Permanent,This is the main scout's camp.,6,50,Valid;" +
       "Summer camp,Temporary,This is the summer scout's camp.,5.9,49.8,Valid;" +
       "Winter camp,Temporary,This is the winter scout's camp.,6,49.8,Valid;" +
       "Bulldozer 1,Equipment,This is a Bulldozer.,4,46,Valid;" +
       "Bulldozer 2,Equipment,This is a Bulldozer.,4,47,Valid;" +
       "Sprinkler 33,Sprinkler,This is a sprinkler,5,49,Valid;" +
       "Sprinkler 34,Sprinkler,This is a sprinkler,5,49.5,Valid";

                DisplayElements(theString);
         
            });
        }



        dojo.ready(init);
    </script>
  </head>
 
  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>

</code>

Outcomes