Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Chin_TeckNg — Fri, 26 Oct 2012 02:08:22 GMT

Hi there,
can you check if I did the implementation for basemapgallery in my example?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>
      Basemap Gallery - Bing Maps
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/css/esri.css" />
    <style type="text/css">
      html,body {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#feffff;
        overflow:hidden;
        font-family:"Trebuchet MS";
        margin:2%;
      }
      #map {
        -moz-border-radius:4px;
        overflow:hidden;
        border:solid 2px #03c;
      }

      .claro .dijitButtonText {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:bold;
      }
      .claro td.dijitMenuItemLabel {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:500;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
 <script type='text/javascript' src='http://www.onemap.sg/API/JS/?accessKEY=onemapkey&v=2.8&type=full'></script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      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 basemaps = [];
   var OneMap = new GetOneMap('map','SM');
      var map, basemapGallery;
      var bingKey = 'bingmapkey';
      function init() {
        //map = new esri.Map("map", {});
  map = OneMap.map
        createBasemapGallery();
 
        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });

      }
      function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemapRoad = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsRoad"
          })],
          id: "bmRoad",
          title: "Road"
        });
        basemaps.push(basemapRoad);
  alert("lala2");
        var basemapAerial = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsAerial"
          })],
          id: "bmAerial",
          title: "Aerial"
        });
        basemaps.push(basemapAerial);
  alert("lala3");
        var basemapHybrid = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsHybrid"
          })],
          id: "bmHybrid",
          title: "Aerial with labels"
        });
        basemaps.push(basemapHybrid);
  alert("lala4");

        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          bingMapsKey: bingKey,
          map: map
        });
        alert("lala5");
        //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);
            })
          }));
          
        });
      }

      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 95%; height: 94%;">

      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton"  label="Basemaps"  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>
  </body>

</html>

Ok the problem I'm facing now is when I choose one of the bingmaps from the dropdown list, the bingmap logo did appear but the map didn't so is it valid to use basemapgallery for two basemap with different spatial reference?

sorry if I don't make sense,newbie here

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

JohnGravois — Fri, 26 Oct 2012 15:13:44 GMT

all the basemaps you reference in your code use the same web mercator coordinate system, so what two tiled services are you referring to that have different coordinate systems?

if the code you posted is from your actual application, you will have to replace the following line with your actual bing key

var bingKey = 'bingmapkey';

see the following article for more information.

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Ranga_Tolapi — Sun, 04 Nov 2012 11:54:46 GMT

All basemaps must share the same spatial reference for basemapgallery.

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

summerbay — Tue, 06 Nov 2012 06:56:56 GMT

Hi there,

I understand that the basemap gallery will need to refer to same spatial reference which is web mercator.

Would you be able to advise if:

1. I have my own country-base map which is not in web mercator projection (for instance, in Singapore local projection). Is it still possible for me to overlay my set of data with the base map (such as Bing Map, Open Street Map etc)? Any javascript code available to perform the on the fly projection?

Basically I would like to show a hybrid map which users can see Singapore Map overlaying with other referenced base maps (web mercator projection)?

Appreciate your comments/advice!

Many thanks!
summer

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

JohnGravois — Tue, 06 Nov 2012 14:25:37 GMT

our resource center definitely includes sample applications which overlay reprojected operational layers on top of a tiled basemap in a different projection.

ArcGISDynamicMapServiceLayers and FeatureLayers can reproject on the fly. ArcGISTiledMapServiceLayers cannot.

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

summerbay — Fri, 09 Nov 2012 04:08:06 GMT

Hi thanks for the reply and confirmation.

BTW, is there any tweak / alternative which we can find a way to georeference one tile maps from projection1 to another basemap with projection 2?

Thanks.

summer

topic Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery in ArcGIS JavaScript Maps SDK Questions

Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery

Re: Using Singapore SLA OneMap and Bing map aerial map layer with basemapgallery