Map with street view and world imagery with toggle ability

[WillLopez]

Hi Everybody,

I want to accomplish something seemingly simple, however I have failed on all my attempt. Some help please

I want a map with two layers: Street map and World imagery (satellite view) with the ability to toggle between views. Further, I want to be able to add markers that will remain in place on toggle.

[HTML]

<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript">
function draw_map(lon, lat,title, date, address, description) {
      dojo.require("dijit.dijit");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.Tooltip");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");

      var map, basemapGallery;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-117.18,"ymin":34.03,"xmax":-117.16,"ymax":34.04,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{
          extent:esri.geometry.geographicToWebMercator(initExtent)
        });

        createBasemapGallery();


        dojo.connect(map,'onLoad', function(map) {
          // map.centerAt(geometry);
          // map.centerAndZoom(geometry,12);
        });


      }

       function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemaps = [];
        var streetMap = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
          })],
          id: "StreetMap",
          title: "Street Map View"
        });

        basemaps.push(streetMap);
        var satelliteMap = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          })],
          id: "Satellite",
          title: "Satellite View"
        });

        basemaps.push(satelliteMap);

        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          map: map
        });

        //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
        //we are going to create a custom user interface to display the basemaps, in this case a menu.
        dojo.forEach(basemapGallery.basemaps, function(basemap) {
          //Add a menu item for each basemap, when the menu items are selected
          dijit.byId("bingMenu").addChild(new dijit.MenuItem({
            label: basemap.title,
            onClick: dojo.hitch(this, function() {
              this.basemapGallery.select(basemap.id);
             
              var map = this.basemapGallery.get(basemap.id);
             
              var markerLayer = new esri.layers.GraphicsLayer({ id:'cc-maps-gl' });
              map.addLayer(markerLayer);
              var markerSymbol = new esri.symbol.PictureMarkerSymbol("/sites/all/themes/charmander/images/pin.png", 24, 38);
         
              var font = new esri.symbol.Font({
                family:'"Lucida Grande","Lucida Sans","Lucida Sans Unicode",helvetica,arial,sans-serif',
                size:'13px',
                weight:esri.symbol.Font.WEIGHT_BOLD,
              });
         
              var marker = {};
              marker.longitude = '-118.134618';
              marker.latitude =  '33.832876';
              marker.letter = 'A';
         
              var geometry = esri.geometry.geographicToWebMercator(new esri.geometry.Point(marker.longitude, marker.latitude));
              markerLayer.add(new esri.Graphic(geometry, markerSymbol));
         
              var textSymbol = new esri.symbol.TextSymbol(marker.letter);
              textSymbol.setFont(font);
              markerLayer.add(new esri.Graphic(geometry, textSymbol));
   
            })
          }));

        });
      }

      dojo.addOnLoad(init);
}

</script>

<style>
     table.dijit tr {
       background: transparent !important;
     }
</style>


    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Display Multiple ArcGIS Online Services</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{padding:0;}
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
   <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script type="text/javascript">
  draw_map("-149.882219", "61.187024", "Help Animals Recurring (Singel Occurance Opportunity)", "Mon, May 28, 2012", "8800 Venice Blvd.,  Anchorage, AK 99599", "Causecast");
</script>



    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 300px; height: 300px;">

      <div id="map" class="claro" dojotype="dijit.layout.ContentPane" region="center">
        <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton" iconClass="bingIcon" label="Views"  dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="bingMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>
      </div>
    </div>
[/HTML]

[KellyHutchins]

Here's a sample that shows how to toggle the basemaps. Any graphics you have added to the map will be maintained when the base maps are switched.

http://jsfiddle.net/Zp5qc/

[WillLopez]

thanks Kelly that is exactly what I wanted.

[WillLopez]

Hi Guys again,

for this fiddle http://jsfiddle.net/Zp5qc/

I want to info window to span on click so that it shows all of it on click. I have the code below with used to work but, now I don't have access to the event object. Well, regardless; the general case is how to span an infoWindow after a marker it clicked so that is shows all the infoWindow.

Thank

For the map above
[HTML]
         dojo.connect(markerLayer, "onClick", addPoint);

         function addPoint(evt) {
           map.infoWindow.setTitle(title);
           map.infoWindow.resize(230,130);
           map.infoWindow.setContent(popup_content);
           map.graphics.clear();

          //Set the infoWindow to open at the top right of the point at all times

           map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);

          //Determine the upper right, and center, coordinates of the map
           var maxPoint = new esri.geometry.Point(map.extent.xmax, map.extent.ymax)
           var centerPoint = new esri.geometry.Point(map.extent.getCenter());

          //Convert these to screen coordinates
           var maxPointScreen = map.toScreen(maxPoint);
           var centerPointScreen = map.toScreen(centerPoint);

          //Subtract the size of the infoWindow, including a buffer.
          //This will show whether the infoWindow would spill out of the current view.
           var xDiff = Math.abs(maxPointScreen.x - evt.screenPoint.x) - 270;
           var yDiff = Math.abs(maxPointScreen.y - evt.screenPoint.y) - 185;

          //If required, recalculate a new centerpoint which accounts for the infoWindow
           if (xDiff < 0) {centerPointScreen.x -= xDiff;}
           if (yDiff < 0) {centerPointScreen.y += yDiff;}

          //Pan the map to the new centerpoint (in Map coordinates)
           centerPoint = map.toMap(centerPointScreen);
           map.centerAt(centerPoint);

          //Display the infoWindow at the original point clicked
           map.infoWindow.show(evt.screenPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
        }

[/HTML]