<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: linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: 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;
animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
transform: translateZ(0);
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% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |