0

when trying to find radiobutton id using dom.byId("id") getting the error dom is undefined.

require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ImageParameters",
    "esri/dijit/BasemapLayer",
    "esri/dijit/Basemap",
    "esri/dijit/OverviewMap",
    "esri/geometry/webMercatorUtils",
    "dojo/parser",
    "dijit/registry",
    "dijit/Toolbar",
    "esri/toolbars/navigation",
    "esri/toolbars/draw",
    "esri/graphic",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "dijit/form/Button",
    "dojo/on",
    "dojo/dom",
    "dojo/domReady!"
  ],
  function(Map,
    ArcGISDynamicMapServiceLayer,
    ImageParameters,
    BasemapLayer,
    Basemap,
    OverviewMap,
    webMercatorUtils,
    parser,
    registry,
    Navigation,
    Draw,
    Graphic,
    SimpleFillSymbol,
    SimpleLineSymbol,
    Color,
    on,
    dom) {

    dojo.parser.parse();
    // Get a reference to the ArcGIS Map class
    var firstBasemapLayer = new esri.dijit.BasemapLayer({
      url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
    });
    var firstBasemap = new esri.dijit.Basemap({
      id: "Basemap1",
      layers: [firstBasemapLayer],
      opacity: 0.8,
      title: "World topo Map"

    });

    var secondBasemapLayer = new esri.dijit.BasemapLayer({
      url: "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
    });
    var secondBasemap = new esri.dijit.Basemap({
      id: "Basemap2",
      layers: [secondBasemapLayer],
      opacity: 0.8,
      title: "oceans"

    });

    var thirdBasemapLayer = new esri.dijit.BasemapLayer({
      url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
    });
    var thirdBasemap = new esri.dijit.Basemap({
      id: "Basemap3",
      layers: [thirdBasemapLayer],
      opacity: 0.8,
      title: "streets"

    });



    // Get a reference to the ArcGIS Map class
    map = new Map("map");
    map.setBasemap(firstBasemap);

    on(dom.byId("radiobasemap1"), "change", updateBaseMap);
    on(dom.byId("radiobasemap2"), "change", updateBaseMap);
    on(dom.byId("radiobasemap3"), "change", updateBaseMap);

    function updateBaseMap() {
      debugger;
      if (dojo.byId("radiobasemap1").checked) {

        map.setBasemap(firstBasemap);

      }
      if (dojo.byId("radiobasemap2").checked) {

        map.setBasemap(secondBasemap);

      }
      if (dojo.byId("radiobasemap3").checked) {

        map.setBasemap(thirdBasemap);

      }
    }



    //Get supported image Parameters
    var imageParameters = new ImageParameters();
    imageParameters.format = "PNG"; //set the image type to PNG24, note default is PNG8.


    var dynamicMap = new ArcGISDynamicMapServiceLayer("http://iicss63:6080/arcgis/rest/services/NCAOR_Prasad/WorldShape_Prasad/MapServer", {
      "opacity": 0.5,
      "imageParameters": imageParameters


    });
    map.addLayer(dynamicMap);

    map.on("load", function() {

      //after map loads, connect to listen to mouse move & drag events
      map.on("mouse-move", showCoordinates);
      map.on("mouse-drag", showCoordinates);


    });

    function showCoordinates(evt) {
      // the map is in web mercator but display coordinates in geographic (lat, long)

      //display Map coordinates

    }


    //Display overview Map
    var overviewMapDijit = new esri.dijit.OverviewMap({
        map: map,
        attachTo: "bottom-right",
        visible: true
      },

      dojo.byId("overviewMapDiv"));
    overviewMapDijit.startup();



    //create draw toolbar 
    drawToolbar = new esri.toolbars.Draw(map);

    //Create graphic and fill color to graphic   
    var symbol = new SimpleFillSymbol();

    drawToolbar.on("draw-end", addToMap);

    //add graphic to map
    function addToMap(evt) {
      debugger;
      var graphic = new Graphic(evt.geometry, symbol);
      map.graphics.add(graphic);
    }

    //navigation toolbar

    navToolbar = new esri.toolbars.Navigation(map);
    // var registrytools=dojo.digit.registry;
    on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

    registry.byId("zoomin").on("click", function() {
      drawToolbar.deactivate();
      navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
    });

    registry.byId("zoomout").on("click", function() {
      drawToolbar.deactivate();
      navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
    });

    registry.byId("zoomfullext").on("click", function() {
      drawToolbar.deactivate();
      navToolbar.zoomToFullExtent();
    });

    registry.byId("zoomprev").on("click", function() {
      drawToolbar.deactivate();
      navToolbar.zoomToPrevExtent();
    });

    registry.byId("zoomnext").on("click", function() {
      drawToolbar.deactivate();
      navToolbar.zoomToNextExtent();
    });

    registry.byId("pan").on("click", function() {
      drawToolbar.deactivate();
      navToolbar.activate(esri.toolbars.Navigation.PAN);
    });


    registry.byId("deactivate").on("click", function() {
      drawToolbar.deactivate();
      navToolbar.deactivate();

    });
    registry.byId("drawRectangle").on("click", function() {
      navToolbar.deactivate();
      drawToolbar.activate(esri.toolbars.Draw.RECTANGLE);

    });


    function extentHistoryChangeHandler() {

      registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
      registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
    }

  });

2 Answers 2

4

The array of module IDs passed to require includes "dijit/form/Button" but there's no alias for it in the callback.

Add Button, between Color, and on, in the arguments for your function that's passed to require and dom will exist and have the byId method you're trying to use.

0
2

You are also missing the alias for "dijit/Toolbar".

A more basic programming note is that you don't need

dojo.parser.parse();
var firstBasemapLayer = new esri.dijit.BasemapLayer({
var firstBasemap = new esri.dijit.Basemap({

when using AMD style. You just need

parser.parse();
var firstBasemapLayer = new BasemapLayer({
var firstBasemap = new Basemap({

I would suggest reading this blog post about AMD pattern

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.