topic Re: Graphics Layer not showing up on Map in ArcGIS JavaScript Maps SDK Questions

Graphics Layer not showing up on Map

RachelAlbritton — Fri, 10 Dec 2021 22:38:57 GMT

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>

Re: Graphics Layer not showing up on Map

TimWitt2 — Fri, 10 Dec 2021 22:39:00 GMT

IS there a reason why you add it as a graphics layer and not as a feature layer?

*I have edited the code to include your picture marker symbol.

<!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/layers/FeatureLayer",
  "esri/renderers/SimpleRenderer",
        "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,FeatureLayer,SimpleRenderer, 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 featureLayer = new FeatureLayer("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/0",{
  mode: FeatureLayer.MODE_ONDEMAND,
  outFields: ["*"]
  });

  var pictureMarkerSymbol = new PictureMarkerSymbol("http://map.utah.edu/images/icons/poi/coffeeicon.png", 30, 30); 

  var featureRend = new SimpleRenderer(pictureMarkerSymbol);
  featureLayer.setRenderer(featureRend);

        map.addLayer(featureLayer);  
    var coffeeGL = new GraphicsLayer({  
        id: "coffeeGL",  
        url:"https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/0",  
        });  
          map.addLayer(coffeeGL);
      
      
 });  
      
</script>  
<body class = "claro">  
<div id="map" ></div>  
</body>  
</html>

Re: Graphics Layer not showing up on Map

RachelAlbritton — Thu, 30 Jun 2016 19:17:10 GMT

Thanks Tim -

I'm honestly not sure why - This is a very small part of a much larger existing project and I'm just following the lead. Your solution works so I'll run with it and discuss with my project lead. Thank you.

Re: Graphics Layer not showing up on Map

TimWitt2 — Thu, 30 Jun 2016 19:20:56 GMT

Sounds good, you can also remove the graphics layer from my code to make it cleaner. Let me know if you have any other questions.