Trying to add arcgis online layer to map

jaykapalczynski — Sun, 12 Dec 2021 16:26:01 GMT

From examples I am trying to add this to the code below:

  
arcgisUtils.createMap("7f843bb0a37849f68a5a2cc3d2b06288", "mapDiv").then(function (response) {
        map = response.map; 
});

Nothing shows up...its sort of a combination of two examples....just want to add data from a WebMap and from a REST enpoint...anyone know what I am doing wrong?

     
...SNIP
 
var map, tb;

      require([
        "esri/map", "esri/toolbars/draw", "esri/arcgis/utils",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
        "esri/graphic", 
        "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw, arcgisUtils,
        SimpleMarkerSymbol, SimpleLineSymbol,
        PictureFillSymbol, CartographicLineSymbol, 
        Graphic, Color, dom, on
      ) {
  
  arcgisUtils.createMap("7f843bb0a37849f68a5a2cc3d2b06288", "mapDiv").then(function (response) {
        map = response.map; 
  });
    
 map = new Map("mapDiv", {
          basemap: "topo",
          center: [-77.4329, 37.5410],
          zoom: 7,
          slider: true   
        });
        map.on("load", initToolbar);

...SNIP

Re: Trying to add arcgis online layer to map

JonathanUihlein — Sat, 11 Dec 2021 18:20:06 GMT

Remove this:

          
    map = new Map("mapDiv", {
          basemap: "topo",
          center: [-77.4329, 37.5410],
          zoom: 7,
          slider: true      
        });

You are already creating your map using response.map 😃

After removing this code, I see your webmap and what appear to be streams/rivers, colored with purple.

Re: Trying to add arcgis online layer to map

jaykapalczynski — Sat, 11 Dec 2021 18:20:09 GMT

I remove it and the map does not draw...this is all my code in the script
I still want Topo and it to center and zoom and a slider

   <script>
  
      var map, tb;

      require([
        "esri/map", "esri/toolbars/draw", "esri/arcgis/utils",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
        "esri/graphic", 
        "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw, arcgisUtils,
        SimpleMarkerSymbol, SimpleLineSymbol,
        PictureFillSymbol, CartographicLineSymbol, 
        Graphic, Color, dom, on
      ) {
  
  arcgisUtils.createMap("7f843bb0a37849f68a5a2cc3d2b06288", "mapDiv").then(function (response) {
        map = response.map; 
  });
    
    map = new Map("mapDiv", {
          basemap: "topo",
          center: [-77.4329, 37.5410],
          zoom: 7,
          slider: true   
        });
        map.on("load", initToolbar);  
  
        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
        var fillSymbol = new PictureFillSymbol(
          "images/mangrove.png",
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color('#000'), 
            1
          ), 
          42, 
          42
        );

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
        }
      });
   </script>

After deletion this is what I have left.
Doing so removed the MapDiv creation reference in the HTML

   <script>
  
      var map, tb;

      require([
        "esri/map", "esri/toolbars/draw", "esri/arcgis/utils",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
        "esri/graphic", 
        "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw, arcgisUtils,
        SimpleMarkerSymbol, SimpleLineSymbol,
        PictureFillSymbol, CartographicLineSymbol, 
        Graphic, Color, dom, on
      ) {
  
  arcgisUtils.createMap("7f843bb0a37849f68a5a2cc3d2b06288", "mapDiv").then(function (response) {
        map = response.map; 
  });
    
        map.on("load", initToolbar);  
  
        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
        var fillSymbol = new PictureFillSymbol(
          "images/mangrove.png",
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color('#000'), 
            1
          ), 
          42, 
          42
        );

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
        }
      });
   </script>

Re: Trying to add arcgis online layer to map

JonathanUihlein — Thu, 23 Jan 2014 16:47:56 GMT

http://jsfiddle.net/9VKCy/1/

This should be a good start. Please read the documentation concerning webmaps.

If you still have any questions, let me know.

topic Trying to add arcgis online layer to map in ArcGIS JavaScript Maps SDK Questions

Trying to add arcgis online layer to map

Re: Trying to add arcgis online layer to map

Re: Trying to add arcgis online layer to map

Re: Trying to add arcgis online layer to map