Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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);
  }
}
​
Output

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

Dismiss x
public
Bin info
dlindley4pro
0viewers