Mapservice for ESRI's Javascript API Buffer Any Shape Example

[MichaelVolz]

To All Javascript API Developers:

The following URL is the link to ESRI's Javascript API Buffer Any Shape Example

https://developers.arcgis.com/javascript/jssamples/util_buffergraphic.html

I downloaded the source code to my computer to modify the example so it would use my organization's AGS service.  I was able to find the geometry service to perform the buffer operation, but I cannot find the mapservice for this sample in the source code.

Would anyone know where the mapservice is coming from for this example?

[ReneRubalcava]

Do you mean the basemap?
That's the street basemap defined in the map constructor.

map = new Map("map", {
  basemap: "streets",
  center: [-111.5, 39.541],
  zoom: 7
});

Other than that, there are no other services. That example uses the GraphicsLayer to draw graphics and buffers on the map.

[JamieSimko]

That example doesn't appear to have one. The map is setup with a base map only & then buffering is done on client-side shapes so it doesn't have a need for a dynamic map service.

I believe this example shows how to add one.

[MichaelVolz]

Rene:

I'm not familiar with adding a basemap.  Is that short-hand syntax that can be used only for ESRI's basemaps?

If I have my own mapservice(s), how would I add them as a basemap like this example did for ESRI's basemap?

[JakeSkinner]

Hi Michael,

Jamie is correct that this sample does not have a map service.  The application is buffering the drawn graphic.  The geometry is passed once the graphic is finished drawing:

function initToolbar(evtObj) {
      app.tb = new Draw(evtObj.map);
      app.tb.on("draw-end", doBuffer);
}

See more about the 'draw-end' event here.  You will see the returned property is geometry.  This is then passed to the 'doBuffer()' function.

[JakeSkinner]

Rene:

I'm not familiar with adding a basemap.  Is that short-hand syntax that can be used only for ESRI's basemaps?

If I have my own mapservice(s), how would I add them as a basemap like this example did for ESRI's basemap?

You will want to use the ArcGISTiledMapServiceLayer class.

[MichaelVolz]

Below is the original code from the sample

      "dijit/layout/ContentPane"],
    function(dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol){
      var map, gsvc, tb;
      parser.parse();
      map = new Map("map", {
        basemap: "streets",
        center: [-75.72, 39.96],
        zoom: 10
      });
      map.on("load", initToolbar);

I added a line of code to declare the var basemap and another line of code to add the basemap.  I then changed the basemap variable from streets to my new basemap variable

      "dijit/layout/ContentPane"],
    function(dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol){
      var map, gsvc, tb;
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://myServerLink/MapServer", { useMapImage: true, "id": "Basemap" });
    map.addLayer(basemap);
      parser.parse();
      map = new Map("map", {
        basemap: "basemap",
        center: [-75.72, 39.96],
        zoom: 10
      });
      map.on("load", initToolbar);

But now no map shows up.  Can anyone tell me what I am doing wrong in the modification of this sample?

I also changed the opening extents of the map so it would be centered on my basemap service.

[ReneRubalcava]

You will want to review the Map module here
https://developers.arcgis.com/javascript/jsapi/map-amd.html#map1
Review the details for a basemap

Specify a basemap for the map. The following are valid options: "streets" , "satellite" , "hybrid", "topo", "gray", "oceans", "national-geographic", "osm". As of version 3.3

You can omit the basemap option to not load a default basemap, then after you create the map you can add your layer as follows.

map.addLayer(basemap);

[JakeSkinner]

Below is the original code from the sample

      "dijit/layout/ContentPane"],
    function(dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol){
      var map, gsvc, tb;
      parser.parse();
      map = new Map("map", {
        basemap: "streets",
        center: [-75.72, 39.96],
        zoom: 10
      });
      map.on("load", initToolbar);

I added a line of code to declare the var basemap and another line of code to add the basemap.  I then changed the basemap variable from streets to my new basemap variable

      "dijit/layout/ContentPane"],
    function(dom, domAttr, array, Color, parser, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol){
      var map, gsvc, tb;
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://myServerLink/MapServer", { useMapImage: true, "id": "Basemap" });
    map.addLayer(basemap);
      parser.parse();
      map = new Map("map", {
        basemap: "basemap",
        center: [-75.72, 39.96],
        zoom: 10
      });
      map.on("load", initToolbar);

But now no map shows up.  Can anyone tell me what I am doing wrong in the modification of this sample?

I also changed the opening extents of the map so it would be centered on my basemap service.

Hi Michael,

You will only be able to use the 'basemap' option with the map class when you are specifying a valid option (i.e. 'topo', 'streets', etc).  See the link here.  You are on the right track by using the ArcGISTiledMapServiceLayer class.  When you use a new class, you will need to reference the module.  Take a look at the tutorial here.  Also, be sure you are referencing the AMD module and not the Legacy module.

Also, here is a jsfiddle example of adding a tiled service using the ArcGISTiledMapServiceLayer class.

[MichaelVolz]

Hi Jake:

Is jsfiddle an IDE for the Javascript API?  I ask because I never heard of this software.  Would you recommend this software for Javascript development?