addding a bing map as base layer

akpagaakpaga · ‎05-29-2012

Hi friends...

I am using he following code to use local storage for saving data in offline mode.....
How can I add a bing map to the mapserver i am suing ..Please guide me ..Thank you in advance

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HTML5demo.aspx.cs" Inherits="WebApplication1.HTML5demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>
      Local Storage Demo
    </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; overflow:hidden; }
      #leftPane{
        overflow:hidden;
        border:none;
        color:#5C832F;
      }
      #map{
        border: solid medium #382513;
        padding:0;
      }

      .esriAttributeInspector{
          atiLayerName:'Building Details'
      }
      .templatePicker{
        border:none !important;
        height:85px;
      }
      .templatePicker .grid .groupLabel{
        display:none;
      }
    </style>
    <script type="text/javascript">
     var dojoConfig = {
      parseOnLoad: true
     };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">
    </script>
    <script type="text/javascript" lang="Javascript">
     dojo.require("esri.map");
     dojo.require("esri.dijit.editing.Editor-all");
     dojo.require("dijit.layout.ContentPane");
     dojo.require("dijit.layout.BorderContainer");
     dojo.require("dojo.DeferredList");
     dojo.require("dijit.form.Button");

     var map;
     var featureLayer;

     function init() {

     esri.config.defaults.io.proxyUrl = "proxy.ashx";
     esri.config.defaults.io.alwaysUseProxy = true;

      var startExtent = new esri.geometry.Extent({
       "xmin": 1973912.6463,
       "ymin": 7228744.9481,
       "xmax": 2011794.0102,
       "ymax": 7260070.2068,
       "spatialReference": {
        "wkid": 3083

       }
      });

      map = new esri.Map("map", {
       extent: startExtent
      });

      dojo.connect(map, 'onLoad', function () {
       //resize map when browser resizes
       dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
      });

      dojo.connect(map, "onLayersAddResult", initEditor);

      var tiledLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://test.com/ArcGIS/rest/services/test/Parcels/MapServer");
      map.addLayer(tiledLayer);

      if (window.localStorage.getItem("storedCollection")) {
       console.log('Feature Collection read from storage');
       addLayer(dojo.fromJson(window.localStorage.getItem("storedCollection")));
      } else {

       var mapserverUrl = "http://test.com/ArcGIS/rest/services/Houston/Test/FeatureServer/0";

       var deferred = getLayerResource(mapserverUrl);

       deferred.addCallback(function (response) {
        var featureCollection = {};

        featureCollection.layerDefinition = response;

        var fields = dojo.map(featureCollection.layerDefinition.fields, function (field) {

         return dojo.mixin({
          editable: true,
          domain: null
         }, field);

        });

        featureCollection.layerDefinition.fields = fields;

        window.localStorage.setItem("storedCollection", dojo.toJson(featureCollection));
        console.log("Feature Collection added to storage");
        console.log(featureCollection);
        addLayer(featureCollection);
       });

      }

     }

   //check the code here
     function addLayer(featureCollection) {
      var fields = dojo.map(featureCollection.layerDefinition.fields, function (field) {
       return field.name;
      });

    var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
       outFields: fields
      });

      var selectionSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 0, 0.5]), 10), new dojo.Color([255, 255, 0, 0.9]));

      featureLayer.setSelectionSymbol(selectionSymbol);
      map.addLayers([featureLayer]);
     }

     function getLayerResource(url) {

      var deferred = esri.request({
       url: url,
       content: {
        f: 'json'
       },
       callbackParamName: "callback"
      });

      return deferred;

     }

     function initEditor(results) {

      var featureLayerInfos = dojo.map(results, function (result) {
       return {
        'featureLayer': result.layer
       };
      });
      featureLayer = results[0].layer;
      var settings = {
       map: map,
       layerInfos: featureLayerInfos
      };

      var params = {
       settings: settings
      };
      var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');
      editorWidget.startup();
      map.infoWindow.resize(290, 220);

     }

     function saveCollection() {
      //save the edited features to local storage
      console.log('Edits saved to storage');
      console.log(featureLayer.toJson());
      window.localStorage.setItem("storedCollection", dojo.toJson(featureLayer.toJson()));
     }

     dojo.addOnLoad(init);
    </script>
</head>

<body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
      </div>
      <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;" data-dojo-props="region:'left'">
        <div>
          Click the Notes icon - then click location on map to add new map note. Click save
          to save feature layer into local storage.
          <div data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){saveCollection();}, iconClass:'dijitEditorIcon dijitEditorIconSave'">Save</div>
        </div>
        <div id="editorDiv">
        </div>
        <div>
        </div>
      </div>
    </div>
</body>

</html>

JamesS1 · ‎05-30-2012

basemap = new esri.virtualearth.VETiledLayer({
            bingMapsKey: '<key from microsoft to use bing maps>',
            mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD
        });

map.addLayer(basemap);

akpagaakpaga · ‎05-30-2012

Thank you JSamek ..but It does not seem to work for me....Can you please show me where it shud go in the code...Thank you

SrikanthNarra · ‎05-30-2012

Hi akpaga,

basemap = new esri.virtualearth.VETiledLayer({
bingMapsKey: '<key of bing map from MS>',
mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD
});

map.addLayer(basemap);

try to add above code before dynamic layer.

akpagaakpaga · ‎05-31-2012

Thank You srikanth....But when I add the base map before the Dynamic service (feature layer), nothing shows up .....But when i do the other way my feature layer shows up...Can You give me some suggestions...thank you

JamesS1 · ‎05-31-2012

Did you enter a valid Bing Maps key for bingMapskey?

Make sure you are doing this during the initialization (typically the function called here: dojo.addOnLoad(initialize);)

Also, make sure you are requiring the following:
dojo.require("esri.virtualearth.VETiledLayer");

And if your 'map' is called something other than 'map' - change 'map' to whatever you named it.

akpagaakpaga · ‎05-31-2012

Thank You Jsamek..

These were two reasons as to why i was having problems with the bing map:
1)MY service layers were not in the projections same as the Bing maps:WGS_1984_Web_Mercator_Auxiliary_Sphere
So i created new services with WGS_1984_Web_Mercator_Auxiliary_Sphere

2)I was using a proxy for my service layers

esri.config.defaults.io.proxyUrl = "proxy.ashx";
esri.config.defaults.io.alwaysUseProxy = true;

hence it was not getting the bing map. So i changed t
esri.config.defaults.io.proxyUrl = "proxy.ashx";
esri.config.defaults.io.alwaysUseProxy = false;

Now it works but asks for a password.

Can some one help me to use the proxy as well as the bing map.

Thanks

RogerLi · ‎12-02-2013

I am having the same issue with using bing map and having always use proxy condition true
esri.config.defaults.io.alwaysUseProxy = true;

Does anybody have a solution to this issue? I am kinda stuck here. I am using ArcGIS server 10.1 services with JS API Version 3.6.

RogerLi · ‎12-03-2013

I am having the same issue with using bing map and having always use proxy condition true
esri.config.defaults.io.alwaysUseProxy = true;

Does anybody have a solution to this issue? I am kinda stuck here. I am using ArcGIS server 10.1 services with JS API Version 3.6.

I have found a solution to this issue. I am posting it here for anybody having the issue.

rule={proxyUrl:"/proxy/proxy.ashx",
urlPrefix: <your map service url>
}
urlUtils.addProxyRule(rule);

Visit this link for reference: https://developers.arcgis.com/en/javascript/jsapi/namespace_esri-amd.html#addProxyRule.