new esri.layers.FeatureLayer stop script

DenisLapierre · ‎02-27-2012

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" />
    
    <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>

DenisLapierre · ‎02-27-2012

I found out what was missing.

the tag : dojo.require("esri.layers.FeatureLayer");
at the beginning of the script.

Seems like the dojo.require is kinda of an import library.

View solution in original post

DenisLapierre · ‎02-27-2012

I found out what was missing.

the tag : dojo.require("esri.layers.FeatureLayer");
at the beginning of the script.

Seems like the dojo.require is kinda of an import library.

derekswingley1 · ‎02-27-2012

Glad you got it figured out.

the tag : dojo.require("esri.layers.FeatureLayer");
at the beginning of the script.

Seems like the dojo.require is kinda of an import library.

Yes, dojo.require is how you make additional functionality available in your app. This is shown throughout the API samples.