AnsweredAssumed Answered

Graphics Layer not showing up on Map

Question asked by rralbritton on Jun 30, 2016
Latest reply on Jun 30, 2016 by timw1984

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[i];
        graphic = new Graphic (new Point(features[i].geometry.x, features[i].geometry.y, new SpatialReference(102100)),pictureMarkerSymbol)
        //map.graphics.add(features[i]);
        map.addLayer(coffeeGL).add(features[i]);
        console.log(features[i].attributes);//see if querytask layer is being looped through
        console.log(features[i].geometry.x, features[i].geometry.y);
        }
    }
    
 });
    
</script>
<body class = "claro">
<div id="map" ></div>
</body>
</html>

Outcomes