topic Re: PopupTemplate from Client Side Graphics Not Working in ArcGIS JavaScript Maps SDK Questions

PopupTemplate from Client Side Graphics Not Working

chuckfrank — Thu, 12 Jan 2017 17:05:56 GMT

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>

#viewDiv {
padding: 0%;
margin: 0%;
height: 100%;
width: 100%;
}
</style>

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>

Re: PopupTemplate from Client Side Graphics Not Working

RickeyFight — Thu, 12 Jan 2017 17:16:42 GMT

Have you looked at this:

ArcGIS API for JavaScript Sandbox

Re: PopupTemplate from Client Side Graphics Not Working

chuckfrank — Thu, 12 Jan 2017 17:34:11 GMT

It's still not working. I can get PopupTemplates to work for map services but have not been able to get them to work when I'm building a FeatureLayer from an array of graphics.

Thanks

Re: PopupTemplate from Client Side Graphics Not Working

DavidColey — Thu, 12 Jan 2017 18:41:09 GMT

Hi Chuck - are you able to sucessfully render the feature layer from the Graphic array and are the attribute values from the graphic showing as values in the fields array of your feature layer? My guess is that the popupTemplate for the feature layer isn't getting values or the popup doesn't have a location set - it doesn't know where to position itself in the view. I know that you don't need to set the popupTemplate on the graphic, just on the feature layer.

Also, you may want to move the station funciton and stations.push under your require

I'd check this sample out if you haven't already

Create a FeatureLayer with client side graphics | ArcGIS API for JavaScript 4.2

Re: PopupTemplate from Client Side Graphics Not Working

chuckfrank — Fri, 13 Jan 2017 21:57:47 GMT

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:

   #viewDiv {
      padding: 0%;
      margin: 0%;
      height: 100%;
      width: 100%;
}
</style>

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 = [];

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>

Re: PopupTemplate from Client Side Graphics Not Working

DavidColey — Wed, 18 Jan 2017 15:55:26 GMT

Ok so when you say the popup template doesn't work - does the popup display at all? Or does the popup display but with no attributes? Also not to be a pain but if you could use the javascript syntax highlighter for your code that would help - it's hard to read otherwise

Re: PopupTemplate from Client Side Graphics Not Working

chuckfrank — Sat, 11 Dec 2021 20:47:03 GMT

I don't see the pop-up at all. When I console.log out values of variables it looks like all of the information is there with the attributes and I see points display on the map so it's really puzzling. I apologize for not using the syntax highlighter. I just now have found it. Thanks!

<!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>

        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[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
                    });

                    graphics.push(graphic);

                    // create a featureLayer from the graphics: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html

                    i = i + 1;
                }

                return graphics;
            }

        });

    </script>
</head>
<body>
    <div id="viewDiv">
    </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: PopupTemplate from Client Side Graphics Not Working

DavidColey — Sat, 11 Dec 2021 20:47:05 GMT

Right so you are close. The popup doesn't know where to position itself in the view. Your popup needs to have it's location set at your pt var. Here's how we return the popup from the search:

app.search.on("search-complete", function(evt){
       console.log(app.mapView.popup);
       if (app.activeView.popup.dockEnabled) {
          app.mapView.popup.visible = true;
       } else {
       //set the popup location
       app.mapView.popup.location = evt.results[0].results[0].feature.geometry.centroid;
       app.mapView.popup.visible = true;}
 });‍‍‍‍‍‍‍‍‍

in your case I think you just need to set your popup.location = pt;

Re: PopupTemplate from Client Side Graphics Not Working

chuckfrank — Mon, 23 Jan 2017 16:56:55 GMT

Thanks for your help, but I'm still not able to figure out why it's not working. I'm not sure what the "app" is referring to in the code you supplied, maybe a widget has that method? I'm running a hit test and no graphics are being found so that's a clue for me. That was the closest way I could think of to get to something that gets to the same concept as your code. I'm convinced that I've either found a bug in 4.2 or that this is some type of sequencing problem where the the feature class is added to the map before other parts of the application are ready. It has something to do with my creating the feature layer in code and not calling a service. Doing a hit test on feature I can see on the map, but not getting any results from the hit test is a clue, but I'm not sure what to do with it. I'm sure that if I changed these points to a map service it would all work fine, but I don't really want to make an entire map service just for a handful of points. Thanks again for you help.

Re: PopupTemplate from Client Side Graphics Not Working

DavidColey — Mon, 23 Jan 2017 18:02:42 GMT

Hi Chuck, if you go here:

jsapi 4.0 popup: set highlight graphic on feature layer click?

you can see how we are using hitTest and then setting the graphic's geometry to the click response, in our case polygons. 'app' is just a var from the Calcite Maps and Bootstrap | ArcGIS API for JavaScript 4.2

calcite maps project that we started with instead of trying to port all of our 3.x css over. Yes we are rendering our feaure layers and adding to the map usint addMany, but what you are doing is essentially the same thing. At this point though I have to ask why are you trying to create a feature layer from these graphics? You don't need a feauture layer if all you want to do is show a popup since you've already defined the graphics' attributes.

Re: PopupTemplate from Client Side Graphics Not Working

DavidColey — Wed, 25 Jan 2017 16:30:05 GMT

Yeah there you go. Much cleaner. This will help others too for sure

Re: PopupTemplate from Client Side Graphics Not Working

KevinCheriyan — Mon, 04 May 2020 12:21:06 GMT

Looks like this is still an issue with ArcGIS API for JavaScript 4.x. Feature Layer with a source of client side graphics cannot be interacted with on the webmap. PopupTemplate doesn't work in that you can't get a popup to appear. And also, hitTest() doesn't work, since the mapPoint doesn't recognize the features that are clicked on. See other post here from someone else a while back:

https://community.esri.com/thread/189210-viewhittest-returning-0-results

Re: PopupTemplate from Client Side Graphics Not Working

VincentJones — Tue, 19 May 2020 12:59:25 GMT

I managed to get this working (PopupTemplate on a feature layer with client side graphics) using version 4.11 and 4.12 of the API but it appears not to work again in any version since.

Re: PopupTemplate from Client Side Graphics Not Working

VincentJones — Thu, 28 May 2020 09:36:11 GMT

I finally tracked down what the issue was here. In my case I was reading the objectId from a data attribute and although a numeric value, it's type must have been considered string by the API; parsing as integer fixed the issue.

Re: PopupTemplate from Client Side Graphics Not Working

chuckfrank — Sat, 11 Dec 2021 20:47:09 GMT

Hi David,

Using the graphics sample you supplied, I was able to get Popup Templates to work with an array of graphics. I'm not really sure what was causing the original problem with going the Feature Layer route, but I may revisit that another time. Originally, I was trying to manually create a Feature Layer because I thought it would give me better capabilities with selections and rendering. In some troubleshooting while I was coding I noticed that I needed to click at a very precise location in order to to trigger the popup, but I wasn't able to determine the cause, so I just did a complete re-write and the working code is below. My leading thoughts on what was going wrong with my original attempt would be the way I was populating the source with a function; creating a feature layer in the "view.then"; or possibly the way I was constructing my Popup Template. Thanks again for your help!

Final Solution - Different Approach that Uses Graphics Instead of Feature Layer Follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Test Map 4.2</title>

    <!--ESRI JavaScript API-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">

    <!--ESRI JavaScript API-->
    <script src="https://js.arcgis.com/4.2/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/Graphic",
          "esri/geometry/Point",
          "esri/geometry/Polyline",
          "esri/geometry/Polygon",
          "esri/PopupTemplate",
          "esri/symbols/PictureMarkerSymbol",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          "esri/widgets/BasemapToggle",
           "esri/widgets/Home",
          "dojo/domReady!"
        ], function (
          Map,
          MapView,
          Graphic,
          Point,
          Polyline,
          Polygon,
          PopupTemplate,
          PictureMarkerSymbol,
          SimpleMarkerSymbol,
          SimpleLineSymbol,
          SimpleFillSymbol,
          BasemapToggle,
          Home
        ) {

            // populate the array
            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.esri.com/"));
            stations.push(new station("station 2", "Frankstown Branch Juniata River", 40.5, -78.0, "http://www.esri.com/"));
            stations.push(new station("station 3", "Chiques Creek", 40.2, -76.3, "http://www.esri.com/"));

            var map = new Map({
                basemap: "hybrid"
            });

            var view = new MapView({
                center: [-77, 41.25],
                container: "viewDiv",
                map: map,
                zoom: 8
            });

            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");

            // symbolization //
            var simpleLineSymbol = new SimpleLineSymbol({
                color: "black",
                width: "1px",
                style: "solid"
            });

            // Circle Marker (DEFAULT)
            var simpleMarkerSymbol = new SimpleMarkerSymbol({
                style: "circle",
                color: "red",
                size: "12px",
                outline: simpleLineSymbol
            });


            var pt = new PopupTemplate({ // autocasts as new PopupTemplate()
                title: "Station: {Station}",
                content: [{
                    type: "fields",
                    fieldInfos: [{
                        fieldName: "Location"
                    }, {
                        fieldName: "Url"
                    }]
                }],
            });

            // loop
            for (s in stations) {

                // First create a point geometry (this is the location of the Titanic)
                var point = new Point({
                    longitude: stations[s].longitude,
                    latitude: stations[s].latitude
                });

                // Create an object for storing attributes related to the line
                var pointAtt = {
                    Station: stations[s].name,
                    Location: stations[s].location,
                    Url: stations[s].url
                };

                // Create a graphic and add the geometry and symbol to it
                var pointGraphic = new Graphic({
                    geometry: point,
                    symbol: simpleMarkerSymbol,
                    attributes: pointAtt,
                    popupTemplate: pt
                });

                // Add the graphics to the view's graphics layer
                view.graphics.add(pointGraphic);
            }
        });
    </script>
</head>
<body>
    <div id="viewDiv">
    </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍