Community

Trying to add arcgis online layer to map

694
3
01-23-2014 08:19 AM
jaykapalczynski
by
Frequent Contributor
‎01-23-2014 08:19 AM
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
0 Kudos
3 Replies
JonathanUihlein
by Esri Regular Contributor
Esri Regular Contributor
‎01-23-2014 08:24 AM
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.
0 Kudos
jaykapalczynski
by
Frequent Contributor
‎01-23-2014 08:36 AM
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>



<div
id="mapDiv">
</div>
0 Kudos
JonathanUihlein
by Esri Regular Contributor
Esri Regular Contributor
‎01-23-2014 08:47 AM
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.
0 Kudos