AnsweredAssumed Answered

how to display a featurelayer's simbology in right place??

Question asked by mchristmas@yahoo.com on Dec 29, 2016
Latest reply on Dec 29, 2016 by mchristmas@yahoo.com

have this code, when you run the code the map is centered at -77.044180,  38.853682, which is DC I got the lat long from google. When you do a right click and see what's here. Anyways. I have created a fake featurelayer by  defining a featureSet and then a FeatureCollection from a json object. The map works the only thing is that the symbology shows up somewhere in Pitsburgh and New Haven and I do not know why???, not sure how I can make it show in DC. You can see the two read circles when you zoom out to the world extent.  Can someone tell me where my logic is failing??? I got this code from some other exapmple and just modified it.

<!DOCTYPE html> 
< html> 
< head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 
    <title>FeatureLayer</title> 
< link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
  
   
    <style> 
        html, body, #map { 
            padding: 0; 
            margin: 0; 
            height: 100%; 
            width: 100%; 
        } 
    </style>
 <script src="http://js.arcgis.com/3.19/"></script>   

    <script> 
        require([ 
            "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/SimpleRenderer", 
            "esri/tasks/FeatureSet", "esri/layers/FeatureLayer", "esri/basemaps",
            "dojo/domReady!" 
        ], function( 
            Map, SimpleMarkerSymbol, Color, SimpleRenderer, 
            FeatureSet, FeatureLayer 
        ) { 

  //My example was from https://community.esri.com/thread/171775


            var map = new Map("map", { 
  basemap: "osm",
  //center: [-123.141608, 49.245291],
 center: [-77.044180,  38.853682],
 zoom: 13
            }); 

                     map.on('load', function() { 
                    var jsonFS = {
  "displayFieldName": "Name",
  "fieldAliases": {
    "Name": "Name"
  },
  "geometryType": "esriGeometryPoint",
  "spatialReference": {
    "wkid": 102100
  },
  "fields": [{
    "name": "Name",
    "type": "esriFieldTypeOID",
    "alias": "Name"
  }],
  "features": [{
    "attributes": {
      "Name": "1"
    },
    "geometry": {
      "x": -8919439.31450887,
      "y": 4928270.761925456
 
 
    }
  }, {
    "attributes": {
      "Name": "2"
    },
    "geometry": {
      "x": -8155495.379532158,
      "y": 5075380.311392084
    }
  }]
};

                var fs = new FeatureSet(jsonFS);


    var layerDefinition = {
    "geometryType": "esriGeometryPoint",
    "drawingInfo": {
      "renderer": {
        "type": "simple",
        "symbol": {
          "type": "esriPMS",
          "style": "esriSMSSquare",
          "color": [76, 115, 0, 255],
          "width": 50,
          "height": 50
        }
      }
    },
    "fields": [{
      "name": "Name",
      "type": "esriFieldTypeOID",
      "alias": "Name"
    }]
  };

                var featureCollection = { 
                    layerDefinition : layerDefinition, 
                    featureSet : fs 
                }; 

                featureLayer = new FeatureLayer(featureCollection); 
                var symbol = new SimpleMarkerSymbol().setColor(new esri.Color([255,0,0,0.5])); 
                var renderer = new SimpleRenderer(symbol); 
                featureLayer.setRenderer(renderer); 

                map.addLayer(featureLayer); 
            }); 

        }); 
        </script> 
    </head> 

    <body class='claro'> 
        <div id="map" ></div> 
    </body> 

</html>


 

 

Outcomes