willpower77

Map with street view and world imagery with toggle ability

Discussion created by willpower77 on May 25, 2012
Latest reply on May 30, 2012 by willpower77
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]

Outcomes