Basemap Gallery Extents

DuncanRager · ‎06-27-2011

Greetings,

I'm constructing a basemap gallery drop down menu button. I've left the default World Street Map as the initial basemap, and predefined an extent. This works when loaded.

When I switch basemaps through the menu (using a different Map Service), I lose the defined extent, with the new basemap having its full extent.

Anybody know how to fix this so I maintain the defined extent despite map service/basemap changes?

Thanks,

DR

HemingZhu · ‎06-27-2011

Greetings,

I'm constructing a basemap gallery drop down menu button. I've left the default World Street Map as the initial basemap, and predefined an extent. This works when loaded.

When I switch basemaps through the menu (using a different Map Service), I lose the defined extent, with the new basemap having its full extent.

Anybody know how to fix this so I maintain the defined extent despite map service/basemap changes?

Thanks,

DR

Set the map extent in your map constructor, the map will honor that extent no matter how you switch your basemaps amony may gallery.

DuncanRager · ‎06-28-2011

I have, but it results in some funny behavior, which I'm sure has to do with the spatial reference... I am just unsure how to manipulate the extent from web mercator to UTM.

 function init() {
    
    /* Set Extent and Create Map Constructor */
    var extent = new esri.geometry.Extent({
        "xmin": -75.35,
        "ymin": 41.6,
        "xmax": -74.06,
        "ymax": 42.75,
        "spatialReference": {
            "wkid": 4269
        }
    });
    
    map = new esri.Map("map", {
        extent: esri.geometry.geographicToWebMercator(extent)
    });
    
    /* Add Basemap */
    var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
    var basemapInitial = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
    map.addLayer(basemapInitial);
    
    /* AA - Create Basemap Gallery */
    createBasemapGallery();

...

/* AA */
function createBasemapGallery(){
  
     /* ESRI World Street Map */
     var layerStreet = new esri.dijit.BasemapLayer({
            url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
    });
    var basemapStreet = new esri.dijit.Basemap({
      layers: [layerStreet],
      title: "ESRI Street Map"
    });
    basemaps.push(basemapStreet);
    
    /* New Basemap */
    var newBaselayer = new esri.dijit.BasemapLayer({
      url:"http://host/ArcGIS/rest/services/myservice/MapServer",
   visibleLayers:[2]
    });
    var newBasemap = new esri.dijit.Basemap({
      layers: [newBaselayer],
      title: "Other Basemap"
    });
    basemaps.push(newBasemap);

    /* Create Gallery and Populate Drop Down Menu */
    basemapGallery = new esri.dijit.BasemapGallery({
      showArcGISBasemaps: false,
      basemaps: basemaps,
      map: map
    });
 
    dojo.forEach(basemapGallery.basemaps, function(basemap){
   dijit.byId("basemapMenu").addChild(new dijit.MenuItem({
    label: basemap.title,
    onClick: dojo.hitch(this, function(){
     this.basemapGallery.select(basemap.id);
    })
   }));
  });

So at first things are fine, and then when I switch base maps, the new (which is on a different map service and has a different spatial projection (UTM)) basemap zooms to the full extent, actually somewhat further out than that. If I then switch back to the ESRI world street map, it zooms me to a place in the Mediterranean Sea. Could anyone explain this behavior? Will I need to convert the units everytime my basemap changes?

Thanks,

DR

KellyHutchins · ‎06-28-2011

Each basemap that you add to the basemap gallery needs to have the same spatial reference. So if you are using the default basemaps from ArcGIS.com then any additional basemaps that you add need to be in Web Mercator.

I have, but it results in some funny behavior, which I'm sure has to do with the spatial reference... I am just unsure how to manipulate the extent from web mercator to UTM.

 function init() {
    
    /* Set Extent and Create Map Constructor */
    var extent = new esri.geometry.Extent({
        "xmin": -75.35,
        "ymin": 41.6,
        "xmax": -74.06,
        "ymax": 42.75,
        "spatialReference": {
            "wkid": 4269
        }
    });
    
    map = new esri.Map("map", {
        extent: esri.geometry.geographicToWebMercator(extent)
    });
    
    /* Add Basemap */
    var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
    var basemapInitial = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
    map.addLayer(basemapInitial);
    
    /* AA - Create Basemap Gallery */
    createBasemapGallery();

...

/* AA */
function createBasemapGallery(){
  
     /* ESRI World Street Map */
     var layerStreet = new esri.dijit.BasemapLayer({
            url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
    });
    var basemapStreet = new esri.dijit.Basemap({
      layers: [layerStreet],
      title: "ESRI Street Map"
    });
    basemaps.push(basemapStreet);
    
    /* New Basemap */
    var newBaselayer = new esri.dijit.BasemapLayer({
      url:"http://host/ArcGIS/rest/services/myservice/MapServer",
   visibleLayers:[2]
    });
    var newBasemap = new esri.dijit.Basemap({
      layers: [newBaselayer],
      title: "Other Basemap"
    });
    basemaps.push(newBasemap);

    /* Create Gallery and Populate Drop Down Menu */
    basemapGallery = new esri.dijit.BasemapGallery({
      showArcGISBasemaps: false,
      basemaps: basemaps,
      map: map
    });
 
    dojo.forEach(basemapGallery.basemaps, function(basemap){
   dijit.byId("basemapMenu").addChild(new dijit.MenuItem({
    label: basemap.title,
    onClick: dojo.hitch(this, function(){
     this.basemapGallery.select(basemap.id);
    })
   }));
  });

So at first things are fine, and then when I switch base maps, the new (which is on a different map service and has a different spatial projection (UTM)) basemap zooms to the full extent, actually somewhat further out than that. If I then switch back to the ESRI world street map, it zooms me to a place in the Mediterranean Sea. Could anyone explain this behavior? Will I need to convert the units everytime my basemap changes?

Thanks,

DR

HemingZhu · ‎06-28-2011

I have, but it results in some funny behavior, which I'm sure has to do with the spatial reference... I am just unsure how to manipulate the extent from web mercator to UTM.

 function init() {
    
    /* Set Extent and Create Map Constructor */
    var extent = new esri.geometry.Extent({
        "xmin": -75.35,
        "ymin": 41.6,
        "xmax": -74.06,
        "ymax": 42.75,
        "spatialReference": {
            "wkid": 4269
        }
    });
    
    map = new esri.Map("map", {
        extent: esri.geometry.geographicToWebMercator(extent)
    });
    
    /* Add Basemap */
    var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
    var basemapInitial = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
    map.addLayer(basemapInitial);
    
    /* AA - Create Basemap Gallery */
    createBasemapGallery();

...

/* AA */
function createBasemapGallery(){
  
     /* ESRI World Street Map */
     var layerStreet = new esri.dijit.BasemapLayer({
            url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
    });
    var basemapStreet = new esri.dijit.Basemap({
      layers: [layerStreet],
      title: "ESRI Street Map"
    });
    basemaps.push(basemapStreet);
    
    /* New Basemap */
    var newBaselayer = new esri.dijit.BasemapLayer({
      url:"http://host/ArcGIS/rest/services/myservice/MapServer",
   visibleLayers:[2]
    });
    var newBasemap = new esri.dijit.Basemap({
      layers: [newBaselayer],
      title: "Other Basemap"
    });
    basemaps.push(newBasemap);

    /* Create Gallery and Populate Drop Down Menu */
    basemapGallery = new esri.dijit.BasemapGallery({
      showArcGISBasemaps: false,
      basemaps: basemaps,
      map: map
    });
 
    dojo.forEach(basemapGallery.basemaps, function(basemap){
   dijit.byId("basemapMenu").addChild(new dijit.MenuItem({
    label: basemap.title,
    onClick: dojo.hitch(this, function(){
     this.basemapGallery.select(basemap.id);
    })
   }));
  });

So at first things are fine, and then when I switch base maps, the new (which is on a different map service and has a different spatial projection (UTM)) basemap zooms to the full extent, actually somewhat further out than that. If I then switch back to the ESRI world street map, it zooms me to a place in the Mediterranean Sea. Could anyone explain this behavior? Will I need to convert the units everytime my basemap changes?

Thanks,

DR

To my understanding, geographicToWebMercator does not support wkid 4269. Try this:

/* Set Extent and Create Map Constructor */
    var extent = new esri.geometry.Extent({
        "xmin": -75.35,
        "ymin": 41.6,
        "xmax": -74.06,
        "ymax": 42.75,
        "spatialReference": {
            wkid:4326        }
    });
    
    map = new esri.Map("map", {
        extent: esri.geometry.geographicToWebMercator(extent)
    });