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>
