Difficulty displaying map and layers

GrantHaynes · ‎09-07-2021

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> <!--wrong version?-->
    <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>

JeffreyWilkerson · ‎09-08-2021

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> <!--wrong version?-->
    <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>

JeffreyWilkerson · ‎09-08-2021

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.

JeffreyWilkerson · ‎09-08-2021

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.

RitikaManderwal · ‎09-09-2021

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.