AnsweredAssumed Answered

Basemap Gallery Issue

Question asked by lloydbronn on Sep 22, 2016
Latest reply on Sep 22, 2016 by lloydbronn

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>

 

Table of contents

Outcomes