Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  <script src="https://js.arcgis.com/4.4/"></script>
  
</head>
<body>
  <div>
    <span id="printButton" class="esri-widget-button esri-widget esri-interactive">
      <span class="esri-icon-printer"></span>
    </span>
  </div>
  <span id="pageMask"></span>
  <div class="row center-align">
    <div id="secondaryMap" class="col s10 center-align push-s1"></div>
    <div id="printWidget" class="col s8 push-s2">
      <div class="card grey lighten-5">
        <div class="card-content">
          <span id="printClose" class="esri-widget-button esri-widget esri-interactive close-button">
            <span class="esri-icon-close"></span>
          </span>
          <span class="card-title">Export to PDF</span>
          <div class="divider"></div>
          <div class="input-field">
            <input id="titleInput" type="text" class="file-name" maxlength="75">
            <label for="titleInput">Title</label>
          </div>
          <div class="input-field">
            <input id="authorInput" type="text" class="author-name" maxlength="50">
            <label for="authorInput">Author</label>
          </div>
          <div class="input-field">
            <input id="notesInput" type="text" class="notes" maxlength="200">
            <label for="notesInput">Notes</label>
          </div>
          <form action="#" class="col s5">
            <p>
              <input class="with-gap" name="group1" type="radio" id="extentRadio" checked/>
              <label for="extentRadio">Preserve Extent</label>
            </p>
            <p>
              <input class="with-gap" name="group1" type="radio" id="scaleRadio" />
              <label for="scaleRadio">Set Scale</label>
            </p>
          </form>
          <div id="ssScaleInputLabel">Scale</div>
          <div id="scaleInputContainer" class="input-field col s7">
            <input id="scaleInput" type="number" autofocus="true" disabled="disabled">
          </div>
          <br>
          <div id="ssSelectionMenu" class="input-field col s12">
            <select id="ssRootPrintSelect">
              <option value="1" selected>Letter ansi a landscape (11 x 8.5)</option>
              <option value="2">Letter ansi a portrait (8.5 x 11)</option>
              <option value="3">Tabloid ansi b landscape (17 x 11)</option>
              <option value="4">Tabloid ansi b portrait (11 x 17)</option>
              <option value="5">Map Only</option>
            </select>
            <label>Layout Format</label>
          </div>
          <br>
          <div id="enablePopupNote">popups must be enabled</div>
          <button id="exportButton" class="btn-flat waves-effect waves-orange" type="submit" name="action">Export
            <i class="material-icons right">send</i>
          </button>
          <br>
          <br>
          <center>
            <div class="loader"></div>
          </center>
          <div id="printError">Failed to export pdf</div>
        </div>
      </div>
    </div>
  </div>
  
  <div id="map"></div>
  
</body>
</html>
 
html,
body,
#map {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute
}
#printButton {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 999;
}
#printWidget {
  display: none;
  position: absolute;
  z-index: 999;
  top: 30px
}
#printError {
    display: none;
    color: crimson;
}
#secondaryMap {
    position: absolute;
    display: none;
    padding: 0;
    height: 90%;
    z-index: 0;
    top: 40px;
    opacity: 0;
}
#enablePopupNote {
    font-size: 12px;
    font-variant: small-caps;
    color: darkgray;
    cursor: default;
    margin-left: -3px;
}
#ssScaleInputLabel {
    position: absolute;
    font-size: 12px;
    top: 300px;
    left: 44%;
    color: darkgrey;
    cursor: default;
}
#pageMask {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}
.close-button {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    padding-top: 8px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 10px;
}
.loader {
  display: none;
  font-size: 10px;
  text-indent: -9999em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ffab91;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #fafafa;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
 
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/views/SceneView",
  "esri/Camera",
  "esri/tasks/PrintTask",
  "esri/tasks/support/PrintParameters",
  "esri/tasks/support/PrintTemplate",
], function(Map, MapView, SceneView, Camera, PrintTask,
            PrintParameters, PrintTemplate) {
  
  var map = new Map({
    basemap: "hybrid",
    ground: "world-elevation"
  });
  
  var view = new SceneView({
    map: map,
    container: "map",
    camera: new Camera({
      heading: 0,
      tilt: 65,
      position: {
        latitude: 48.6724,
        longitude: -123.0281,
        z: 500,
      }
    })
  });
  
  var printTemplate = new PrintTemplate({
    format: "pdf",
    layout: "letter-ansi-a-landscape",
    layoutOptions: {
      titleText: "",
      authorText: "",
      copyrightText: "",
      legendLayers: []
    },
    preserveScale: false
  });
  var mapView;
  var printParams;
  function setupPrint() {
    mapView = new MapView({
      container: "secondaryMap",
      map: map,
      spatialReference: {
        wkid: 3857
      }
    });
    
    mapView.viewpoint = view.viewpoint;
    printParams = new PrintParameters({
      view: mapView,
      template: printTemplate
    });
    var currentScale = mapView.viewpoint.scale;
    $("#scaleInput").focus();
    $("#scaleInput").val(Math.round(currentScale));
  }
  var showPrintFunction = function () {
    $("#pageMask").show();
    $("#printWidget").show();
    $("#secondaryMap").show();
    setupPrint();
  };
  $("#printButton").click(showPrintFunction);
  $("#printLabel").click(showPrintFunction);
  $("#printClose").click(function () {
    $('.file-name').val("").blur();
    $('.author-name').val("").blur();
    $('.notes').val("").blur();
    $('#scaleInput').val("");
    $("#secondaryMap").empty().hide();
    $("#pageMask").hide();
    $("#printWidget").hide();
  });
  $("#exportButton").click(function () {
    $(".loader").show();
    var printTask = new PrintTask({
      url: "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
    });
    printTemplate.layoutOptions.titleText = $('.file-name').val();
    printTemplate.layoutOptions.authorText = $('.author-name').val();
    printTemplate.layoutOptions.copyrightText = $('.notes').val();
    printTemplate.outScale = $('#scaleInput').val();
    var print = printTask.execute(printParams).then(printResult, printError);
    print.then(function() {
   
      mapView = {};
      $("#secondaryMap").empty().hide();
    });
  });
  $("#extentRadio").click(function (){
    printTemplate.preserveScale = false
    $("#scaleInput").focus();
    $("#scaleInput").prop("disabled", true);
    $("#ssScaleInputLabel").css("color", "darkgrey");
  });
  $("#scaleRadio").click(function (){
    printTemplate.preserveScale = true;
    $("#scaleInput").prop("disabled", false);
    $("#ssScaleInputLabel").css("color", "#16234D");
  });
  $('#ssRootPrintSelect').on('change', function() {
    if ($("#ssRootPrintSelect").val() === "1") {
      printTemplate.layout = "letter-ansi-a-landscape";
    } else if ($("#ssRootPrintSelect").val() === "2") {
      printTemplate.layout = "letter-ansi-a-portrait";
    } else if ($("#ssRootPrintSelect").val() === "3") {
      printTemplate.layout = "tabloid-ansi-b-landscape";
    } else if ($("#ssRootPrintSelect").val() === "4") {
      printTemplate.layout = "tabloid-ansi-b-portrait";
    } else if ($("#ssRootPrintSelect").val() === "5") {
      printTemplate.layout = "map-only";
    }
  });
  function printResult(response) {
    var url = response.url;
    $(".loader").hide();
    var newWindow = window.open(url);
    $('.file-name').val("").blur();
    $('.author-name').val("").blur();
    $('.notes').val("").blur();
    $('#scaleInput').val("");
    $("#printWidget").hide();
    $("#pageMask").hide();
  }
  function printError(response) {
    var err = response;
    $(".loader").hide();
    $("#printError").show().delay(10000).fadeOut();
  }
  
  $("#pageMask").on('click', function() {
            $('.file-name').val("").blur();
            $('.author-name').val("").blur();
            $('.notes').val("").blur();
            $('#scaleInput').val("");
            $("#pageMask").hide();
            $("#printWidget").hide();
            $("#secondaryMap").hide();
        });
  $('select').material_select();
  
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dlindley4pro
0viewers