<!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 Web Map Task" }, 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>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
