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>
Solved! Go to Solution.
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>
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>
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.
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.