Hi David,
Thanks for your suggestions and I actually used the sample when I wrote this code, but it's different as my requirements don't have the data coming from a service. I've tried a few changes, but haven't been able to get the PopupTemplates to display. Using the console I've confirmed that there are populated features in the FeatureLayer.Source.Items array. I've also tried populating the graphics in separate function. It seems odd the the points draw in the correct location and have data (at least at the console level), but the PopupTemplate won't work.
My modified code is below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<meta name="date" content="January 12, 2017" />
<title>Station Location Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css" />
<style>
html, body {
height: 100%;
}
#viewDiv {
padding: 0%;
margin: 0%;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Basemap",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/geometry/Point",
"esri/geometry/SpatialReference",
"esri/Graphic",
"esri/PopupTemplate",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/widgets/BasemapToggle",
"esri/widgets/Home",
"dojo/domReady!"],
function (
Basemap,
Map,
MapView,
FeatureLayer,
MapImageLayer,
Point,
SpatialReference,
Graphic,
PopupTemplate,
SimpleRenderer,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
BasemapToggle,
Home
) {
function station(name, location, latitude, longitude, url) {
this.name = name;
this.location = location;
this.latitude = latitude;
this.longitude = longitude;
this.url = url
};
var stations = [];
stations.push(new station("Station 1", "Canisteo River", 42.1, -77.2, "http://www.google.com"));
stations.push(new station("Station 2", "Juniata River", 40.5, -78.0, "http://www.google.com"));
stations.push(new station("Station 3", "Chiques Creek", 40.2, -76.3, "http://www.google.com"));
console.log('Array is populated...')
var fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "name",
alias: "name",
type: "string"
}, {
name: "location",
alias: "location",
type: "string"
}, {
name: "url",
alias: "url",
type: "string"
}];
var popupTemplate = new PopupTemplate({
title: "{name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "location",
label: "Location",
visible: true
}, {
fieldName: "url",
label: "More info",
visible: true
}]
}]
});
var map = new Map({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [-77, 41.25]
});
// symbolization //
var simpleLineSymbol = new SimpleLineSymbol({
color: "black",
width: "1px",
style: "solid"
});
// Circle Marker (DEFAULT)
var simpleMarkerSymbolDefault = new SimpleMarkerSymbol({
style: "circle",
color: "red",
size: "12px",
outline: simpleLineSymbol
});
var stationsRenderer = new SimpleRenderer({
symbol: simpleMarkerSymbolDefault,
label: "Monitoring Site"
});
var basemapToggle = new BasemapToggle({
view: view, // The view that provides access to the map's "streets" basemap
nextBasemap: "streets" // Allows for toggling to the "hybrid" basemap
});
// start the basemap toggle widget and add it to the view
basemapToggle.startup();
view.ui.add(basemapToggle, "top-right");
var home = new Home({
view: view
});
view.ui.add(home, "top-left");
view.then(function () {
console.log("view.then");
featureLayer = new FeatureLayer({
layerId: 1,
outfields: "*",
source: createGraphics(),
fields: fields,
spatialReference: new SpatialReference(4326),
objectIdField: "ObjectID",
renderer: stationsRenderer,
geometryType: "point", // Must be set when creating a layer from Graphics
popupTemplate: popupTemplate
});
console.log('log of feature layer....')
console.log(featureLayer);
map.add(featureLayer);
});
function createGraphics()
{
var graphics = [];
var i = 0;
for (s in stations) {
console.log(stations.latitude);
var pt = new Point(stations.longitude, stations.latitude);
var attr = { "ObjectID": i, "name": stations.name, "location": stations.location, "url": stations.url }
console.log(attr);
var graphic = new Graphic({
attributes: attr,
geometry: pt
});
graphics.push(graphic);
i = i + 1;
}
return graphics;
}
});
</script>
</head>
<body>
<div id="viewDiv">
</div>
</body>
</html>