Graphics Layer not showing up on Map

4063
3
Jump to solution
06-30-2016 11:31 AM
RachelAlbritton
Occasional Contributor III

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>
0 Kudos
1 Solution

Accepted Solutions
TimWitt2
MVP Alum

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>

View solution in original post

3 Replies
TimWitt2
MVP Alum

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>
RachelAlbritton
Occasional Contributor III

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.

0 Kudos
TimWitt2
MVP Alum

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.

0 Kudos