akpaga

addding a bing map as base layer

Discussion created by akpaga on May 29, 2012
Latest reply on Dec 3, 2013 by remi.schmaltz
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" />
    <!--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>
      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>

Outcomes