export map with bing maps

MarcoRosa · ‎10-10-2013

Hi to all,

i'm trying to export web map, with BING MAPS on that, with print ags task, but i have a security error.
Anybody has solution for that ? it's a bug ? it's a know issue to fix in the future ?

Thanks

gp

nicogis · ‎10-10-2013

Hi Giorgio, I have tried with code scratch javascript and it prints. Insert in prompt your BingKey. see in fiddler if your called to print in sl is equal at this page js. If it is equal you need check in silverlight/api arcgis sl ...

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color: #fff; overflow:hidden; 
        font-family: sans-serif;
      } 
      label {
        display: inline-block;
        padding: 5px 5px 0 5px;
        font-weight: 400;
        font-size: 12pt;
      }
      .button {
        width: 100%;
        margin: 3px auto;
        text-align: center;
      }
      #header {
        padding-top: 4px;
        padding-right: 15px;
        color: #444; 
        font-size:16pt; text-align:right;font-weight:bold;
        height:55px;
        background: #fff;
        border-bottom: 1px solid #444;
      }
      #subheader {
        font-size:small;
        color: #444;
        text-align:right;
        padding-right:20px;
      }
      #header, #subheader {
        text-shadow: 1px 1px 1px #cee1f0;
        filter: dropshadow(color=#cee1f0, offx=1, offy=1);
      }
      #rightPane{
        margin: 0;
        padding: 10px;
        background-color: #fff;
        color: #421b14;
        width: 180px;
      }

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
      #ds-h div { width: 100%; }
      #ds-l div, #ds-r div { height: 100%; }
      #ds-r div { right: 0; }
      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
      #ds .h1 { height: 1px; }
      #ds .h2 { height: 2px; }
      #ds .h3 { height: 3px; }
      #ds .h4 { height: 4px; }
      #ds .h5 { height: 5px; }
      #ds .v1 { width: 1px; }
      #ds .v2 { width: 2px; }
      #ds .v3 { width: 3px; }
      #ds .v4 { width: 4px; }
      #ds .v5 { width: 5px; }

      /* make all dijit buttons the same width */
      .dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
        width: 160px;
      }
    </style>

    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var app = {};
      app.map = null, app.toolbar = null, app.tool = null; app.symbols = null, app.printer = null;
      require([
        "esri/map", "esri/toolbars/draw", "esri/dijit/Print",
        "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", 
        "esri/symbols/SimpleFillSymbol", "esri/graphic",
        "esri/config",
        "dojo/_base/array", "dojo/_base/Color", "dojo/parser", 
        "dojo/query", "dojo/dom", "dojo/dom-construct", 
        "dijit/form/CheckBox", "dijit/form/Button", "esri/virtualearth/VETiledLayer",


        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Draw, Print,
        ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
        SimpleMarkerSymbol, SimpleLineSymbol,
        SimpleFillSymbol, Graphic,
        esriConfig,
        arrayUtils, Color, parser, 
        query, dom, domConstruct, 
        CheckBox, Button,VETiledLayer
      ) {
        parser.parse();

        esriConfig.defaults.io.proxyUrl = "/proxy";
        
        app.map = new Map("map", {
          center: [-90.733, 30.541],
          zoom: 8
        });
        app.map.on("load", function() {
          app.toolbar = new Draw(app.map);
          app.toolbar.on("draw-end", addToMap);
        });

        // print dijit
        app.printer = new Print({
          map: app.map,
          url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
        }, dom.byId("printButton"));
        app.printer.startup();

        

        veTileLayer = new VETiledLayer({
          bingMapsKey:  prompt("Please enter your bing maps key"),
          mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL
        });
        app.map.addLayer(veTileLayer);



        // add census boundary dyn map svc
        var dynUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";
        var dynLayer = new ArcGISDynamicMapServiceLayer(dynUrl, { "id": "Boundaries" });
        app.map.addLayer(dynLayer);

        // create a check box for each map layer
        arrayUtils.forEach(["Boundaries", "Ocean"], function(id) {
          new CheckBox({
            id: "cb_" + id,
            name: "cb_" + id,
            checked: true,
            onChange: function(bool) {
              bool ? 
                app.map.getLayer(this.id.split("_")[1]).show() :
                app.map.getLayer(this.id.split("_")[1]).hide();
            }
          }, domConstruct.create("input", { 
            id: "lyr_" + id 
          })).placeAt(dom.byId("layerToggle"));

          // create a label for the check box
          var label = domConstruct.create('label', { 
            "for": "cb_" + id,
            "innerHTML": id
          });
          domConstruct.place(label, dom.byId("layerToggle"));
          domConstruct.place(domConstruct.create("br"), dom.byId("layerToggle"));
        });

        // set up symbols for the various geometry types
        app.symbols = {};
        app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
        app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
        app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255,255,0,0.25]));
        app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]))

        // find the divs for buttons
        query(".drawing").forEach(function(btn) {
          var button = new Button({
            label: btn.innerHTML,
            onClick: function() {
              activateTool(this.id);
            }
          }, btn);
        });

        function activateTool(type) {
          app.tool = type.replace("freehand", "");
          app.toolbar.activate(type);
          app.map.hideZoomSlider();
        }

        function addToMap(evt) {
          app.toolbar.deactivate();
          app.map.showZoomSlider();
          
          var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
          app.map.graphics.add(graphic);
        }
      });
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow" 
         data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="header" 
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        Print Dijit:  Out of the Box Printing for the ArcGIS API for JavaScript
        <div id="subheader">Requires ArcGIS Server 10.1</div>
      </div>
      <div id="map" class="shadow" 
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">

        <!-- drop shadow divs -->
        <div id="ds">
          <div id="ds-h">
            <div class="ds h1 o1"></div>
            <div class="ds h2 o2"></div>
            <div class="ds h3 o3"></div>
            <div class="ds h4 o4"></div>
            <div class="ds h5 o5"></div>
          </div>
          <div id="ds-r">
            <div class="ds v1 o1"></div>
            <div class="ds v2 o2"></div>
            <div class="ds v3 o3"></div>
            <div class="ds v4 o4"></div>
            <div class="ds v5 o5"></div>
          </div>
        </div> <!-- end drop shadow divs -->
            
      </div>
      <div id="rightPane"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'right'">

        <div id="printButton"></div>
        <hr />
        
        <div id="drawingWrapper">
          Add some graphics:
          <div id="point" class="drawing">Point</div>
          <div id="freehandpolyline" class="drawing">Freehand Polyline</div>
          <div id="freehandpolygon" class="drawing">Freehand Polygon</div>
          <div id="circle" class="drawing">Circle</div>
        </div>
        <hr />
        <div id="layerToggle">
          Toggle Layers: <br />
          <!-- checkbox and labels inserted programmatically -->
        </div>
      </div>
    </div>
  </body>
</html>