AnsweredAssumed Answered

PopupTemplate from Client Side Graphics Not Working

Question asked by chuckf74 on Jan 12, 2017
Latest reply on Jan 25, 2017 by dcoley

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[s].latitude);

 

      var pt = new Point(stations[s].longitude, stations[s].latitude);


      var attr = { "ObjectID": i, "name": stations[s].name, "location": stations[s].location, "url": stations[s].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>

Outcomes