Hi All,
I'm attempting to create a FeatureLayer from an array of graphics and have been able to get features to display on a map, but I'm not able to click on them to use the PopupTemplate. In earlier version of the js api 3.x I was able to get this to work, but I haven't had any success with version 4.2. I've attached all of my code and kept it as simple as possible. Does anybody know why the PopupTemplate isn't displaying?
Code Follows:
<!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 src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
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...')
require([
"esri/Basemap",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/geometry/Point",
"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,
Graphic,
PopupTemplate,
SimpleRenderer,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
BasemapToggle,
Home
) {
var stationFeatureLayer;
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,
nextBasemap: "streets"
});
basemapToggle.startup();
view.ui.add(basemapToggle, "top-right");
var home = new Home({
view: view
});
view.ui.add(home, "top-left");
var graphics = [];
view.then(function () {
console.log("view.then");
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,
popupTemplate: popupTemplate
});
graphics.push(graphic);
i = i + 1;
}
featureLayer = new FeatureLayer({
source: graphics,
fields: fields,
objectIdField: "ObjectID",
renderer: stationsRenderer,
geometryType: "point", // Must be set when creating a layer from Graphics
popupTemplate: popupTemplate
});
console.log(featureLayer);
map.add(featureLayer);
});
});
</script>
</head>
<body>
<div id="viewDiv">
</div>
</body>
</html>
