Error creating BasemapGallery

JamesRichards1 · ‎01-19-2012

I'm trying to do something similar to these samples:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/widget_mobilegallery.html
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/widget_basemapsthumbnail.html

where I use a BasemapGallery "behind the scenes" and create my own UI.

In my case I am using the compact framework and Dojo Mobile. I am trying to create an EdgeToEdgeList that displays the Basemaps and allows the user to select one. However, I'm getting a javascript error when I try to create the BasemapGallery widget. The error is:

"Uncaught TypeError: Object #<Object> has no method 'parse'"

If anyone knows why this is happening, and more importantly, how to fix it - Please let me know!

I'm somewhat new to JS so it's probably something simple 🙂

Here is my code with a comment preceding the offending line:

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Basemap Gallery Test</title>
    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojox/mobile/themes/iPhone/iPhone.css" rel="stylesheet">
    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojox/mobile/themes/buttons.css" rel="stylesheet">
    <script type="text/javascript">
      djConfig = {
        parseOnLoad: true
      }
    </script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6compact"></script>

    <script type="text/javascript">
      djConfig = dojo.config;
      dojo.require("dojox.mobile");
      dojo.require("dojox.mobile.parser");
      dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");

      var map;

      function init() {

        // Initial extent
        var initExtent = new esri.geometry.Extent({
          "xmin":-11878390,
          "ymin":4598298,
          "xmax":-11455847,
          "ymax":5052028,
          "spatialReference":{"wkid":102100}
        });

        // Create map
        map = new esri.Map("map", {
          extent: initExtent
        });

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
        map.addLayer(basemap);

        // BUG: THIS LINE CAUSES A JAVASCRIPT ERROR
        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        });

        dojo.connect(basemapGallery, "onLoad", function () {
          // TODO: Iterate the basemaps and populate the basemapList with ListItems
          //       that display the thumbnail and basemap name. Then wire up an event
          //       to change the basemap when an item is selected.
        });
      }

      function orientationChanged() {
        if (map) {
          map.reposition();
          map.resize();
        }
      }

      dojo.addOnLoad(init);
    </script>
</head>
<body onorientationchange="orientationChanged();">
<div id="mapView" dojoType="dojox.mobile.View" selected="true">
    <div dojoType="dojox.mobile.Heading" fixed="top" align="center" label="Map">
      <div dojoType="dojox.mobile.ToolBarButton" style="float:right;" moveTo="basemapView">Basemap</div>
    </div>
    <div id="map" style="width:100%; height:100%;">
    </div>
</div>
<div id="basemapView" dojoType="dojox.mobile.View">
    <div dojoType="dojox.mobile.Heading" fixed="top" align="center" label="Basemap" back="Map" moveTo="mapView"></div>
    <div>
      <ul id="basemapList" dojoType="dojox.mobile.EdgeToEdgeList" select="single" style="width:100%; height:100%;"></ul>
    </div>
</div>
</body>
</html>
[/HTML]

KellyHutchins · ‎01-19-2012

It looks like the basemap gallery doesn't work when using the mobile parser. Try commenting out the dojo.require for the mobile parser:

      dojo.require("dojox.mobile");   //    dojo.require("dojox.mobile.parser");

For more details on building a mobile app without the mobile parser see the FAQs here:
http://dojotoolkit.org/reference-guide/dojox/mobile/faq.html

View solution in original post

KellyHutchins · ‎01-19-2012

It looks like the basemap gallery doesn't work when using the mobile parser. Try commenting out the dojo.require for the mobile parser:

      dojo.require("dojox.mobile");   //    dojo.require("dojox.mobile.parser");

For more details on building a mobile app without the mobile parser see the FAQs here:
http://dojotoolkit.org/reference-guide/dojox/mobile/faq.html

JamesRichards1 · ‎01-19-2012

Thank you Kelly! That totally solved it. You are a star 🙂

PonLertsakdadet · ‎04-05-2012

I had the same problem and Kelly's advice fixed it. Thanks.