Joshua,
Also here is that 4.x sample converted to 3.20:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a FeatureLayer with client side graphics - 3.20</title>
<style>
html,
body,
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
position: absolute !important;
top: 15px;
right: 5px;
max-height: 80%;
max-width: 300px;
background-color: black;
padding: 8px;
border-top-left-radius: 5px;
color: white;
opacity: 0.8;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/map",
"esri/graphic",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/layers/Field",
"esri/geometry/Point",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/dijit/Legend",
"esri/request",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(Map, Graphic, PopupTemplate, FeatureLayer, Field, Point,
SimpleRenderer, SimpleMarkerSymbol, Legend, esriRequest,
arrayUtils, dom, on
) {
var lyr, legend;
var pTemplate = new PopupTemplate({
title: "{title}",
fieldInfos: [{
fieldName: "place",
label: "Location",
visible: true
}, {
fieldName: "time",
label: "Date and time",
visible: true
}, {
fieldName: "mag",
label: "Magnitude",
visible: true
}, {
fieldName: "mmi",
label: "Intensity",
visible: true
}, {
fieldName: "depth",
label: "Depth",
visible: true
}, {
fieldName: "felt",
label: "Number who felt the quake",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "sig",
label: "Significance",
visible: true
}, {
fieldName: "url",
label: "More info",
visible: true
}, {
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}]
});
var map = new Map("mapDiv", {
basemap: "dark-gray",
center: [-144.492, 62.771],
zoom: 5,
});
map.infoWindow.highlight = false;
map.on("load", function() {
getData()
.then(createGraphics)
.then(createLayer)
.then(createLegend)
.otherwise(errback);
});
function getData() {
var url = "week.geojson";
return esriRequest({
url,
handleAs: "json"
});
}
function createGraphics(response) {
return arrayUtils.map(response.features, function(feature, i) {
return new Graphic(
new Point({
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
}), null,
{
ObjectID: i,
title: feature.properties.title,
type: feature.properties.type,
place: feature.properties.place,
depth: feature.geometry.coordinates[2] + " km",
time: feature.properties.time,
mag: feature.properties.mag,
mmi: feature.properties.mmi,
felt: feature.properties.felt,
sig: feature.properties.sig,
url: feature.properties.url
}
);
});
}
function createLayer(graphics) {
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": graphics,
"geometryType": "esriGeometryPoint"
}
};
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"color": [255, 255, 255, 0],
"size": 20,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCircle",
"outline": {
"color": [211, 0, 85, 255],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
}
},
"visualVariables": [{
"type": "sizeInfo",
"field": "mag",
"valueUnit": "unknown",
"minDataValue": 2,
"maxDataValue": 7,
"minSize": {
"type": "sizeInfo",
"expression": "view.scale",
"stops": [{
"value": 1128,
"size": 12
},
{
"value": 36111,
"size": 12
},
{
"value": 9244649,
"size": 6
},
{
"value": 73957191,
"size": 4
},
{
"value": 591657528,
"size": 2
}
]
},
"maxSize": {
"type": "sizeInfo",
"expression": "view.scale",
"stops": [{
"value": 1128,
"size": 80
},
{
"value": 36111,
"size": 60
},
{
"value": 9244649,
"size": 50
},
{
"value": 73957191,
"size": 50
},
{
"value": 591657528,
"size": 25
}
]
}
}]
}
},
"fields": [{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "title",
alias: "title",
type: "string"
}, {
name: "type",
alias: "type",
type: "string"
}, {
name: "place",
alias: "place",
type: "string"
}, {
name: "depth",
alias: "depth",
type: "string"
}, {
name: "time",
alias: "time",
type: "date"
}, {
name: "mag",
alias: "Magnitude",
type: "double"
}, {
name: "url",
alias: "url",
type: "string"
}, {
name: "mmi",
alias: "intensity",
type: "double"
}, {
name: "felt",
alias: "Number of felt reports",
type: "double"
}, {
name: "sig",
alias: "significance",
type: "double"
}]
};
lyr = new FeatureLayer(featureCollection, {
infoTemplate: pTemplate
});
map.addLayer(lyr);
return lyr;
}
function createLegend(layer) {
if (legend) {
legend.layerInfos = [{
layer: layer,
title: "Magnitude"
}];
} else {
legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Earthquake"
}]
}, "legDiv");
legend.startup();
}
}
function errback(error) {
console.error("Creating legend failed. ", error);
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
<div id="infoDiv">
<h2>Worldwide Earthquakes</h2> Reported from 03/28/16 to 04/04/16
<div id="legDiv"></div>
</div>
</body>
</html>