Skip to content

Instantly share code, notes, and snippets.

@leighghunt
Created July 6, 2012 02:23
Show Gist options
  • Save leighghunt/3057661 to your computer and use it in GitHub Desktop.
Save leighghunt/3057661 to your computer and use it in GitHub Desktop.
test
<!---PrintMapAction.do?img=no:-->
<!--
TODO:
=====
Side by side operation with checkbox or argument
Formatting/placement of images
Loose hardcoding of image sizes
Test with larger number of layers
Get JavaScript added to server side code so added on fly.
-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script language="javascript">
dojo.ready(function() {
console.log("In $(document).ready()");
var strMapLayers = '{&quot;tileLayers&quot;:[{&quot;url&quot;:&quot;http://ntier.net.ad.wcc.govt.nz/arcgis/rest/services/Aerial_Photos/Aerial_Photo_2010_GW/MapServer&quot;,&quot;transparency&quot;:1,&quot;extent&quot;:{&quot;xmin&quot;:1749979.8482420708,&quot;ymin&quot;:5423212.809786361,&quot;xmax&quot;:1750146.5360754465,&quot;ymax&quot;:5423419.185199112}}],&quot;dynamicLayers&quot;:[{&quot;url&quot;:&quot;http://ntier.net.ad.wcc.govt.nz/arcgis/rest/services/Dynamic/Property/MapServer/export?bbox=1749979.8482420708,5423212.809786361,1750146.5360754465,5423419.185199112&amp;size=630,780&amp;transparent=true&amp;format=png24&amp;f=json&amp;layers=show:1,5,6,7,10,11,12&quot;,&quot;width&quot;:630,&quot;height&quot;:780,&quot;transparency&quot;:1}]}';
//alert(strMapLayers);
console.log(strMapLayers);
// sort out URL encoding
strMapLayers = strMapLayers.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&amp;/g, '&');
// sort out image format
strMapLayers = strMapLayers.replace(/f=json/g, 'f=image');
console.log(strMapLayers);
var layers = dojo.fromJSON(strMapLayers);
console.log('tileLayers: ' + layers.tileLayers.length);
console.log('dynamicLayers: ' + layers.dynamicLayers.length);
var imageURLs = new Array();
// Make assumption that extent same across all map services
var urlPartExportURL;
var urlPartTransparent;
var urlPartFormat;
var urlPartf;
var urlPartLayers;
var urlBaseDynamicExportURL = layers.dynamicLayers[0].url;
// Break each URL up into its component parts - use old school string manipulation rather than regular expressions, as simpler.
// Replave server name, and layers argument with tiled server name, and layers=show:all.
var indexBaseDynamicStartServerURL = urlBaseDynamicExportURL.indexOf("://") + 3;
// 0123456789012 01234567890123
// http://abc..., https://abc...
// ...* ...*
var indexBaseDynamicEndServerURL = urlBaseDynamicExportURL.indexOf("/MapServer", indexBaseDynamicStartServerURL) + 10;
// http://gis.wcc.govt.nz/arcgis/rest/services/Operational/BoundariesProperty/MapServer/export?bbox=1749979.8482420708,5423212.809786361,1750146.5360754465,5423419.185199112&size=630,780&transparent=true&format=png24&f=image&layers=show:1,5,6,7,10,11,12
// > ..........*
var indexBaseDynamicStartLayers = urlBaseDynamicExportURL.indexOf("layers=show:", indexBaseDynamicEndServerURL);
var indexBaseDynamicEndLayers = urlBaseDynamicExportURL.indexOf("&", indexBaseDynamicStartLayers);
if(indexBaseDynamicEndLayers == -1){
indexBaseDynamicEndLayers = urlBaseDynamicExportURL.length + 1;
}
// export?bbox=......&size=630,780&transparent=true&format=png24&f=image&layers=show:1,5,6,7,10,11,12
// > *
// http://<map service path>/MapServer
// http://<map service path>/MapServer/export?bbox=<extent>&size=630,780&transparent=true&format=png24&f=image&layers=show:1,5,6,7,10,11,12
for(var tileLayersIndex=0;tileLayersIndex<layers.tileLayers.length;++tileLayersIndex)
{
var tileExportURL = layers.tileLayers[tileLayersIndex].url;
var indexTiledStartServerURL = tileExportURL.indexOf("://") + 3;
// 0123456789012 01234567890123
// http://abc..., https://abc...
// ...* ...*
var indexTiledEndServerURL = tileExportURL.indexOf("/MapServer", indexTiledStartServerURL) + 10;
// http://gis.wcc.govt.nz/arcgis/rest/services/Operational/BoundariesProperty/MapServer/export?bbox=1749979.8482420708,5423212.809786361,1750146.5360754465,5423419.185199112&size=630,780&transparent=true&format=png24&f=image&layers=show:1,5,6,7,10,11,12
// > ..........*
var indexTiledStartLayers = tileExportURL.indexOf("layers=show:", indexTiledEndServerURL);
var indexTiledEndLayers = tileExportURL.indexOf("&", indexTiledStartLayers);
if(indexTiledEndLayers == -1){
indexTiledEndLayers = tileExportURL.length + 1;
}
// export?bbox=......&size=630,780&transparent=true&format=png24&f=image&layers=show:1,5,6,7,10,11,12
// > *
// Merge the two strings - but we can ignore the layers argument
var newURL = tileExportURL.substring(0, indexTiledEndServerURL) +
urlBaseDynamicExportURL.substring(indexBaseDynamicEndServerURL, indexBaseDynamicStartLayers) +
urlBaseDynamicExportURL.substring(indexBaseDynamicEndLayers);
console.log("From:");
console.log(layers.tileLayers[tileLayersIndex].url);
console.log("To:");
console.log(newURL);
// Add to our list of URLs
imageURLs.push(newURL);
}
// Now add dynamic URLs
for(var dynamicLayersIndex=0;dynamicLayersIndex<layers.dynamicLayers.length;++dynamicLayersIndex)
{
imageURLs.push(layers.dynamicLayers[dynamicLayersIndex].url)
console.log(layers.dynamicLayers[dynamicLayersIndex].url);
}
console.log("imageURLs:");
for(var imageURLsIndex=0;imageURLsIndex<imageURLs.length;++imageURLsIndex)
{
console.log(imageURLs[imageURLsIndex]);
dojo.byId('#stackedImageContainer').append(dojo.create('<img hspace="0" vspace="0" border="0" src="' + imageURLs[imageURLsIndex] + '" class="stackedImage" width="630" height="780"/>'));
}
});
</script>
<link rel="stylesheet" href="/cityview/script/viewer.css" type="text/css"/>
<link rel="stylesheet" href="/cityview/script/hide.css" type="text/css" media="print"/>
<!-- some inline styles -->
<style>
input.button {
border: 1px black ridge;
vertical-align:top;
width: 100%;
padding: 0px;
margin: 0px;
}
td.toolbar {
width: 20%;
vertical-align:top;
padding: 0px;
margin: 0px;
}
table.toolbar {
width: 500px;
padding: 0px;
margin: 0px;
}
.email {
padding: 0px;
margin: 0px;
}
table.pdfMessage {
width: 160px;
border: 0px;
font-weight:bold;
font-family:Arial;
font-size: 10px;
text-align:justify;
}
div.showPDFMessage {
width: 160px;
height: 100px;
display: show;
visibility: visible;
position:absolute;
background-color: beige;
z-index: 20;
}
div.hidePDFMessage {
display: none;
visibility: hidden;
}
<!-- TODO Tidy up -->
.stackedImage{
position:absolute;
left:0px;
top:0px;
}
</style>
<title>WCC Intranet Viewer Map</title>
<script type="text/javascript" SRC="http://soailbpp1/arcgis_js_api/library/2.5/arcgis/?v=2.5"></script>
<script type="text/javascript" SRC="/cityview/script/functions.js"></script>
<script type="text/javascript" SRC="/cityview/script/popups.js"></script>
<script language="javascript">
function showMessage(event, id){
var mouseEvent = dojo.fixEvent(event);
var x = mouseEvent.clientX;
var y = mouseEvent.clientY;
//var x = event.x;//getXClick();
//var y = event.y;//getYClick();
if (x != null && y != null){
//var pdfmessage = getElement(document, "div", id);
var pdfmessage = dojo.byId(id);
if (pdfmessage != null && pdfmessage != 'undefined'){
if (pdfMessage.className != 'showPDFMessage'){
pdfmessage.className = 'showPDFMessage';
}
//set the x/y coords
pdfmessage.style.left = x + 15
pdfmessage.style.top = y + 5;
}
}
}
function hideMessage(element, id){
//var pdfmessage = getElement(document, "div", id);
var pdfmessage = dojo.byId(id);
if (pdfmessage != null){
pdfmessage.className = 'hidePDFMessage';
}
}
</script>
<!-- doing check of domain -->
<!-- finished doing check of domain-->
</head>
<body class="print_page">
<div class="hide" id="toolbar">
<table class="toolbar" cellspacing="0" cellpadding="0">
<tr>
<td>
<form name="EmailPrintForm" method="POST" action="/cityview/EmailPrintMap.do?target=input" class="email" target="emailForm">
<input class="button" type="button" value="Email Map" onClick="javascript:openForm(this, 'emailForm');"/>
<!-- print map properties -->
<input type="hidden" name="mapURL" value="" />
<input type="hidden" name="legendURL" value="" />
<input type="hidden" name="height" value="780" />
<input type="hidden" name="width" value="630" />
<input type="hidden" name="scale" value="1000" />
<input type="hidden" name="showLegend" value="false" />
<input type="hidden" name="size" value="1" />
<input type="hidden" name="title" value="WCC Intranet Viewer Map" />
<input type="hidden" name="image" value="" />
<input type="hidden" name="mapLayers" value="{&quot;tileLayers&quot;:[{&quot;url&quot;:&quot;http://ntier.net.ad.wcc.govt.nz/arcgis/rest/services/Aerial_Photos/Aerial_Photo_2010_GW/MapServer&quot;,&quot;transparency&quot;:1,&quot;extent&quot;:{&quot;xmin&quot;:1749979.8482420708,&quot;ymin&quot;:5423212.809786361,&quot;xmax&quot;:1750146.5360754465,&quot;ymax&quot;:5423419.185199112}}],&quot;dynamicLayers&quot;:[{&quot;url&quot;:&quot;http://ntier.net.ad.wcc.govt.nz/arcgis/rest/services/Dynamic/Property/MapServer/export?bbox=1749979.8482420708,5423212.809786361,1750146.5360754465,5423419.185199112&amp;size=630,780&amp;transparent=true&amp;format=png24&amp;f=json&amp;layers=show:1,5,6,7,10,11,12&quot;,&quot;width&quot;:630,&quot;height&quot;:780,&quot;transparency&quot;:1}]}" />
<input type="hidden" name="features" value="[]" />
<input type="hidden" name="legendLayers" value="" />
<input type="hidden" name="legendDetails" value="" id="legendDetailsEmail" />
</form>
</td>
<td>
<div id="pdfMessage" class="hidePDFMessage">
<table class="pdfMessage">
<tr>
<td>
To print a map from the PDF document at the correct scale make sure that the pdf print screen is set to shrink oversized pages
</td>
</tr>
</table>
</div>
<form name="PrintMapForm" method="POST" action="/cityview/PDFPrintMapAction.do?target=input" class="email" onsubmit="this.target+=Math.random();" target="pdfForm">
<input class="button" type="submit" value="View as PDF" onmouseover="javascript:showMessage(event, 'pdfMessage');" onmouseout="javascript:hideMessage(event, 'pdfMessage');" onmousemove="javascript:showMessage(event, 'pdfMessage');"/>
<!-- print map properties -->
<input type="hidden" name="mapURL" value="" />
<input type="hidden" name="legendURL" value="" />
<input type="hidden" name="height" value="780" />
<input type="hidden" name="width" value="630" />
<input type="hidden" name="scale" value="1000" />
<input type="hidden" name="showLegend" value="false" />
<input type="hidden" name="size" value="1" />
<input type="hidden" name="title" value="WCC Intranet Viewer Map" />
<input type="hidden" name="image" value="" />
<input type="hidden" name="mapLayers" value="{&quot;tileLayers&quot;:[{&quot;url&quot;:&quot;http://ntier.net.ad.wcc.govt.nz/arcgis/rest/services/Aerial_Photos/Aerial_Photo_2010_GW/MapServer&quot;,&quot;transparency&quot;:1,&quot;extent&quot;:{&quot;xmin&quot;:1749979.8482420708,&quot;ymin&quot;:5423212.809786361,&quot;xmax&quot;:1750146.5360754465,&quot;ymax&quot;:5423419.185199112}}],&quot;dynamicLayers&quot;:[{&quot;url&quot;:&quot;http://ntier.net.ad.wcc.govt.nz/arcgis/rest/services/Dynamic/Property/MapServer/export?bbox=1749979.8482420708,5423212.809786361,1750146.5360754465,5423419.185199112&amp;size=630,780&amp;transparent=true&amp;format=png24&amp;f=json&amp;layers=show:1,5,6,7,10,11,12&quot;,&quot;width&quot;:630,&quot;height&quot;:780,&quot;transparency&quot;:1}]}" />
<input type="hidden" name="features" value="[]" />
<input type="hidden" name="legendDetails" value="" id="legendDetails" />
</form>
</td>
<td>
<input class="button" type="button" value="Print" onClick="javascript:window.print();"/>
</td>
<td>
<input class="button" type="button" value="Close" onClick="javascript:window.close();"/>
</td>
</tr>
</table>
</div>
<!-- outer border -->
<table border="2" cellpadding="0" cellspacing="0" nowrap="nowrap" width="630">
<col/><col/>
<tr>
<td colspan="2">
<!--inner map table -->
<table cellpadding="0" cellspacing="0" nowrap="nowrap" border="1">
<tr>
<th colspan="2" align="center">
<div align="center">
WCC Intranet Viewer Map
</div>
</th>
</tr>
<tr>
<!--630,780-->
<td rowspan="2" align="top" width="630" height="780">
<div id="stackedImageContainer">
<!--
<img name="printMap" hspace="0" vspace="0" border="0" src="./PrintMapAction.do" width="630" height="780"/>
-->
</td>
</tr>
<tr>
<td align="top">
<div id="legendDiv" style="border:1px black ridge;overflow:hidden;height:780">
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment