Basemap Gallery Issue

LloydBronn · ‎09-22-2016

So I'm new to Javascript. I'm working with two templates, Basemap gallery | ArcGIS API for JavaScript 3.17 and

Popup widget | ArcGIS API for JavaScript 3.17. It works, but the issue is that the map service layer doesn't load until I pick a basemap from the dropdown. I have the map variable set to a default basemap of light gray canavas, and the default view hovers over the US, but it seems like this is being overridden. It probably have something out of order.

Thanks!

Here is my code:

<!DOCTYPE html>
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Forecast Analysis</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .esriScalebar {
        padding: 20px 20px;
      }

      #map {
        padding: 0;
      }
    </style>

    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
      var map;
      require([
        "esri/config",
        "esri/map",
    "esri/dijit/BasemapGallery",
    "esri/arcgis/utils",
        "esri/dijit/Popup",
        "esri/dijit/PopupTemplate",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService",
        "dojo/dom-construct",
        "dojo/parser",
        "esri/Color",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
    "dijit/TitlePane",
        "dojo/domReady!"
      ],
        function (
          esriConfig, Map, BasemapGallery, arcgisUtils, Popup, PopupTemplate, FeatureLayer,
      SimpleMarkerSymbol, GeometryService, domConstruct, parser, Color
        ) {
          parser.parse();
      
      map = new Map("map", {
        basemap: "gray",
            center: [38.5, -96.8],
            zoom: 4,
      infoWindow: popup
          });
      
      var basemapGallery = new BasemapGallery({
    showArcGISBasemaps: true,
    map: map
    }, "basemapGallery");
    basemapGallery.startup();
    
    basemapGallery.on("error", function(msg) {
    console.log("basemap gallery error:  ", msg);
    });
     

          var popupOptions = {
            markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
              new Color([0, 0, 0, 0.25])),
            marginLeft: "20",
            marginTop: "20"
          };
          
      //create a popup to replace the map's info window
          var popup = new Popup(popupOptions, domConstruct.create("div"));

          var popupTemplate = new PopupTemplate({
            title: "Forecast Analysis",
            fieldInfos: [
              {
                fieldName: "Name",
                visible: true,
                label: "Location"
              },
        {
                fieldName: "Lat",
                visible: true,
                label: "Latitude"
              },
              {
                fieldName: "Lon",
                visible: true,
                label: "Longitude",
              }
            ],
            showAttachments: true
          });

          //create a feature layer based on the feature collection
          var featureLayer = new FeatureLayer("http://gis.mymetcon.com/arcgis/rest/services/Forecast_Analysis/MapServer/0",
            {
              mode: FeatureLayer.MODE_SNAPSHOT,
              infoTemplate: popupTemplate,
              outFields: ["Lat", "Lon", "Name"]
            });
      map.addLayer(featureLayer);
      
  });
  </script>
</head>

  <body class="claro">
  
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
         style="width: 100%; height: 100%; margin: 0;">
     
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"
           style="border:1px solid #000;padding:0;">
       
    <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        
    <div data-dojo-type="dijit/TitlePane" style="font-family:arial;background-color:lightgray"
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
       
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:480px; overflow:auto; font-family:arial;background-color:lightgray">
      
            <div id="basemapGallery"></div>
      
      </div>
      </div>
    </div>
      </div>
    </div>
  </body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RickeyFight · ‎09-22-2016

The first issue I found was that your center location was wrong

 center: [38.5, -96.8],
It should be 
center: [-96.8, 38.5],

When you switch the numbers the basemap should load on start.

LloydBronn · ‎09-22-2016

Thanks! It works like a charm now. It's weird, that center point 38.5, -96.8 worked before I added the basemap gallery.

JeffJacobson · ‎09-22-2016

You can set up a load event to pick a specific basemap when the gallery loads.

    basemapGallery = new BasemapGallery({
        map: map,
        basemapIds: map.layerIds
    }, "basemapGallery");
    basemapGallery.startup();
    
    // When the basemap gallery loads, select the first basemap with 
    // the title "Light Gray Canvas". (There should be only one, but that's what
    // the code is doing.)
    basemapGallery.on("load", function() {
        var basemap, basemaps = basemapGallery.basemaps.filter(function(basemap){
            return basemap.title === "Light Gray Canvas";
        });
        if (basemaps && basemaps.length > 0) {
            basemap = basemaps[0];
            basemapGallery.select(basemap.id);
        }
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍