topic Difficulty displaying map and layers in ArcGIS JavaScript Maps SDK Questions

Difficulty displaying map and layers

GrantHaynes — Wed, 08 Sep 2021 01:53:54 GMT

Hi everyone,

I've been asked to work on a simple web app, but I'm a novice when it comes to the JS API and I'm having problems getting a basemap and layers up. Could anyone here help me out

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Demo</title> <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } #textbox{ background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 20px; z-index: 40; } </style> <script src="https://js.arcgis.com/4.20/"></script>  <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/Graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "esri/geometry/Circle", "esri/rest/support/Query", "esri/geometry/Point", "esri/layers/GraphicsLayer" ], function( MapView, FeatureLayer, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, Circle, Query, Point, GraphicsLayer, Map ) { const feedlotFL = new FeatureLayer({ url: "https://arcgis.dnr.state.mn.us/arcgis/rest/services/ewr/practicum_feedlot/MapServer/0", outFields: ["*"] }); // Selected feedlots const selectedFeedlotsGL = new GraphicsLayer(); // Map const feedlotMap = new Map({ basemap: "arcgis-topographic", //wrong basemap type? layers: [feedlotFL, selectedFeedlotsGL] }); // View const mapView = new MapView({ container: "mapDiv", map: feedlotMap }); mapView.on("click", evt => { // TODO: Clear the graphics const circleSymb = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, new Color([0, 0, 0]),2), new Color([255, 255, 0, 0.25]) ); // Buffer type const circle = new Circle({ center: evt.mapPoint, radius: 25, // geodesic: true, radiusUnit: "feet" }); const bufferGraphic = new Graphic(circle, circleSymb); mapView.graphics.add(bufferGraphic); let query = new Query({ geometry: mapView.toMap(evt), distance: 25, units: "feet", spatialRelationship: "intersects", returnGeometry: true, outFields: ["*"] }); feedlotFL.queryFeatures(query).then(response => { document.getElementById('textbox').innerHTML = "<b>The number of feedlots within the buffer is <i>" + feedlotCount + "</i>.</b>" const selectedFeedlots = []; for (let i = 0; i < feedlotCount; i++) { selectedFeedlots.push(response.features[i]); } addGraphics(selectedFeedlots); function addGraphics(feedlots) { feedlots.forEach(function(feature){ const eachSelectedFeedlotPt = new Graphic({ geometry: feature.geometry, symbol: { type: "simple-marker", color: [0,0,0], outline: { width: 2, color: [0,255,255], }, size: "10px" }, }); selectedFeedlotsGL.add(eachSelectedFeedlotPt); }); } }); }); }); </script> </head> <body> <span id="textbox">Click on the map to select feedlots within 10 miles</span> <div id="mapDiv"></div> </body> </html>

Re: Difficulty displaying map and layers

JeffreyWilkerson — Wed, 08 Sep 2021 15:17:23 GMT

I started messing around with the CSS, and then the Map and MapView setup just to see if it wasn't set to something that worked. But then I noticed that in the Require call you had 'Map' at the end, but it was the first javascript library call. I switched that so that 'Map' was at the beginning and it is working, at least for the basemap. Not sure about your layers and graphics. Here is what I was tinkering with:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Demo</title> <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #textbox { background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 20px; z-index: 40; } </style> <script src="https://js.arcgis.com/4.20/"></script>  <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/Graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "esri/geometry/Circle", "esri/rest/support/Query", "esri/geometry/Point", "esri/layers/GraphicsLayer" ], function( Map, MapView, FeatureLayer, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, Circle, Query, Point, GraphicsLayer ) { const feedlotFL = new FeatureLayer({ url: "https://arcgis.dnr.state.mn.us/arcgis/rest/services/ewr/practicum_feedlot/MapServer/0", outFields: ["*"] }); // Selected feedlots const selectedFeedlotsGL = new GraphicsLayer(); // Map const feedlotMap = new Map({ basemap: "topo-vector", //wrong basemap type? layers: [feedlotFL, selectedFeedlotsGL] }); // View const mapView = new MapView({ container: "mapDiv", map: feedlotMap, center: [-99.1, 35.5], zoom: 9 }); mapView.on("click", evt => { // TODO: Clear the graphics const circleSymb = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, new Color([0, 0, 0]),2), new Color([255, 255, 0, 0.25]) ); // Buffer type const circle = new Circle({ center: evt.mapPoint, radius: 25, // geodesic: true, radiusUnit: "feet" }); const bufferGraphic = new Graphic(circle, circleSymb); mapView.graphics.add(bufferGraphic); let query = new Query({ geometry: mapView.toMap(evt), distance: 25, units: "feet", spatialRelationship: "intersects", returnGeometry: true, outFields: ["*"] }); feedlotFL.queryFeatures(query).then(response => { document.getElementById('textbox').innerHTML = "<b>The number of feedlots within the buffer is <i>" + feedlotCount + "</i>.</b>" const selectedFeedlots = []; for (let i = 0; i < feedlotCount; i++) { selectedFeedlots.push(response.features[i]); } addGraphics(selectedFeedlots); function addGraphics(feedlots) { feedlots.forEach(function(feature){ const eachSelectedFeedlotPt = new Graphic({ geometry: feature.geometry, symbol: { type: "simple-marker", color: [0,0,0], outline: { width: 2, color: [0,255,255], }, size: "10px" }, }); selectedFeedlotsGL.add(eachSelectedFeedlotPt); }); } }); }); }); </script> </head> <body> <span id="textbox">Click on the map to select feedlots within 10 miles</span> <div id="mapDiv"></div> </body> </html>

Re: Difficulty displaying map and layers

JeffreyWilkerson — Thu, 09 Sep 2021 15:05:30 GMT

In the Require, your 'Map' variable doesn't correspond to the right javascript library. Also, if you click on the map the Console is saying that you don't define feedlotCount before you use in the For statement.

Re: Difficulty displaying map and layers

JeffreyWilkerson — Wed, 08 Sep 2021 15:52:35 GMT

I keep trying to post some code that works, but basically if you move 'Map' from the end of the variable list in the Require statement to the beginning to correspond to the "esri\Map" library exposed there it will start working. The feedlotCount variable needs to be set prior to using it as well but that you can probably handle.

Re: Difficulty displaying map and layers

RitikaManderwal — Thu, 09 Sep 2021 08:53:22 GMT

hi,

require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/Graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "esri/geometry/Circle", "esri/rest/support/Query", "esri/geometry/Point", "esri/layers/GraphicsLayer" ], function( Map, MapView, FeatureLayer, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, Circle, Query, Point, GraphicsLayer, ) {

kindly do these changes to your code.

bring 'Map' from the end of the variable list in the Require statement to the beginning to correspond to the "esri\Map" shown in the code. in require statement you should maintain the sequence.