I'm trying to add a graphics layer to a map, but the icons (point features) are not showing. When the map loads in Firefox, I'm not getting any errors and all of the feature names and coordinates are being logged, so the query appears to be executing correctly. I've created a new graphic and added the geometry, spatial reference, and icons. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Switch Test</title>
<!-- css references -->
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/mobile/themes/iphone/iphone.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/symbols/PictureMarkerSymbol",
"esri/graphic",
"esri/InfoTemplate",
"esri/tasks/FeatureSet",
"dojo/dom",
"dojo/ready",
"dojox/mobile/Switch",
"dojo/domReady!"
],
function(Map, ArcGISTiledMapServiceLayer,GraphicsLayer, Query, QueryTask, Point, SpatialReference, PictureMarkerSymbol, Graphic, InfoTemplate,dom, ready, Switch) {
map = new Map("map", {
basemap: "topo",
center: [-111.841947,40.765530],
zoom: 15
});
var basemap = new ArcGISTiledMapServiceLayer ("https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer");
map.addLayer(basemap);
var coffeeGL = new GraphicsLayer({
id: "coffeeGL",
url:"https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/0",
});
var query = new Query();
var infoTemplate = new InfoTemplate("${Name}","${*}");
var pictureMarkerSymbol = new PictureMarkerSymbol("http://map.utah.edu/images/icons/poi/coffeeicon.png", 30, 30);
query.where = "1 =1";
query.outfields = ["Name"];
query.returnGeometry = true;
var queryTask = new QueryTask ("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/0");
queryTask.execute(query, addToMap);
function addToMap (featureSet){
var features = featureSet.features;
var feature;
var graphic;
for(var i=0, il=features.length; i<il; i++){
feature = features;
graphic = new Graphic (new Point(features.geometry.x, features.geometry.y, new SpatialReference(102100)),pictureMarkerSymbol)
//map.graphics.add(features);
map.addLayer(coffeeGL).add(features);
console.log(features.attributes);//see if querytask layer is being looped through
console.log(features.geometry.x, features.geometry.y);
}
}
});
</script>
<body class = "claro">
<div id="map" ></div>
</body>
</html>
