nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Error creating BasemapGallery

JamesRichards1

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]

Trouver plus de publications taguées avec

Accepted answers

khutchins

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

All comments

PonLertsakdadet

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

JamesRichards1

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

khutchins

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.