0

I'm trying to get the overview map example working from here:

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

in my site. I have two errors. Chrome gives the one above in the title and IE gives "dojo/parser::parse() errorTypeError: Unable to get property 'toString' of undefined or null reference".

Also Chrome gives me the error: Uncaught TypeError: undefined is not a function when I have the OverviewMap variable in my function, IE says SCRIPT438: Object doesn't support property or method 'byId'. If I comment it out like this:

/*OverviewMap,*/ dom) {

and the reference to it below, I don't get those second two errors.

looked at this one: ArcGIS API for JavaScript - error in Dojo parser.parse()

but I don't have Lang=en anywhere...

@model Site.Models.LoginModel
@{
    ViewBag.Title = "My Map";

}
@functions{
    public string GetAntiForgeryToken()
    {
        string cookieToken, formToken;
        AntiForgery.GetTokens(null, out cookieToken, out formToken);
        return cookieToken + ":" + formToken;                
    }
}



@if (1==1)
{
    @section toolbar {
        <li>
            <div id="navToolbar" data-dojo-type="dijit/Toolbar" style="display:none">
      <div data-dojo-type="dijit/form/Button" id="printSimple" data-dojo-props="iconClass:'esriPrintIcon', label:'Print'"></div>
      <div data-dojo-type="dijit.form.Button" id="measure" data-dojo-props="label:'Measure', iconClass:'esriMeasureIcon'"></div>
      <div data-dojo-type="dijit/form/Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
      <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
      <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
      <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
      <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
                </div>
        </li>
        <!--        
        <li>
            <img src='@Href("~/Images/map/identify_b.png")' />
        </li>
         <li>
            <img src='@Href("~/Images/map/zoom_in_b.png")' />
        </li>
        <li>
            <img src='@Href("~/Images/map/zoom_out_b.png")' />
        </li>
         <li>
            <img src='@Href("~/Images/map/pan_b.png")' />
        </li>
      <li>
            <img src='@Href("~/Images/map/global_b.png")' />
        </li>

        <li>
            <img src='@Href("~/Images/map/print_b.png")' />
        </li> -->
        }


    <div class="row-fluid" style="height:100%">
        <input id="antiForgeryToken" type="hidden" value="@GetAntiForgeryToken()" />
        <div class="col col-lg-2 visible-desktop" >Sidebar</div>

     <!-- Bootstrap-map-js -->
        <div class="col col-lg-10">
                            <div style="position:absolute; right:20px; top:10px; z-Index:999;">
                    <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'true', open:'false'">
                        <div id="measurementDiv"></div>

                    </div>
                </div>
            <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane"
                 data-dojo-props="region:'center'"
                 style="padding:0">

            </div>
       </div>

    </div>
}
else
{
    <div class="todoList" id="loginPanel">
        <section id="localLoginPanel">
            <h2>Log in</h2>
            @Html.Partial("_Login")
        </section>
        <section id="socialLoginPanel">
            <h2>Log in using another service</h2>
            @Html.Action("ExternalLoginsList", "Account", new { ReturnUrl = ViewBag.ReturnUrl })
        </section>
        <p>First time here? <a id="showRegister">Sign up</a></p>
    </div>
    <div class="todoList" id="registerPanel">
        <h2>Sign up</h2>
        @Html.Partial("_Register")
        <p>Already signed up? <a id="showLogin">Log in</a></p>
    </div>
}
</div>

@if (1==1)
{


    @section styles {
      @Styles.Render("~/bundles/bootstrap/map/css")
        <link rel= "stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css" />
      <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"/>   


        }

    @section scripts {



        <!--
        @Scripts.Render("~/bundles/knockout")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/todo") -->


       <script src="http://js.arcgis.com/3.9/"></script> 
        <script>
            require(["esri/map", "application/bootstrapmap", "esri/toolbars/navigation",
        "dojo/on",
        "dojo/parser",
        "dijit/registry",
        "dijit/Toolbar",
        "dijit/form/Button",
          "esri/SnappingManager",
          "esri/dijit/Measurement",
          "dojo/dom",

        "esri/dijit/Scalebar",
         "dijit/layout/BorderContainer",
         "dijit/layout/ContentPane",
         "dijit/TitlePane",
         "dojo/domReady!",

         "esri/dijit/OverviewMap"

            ],
            function (Map, BootstrapMap, Navigation, on, parser, registry, Toolbar, Button, SnappingManager, Measurement, OverviewMap, dom) {
              var map = BootstrapMap.create("mapDiv",{
                  basemap:"national-geographic",
                  center:[-122.45,37.77],
                  zoom:12,
                  autoResize: true
              });


              parser.parse();

              navToolbar = new Navigation(map);

              on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
              registry.byId("zoomin").on("click", function () {
                  navToolbar.activate(Navigation.ZOOM_IN);
              });

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

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

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

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

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

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

              $('#navToolbar').show();

              esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");

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

              registry.byId("measure").on("click", function () {
                  measurement.show();
              });

              function extentHistoryChangeHandler() {
                  $("#zoomprev").disabled = navToolbar.isFirstExtent();
                  $("#zoomnext").disabled = navToolbar.isLastExtent();
              }

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

          });
    </script>

    }
}
  • I noticed that in my .cshtml file above I don't have the Lang=en , but it was added into the HTML when I was looking at the console. So I added this: <script> dojoConfig = { locale: 'en-us' }; </script> but same errors as above – noobieDev Jun 5 '14 at 14:21
2

the order of the modules you use dojo to load is different than the order in which you supply the corresponding argument aliases in your callback function. this is causing your variables to be mapped differently than you expect.

see this blog for more info. http://blogs.esri.com/esri/arcgis/2013/10/14/the-abcs-of-amd/

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.