nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

addding a bing map as base layer

akpagaakpaga

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>

Find more posts tagged with

Accepted answers

All comments

RogerLi

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.

RogerLi

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.

akpagaakpaga

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

JamesS1

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

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

SrikanthNarra

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

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

JamesS1

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

map.addLayer(basemap);

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.