0

I am having an issue with the Measurement-Widget in combination with other widgets with the newest ArcGIS API for JavaScript (3.13). With the sandbox, I was able to create a map which includes HomeButton, LocateButton, Scalebar, OverviewMap and BasemapGallery. All this works together. When I start to add the code of the Measurement-Widget, the other widgets disappear. So I removed some code from the -container and sfs, pacelsLayer, snapManager and layerInfos. With or without it, it doesn't matter. When I comment out this part:

//esriConfig.defaults.io.proxyUrl = "/proxy/";
//esriConfig.defaults.io.alwaysUseProxy = false;
//esriConfig.defaults.geometryService = new GeometryService ("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

the other widgets work again, but the Measurement-Widget tools are missing.

I tried also to build the homebutton inside of the following link, but it doesn't work. http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=widget_measurement

The Search/Geocoder-Widget doesn't work too...but there seems that it have a problem with the BasemapGallery.

<!DOCTYPE html>
<html>
  <head>

    <title>Part VII: Measurement-Widget</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">   

    <style>
      html, body, #mapDIV {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

     #HomeButtonDIV {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
        }

     #LocateButtonDIV {
      position: absolute;
      top: 135px;
      left: 20px;
      z-index: 50;
    }

    </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>
      var map, home, locate, overviewMapDijit, scalebar, basemapGallery, sfs, parcelsLayer, snapManager, layerInfos, measurement;

      require([ "esri/map",
                "esri/dijit/HomeButton",
                "esri/dijit/LocateButton",
                "esri/dijit/OverviewMap",
                "esri/dijit/Scalebar",
                "esri/dijit/BasemapGallery",
                "esri/arcgis/utils",
                "dojo/parser",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dijit/TitlePane",

                "dojo/dom",
                "esri/Color",
                "dojo/keys",
                "esri/config",
                "esri/sniff",
                "esri/SnappingManager",
                "esri/dijit/Measurement",
                "esri/layers/FeatureLayer",
                "esri/renderers/SimpleRenderer",
                "esri/tasks/GeometryService",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "dijit/form/CheckBox",

                "dojo/domReady!"],
                function(Map, HomeButton, LocateButton, OverviewMap, Scalebar, BasemapGallery, arcgisUtils, parser,
                dom, Color, keys, esriConfig, has, SnappingManager, Measurement, FeatureLayer, SimpleRenderer,
                GeometryService, SimpleLineSymbol, SimpleFillSymbol
                ) {

        map = new Map("mapDIV", { //unsere DIV-ID
          basemap: "osm", 
          center: [13.734875, 51.034163], //laenge, breite
          zoom: 18 //zoomstufe
        });

                parser.parse();

                //esriConfig.defaults.io.proxyUrl = "/proxy/";
                //esriConfig.defaults.io.alwaysUseProxy = false;
                //esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");


        home = new HomeButton({
            map: map
            }, "HomeButtonDIV");
            home.startup();

        geoLocate = new LocateButton({
            map: map
            }, "LocateButtonDIV");
            geoLocate.startup();

        overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();

        scalebar = new Scalebar({
            map: map,
            scalebarUnit: "dual",
            attachTo: "bottom-left"
            });

        basemapGallery = new BasemapGallery({
            showArcGISBasemaps: true,
            map: map
            }, "basemapGalleryDIV");
            basemapGallery.startup();

            basemapGallery.on("error", function(msg) {
            console.log("basemap gallery error:  ", msg);
            });

<!--        //sind die konturen der flaechen beim sandboxtest   
        sfs = new SimpleFillSymbol(
            "solid",
            new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2), 
            null
            );
        //duerfte der Layer fuer die parzellen sein, die mir angezeigt werden bei der sandbox
        parcelsLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
            });
            parcelsLayer.setRenderer(new SimpleRenderer(sfs));
            map.addLayers([parcelsLayer]);

        snapManager = map.enableSnapping({
            snapKey: has("mac") ? keys.META : keys.CTRL
            });
        //keine ahnung wofür das ist
        layerInfos = [{
            layer: parcelsLayer
            }];
            snapManager.setLayerInfos(layerInfos); -->


        measurement = new Measurement({
            map: map
            }, dom.byId("measurementDIV"));
            measurement.startup();



      });
    </script>
  </head>

  <body class="claro">
    <div id="mapDIV"></div>
    <div id="HomeButtonDIV"></div>
    <div id="LocateButtonDIV"></div>

    <div style="position:absolute; right:0px; top:252px; z-Index:999;">
            <div data-dojo-type="dijit/TitlePane" 
                data-dojo-props="title:'Switch Basemap', closable:false, open:true">
                 <div data-dojo-type="dijit/layout/ContentPane" style="width:391px; height:221px; overflow:auto;">
                     <div id="basemapGalleryDIV"></div>
                </div>
            </div>
    </div>

    <div style="position:absolute; right:0px; top:544px; z-Index:999;">
          <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false, open:true">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:391px; height:221px; overflow:auto;">
            <div id="measurementDIV"></div>
            <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
          </div>
          </div>
        </div>


  </body>
</html>
  • 1
    First, I'd suggest you replace the html comments with /* javascript */ commments. Second, move the BorderContainer, ContentPane, and TitlePane references in your require() statement so that they're under the dijit/form/CheckBox reference. – raykendo Mar 25 '15 at 15:44
2

The modules in your require are not matching with the variables in the function.

You need to move the modules dijit/layout/BorderContainer, dijit/layout/ContentPane, and dijit/TitlePane to after esri/symbols/SimpleFillSymbol.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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