continued work on printing support
This commit is contained in:
DennisSchiefer
parent
253b591a87
commit
47369a0036
@ -27,7 +27,7 @@ OSRM.init = function() {
|
||||
OSRM.Localization.init();
|
||||
OSRM.GUI.init();
|
||||
OSRM.Map.init();
|
||||
//OSRM.Printing.init();
|
||||
OSRM.Printing.init();
|
||||
OSRM.Routing.init();
|
||||
|
||||
// check if the URL contains some GET parameter, e.g. for showing a route
|
||||
|
||||
@ -36,15 +36,29 @@ init: function() {
|
||||
},
|
||||
|
||||
windowLoaded: function(){
|
||||
OSRM.printwindow.initialize();
|
||||
OSRM.Printing.show( OSRM.G.response );
|
||||
OSRM.printwindow.focus();
|
||||
},
|
||||
|
||||
show: function(response) {
|
||||
// create header
|
||||
header =
|
||||
'<div class="full">' +
|
||||
'<div class="left">' +
|
||||
'<div class="header-title base-font">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
|
||||
'<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
|
||||
'<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="right">' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
// create route description
|
||||
var route_desc = "";
|
||||
route_desc += '<table class="results-table">';
|
||||
var route_desc = '';
|
||||
route_desc += '<table id="thetable" class="results-table medium-font">';
|
||||
route_desc += '<thead style="display:table-header-group;"><tr><td colspan="3">'+header+'</td></tr></thead>';
|
||||
route_desc += '</thead>';
|
||||
route_desc += '<tbody stlye="display:table-row-group">';
|
||||
|
||||
for(var i=0; i < response.route_instructions.length; i++){
|
||||
//odd or even ?
|
||||
@ -54,20 +68,21 @@ show: function(response) {
|
||||
route_desc += '<tr class="'+rowstyle+'">';
|
||||
|
||||
route_desc += '<td class="result-directions">';
|
||||
route_desc += '<img width="18px" src="../images/'+OSRM.RoutingDescription.getDirectionIcon(response.route_instructions[i][0])+'" alt="" />';
|
||||
route_desc += '<img width="18px" src="'+OSRM.RoutingDescription.getDrivingInstructionIcon(response.route_instructions[i][0])+'" alt="" />';
|
||||
route_desc += "</td>";
|
||||
|
||||
route_desc += '<td class="result-items">';
|
||||
route_desc += '<span class="result-item">';
|
||||
route_desc += response.route_instructions[i][0];
|
||||
route_desc += '<div class="result-item">';
|
||||
|
||||
// build route description
|
||||
if( i == 0 )
|
||||
route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] );
|
||||
if( response.route_instructions[i][1] != "" ) {
|
||||
route_desc += ' on ';
|
||||
route_desc += '<b>' + response.route_instructions[i][1] + '</b>';
|
||||
}
|
||||
//route_desc += ' for ';
|
||||
route_desc += '</span>';
|
||||
route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, OSRM.loc(response.route_instructions[i][6]) );
|
||||
else if( response.route_instructions[i][1] != "" )
|
||||
route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]);
|
||||
else
|
||||
route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"");
|
||||
|
||||
route_desc += '</div>';
|
||||
route_desc += "</td>";
|
||||
|
||||
route_desc += '<td class="result-distance">';
|
||||
@ -76,29 +91,31 @@ show: function(response) {
|
||||
route_desc += "</td>";
|
||||
|
||||
route_desc += "</tr>";
|
||||
}
|
||||
|
||||
route_desc += '</table>';
|
||||
headline = "";
|
||||
headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br/>";
|
||||
headline += '<div style="float:left;width:40%">';
|
||||
headline += "<span class='route-summary'>"
|
||||
+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance)
|
||||
+ "<br/>"
|
||||
+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time)
|
||||
+ "</span>";
|
||||
headline += '</div>';
|
||||
|
||||
var output = "";
|
||||
output += route_desc;
|
||||
|
||||
OSRM.printwindow.document.getElementById('description-headline').innerHTML = headline;
|
||||
OSRM.printwindow.document.getElementById('description').innerHTML = output;
|
||||
}
|
||||
route_desc += '</tbody>';
|
||||
route_desc += '</table>';
|
||||
|
||||
// put everything in DOM
|
||||
OSRM.printwindow.document.getElementById('description').innerHTML = route_desc;
|
||||
|
||||
// init map
|
||||
var map = OSRM.printwindow.initialize();
|
||||
var markers = OSRM.G.markers.route;
|
||||
map.addLayer( new L.MouseMarker( markers[0].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-source']} ) );
|
||||
for(var i=1, size=markers.length-1; i<size; i++)
|
||||
map.addLayer( new L.MouseMarker( markers[i].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-via']} ) );
|
||||
map.addLayer( new L.MouseMarker( markers[markers.length-1].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-target']} ));
|
||||
var route = new L.DashedPolyline();
|
||||
route.setLatLngs( OSRM.G.route.getPositions() );
|
||||
route.setStyle( {dashed:false,clickable:false,color:'#0033FF', weight:5} );
|
||||
map.addLayer( route );
|
||||
var bounds = new L.LatLngBounds( OSRM.G.route.getPositions() );
|
||||
map.fitBounds( bounds );
|
||||
},
|
||||
|
||||
// react to click
|
||||
print: function() {
|
||||
OSRM.printwindow = window.open("printing/printing.html","","width=400,height=300,left=100,top=100,dependent=yes,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=yes");
|
||||
OSRM.printwindow = window.open("printing/printing.html","","width=540,height=500,left=100,top=100,dependent=yes,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=yes");
|
||||
OSRM.printwindow.addEventListener("DOMContentLoaded", OSRM.Printing.windowLoaded, false);
|
||||
}
|
||||
|
||||
|
||||
@ -17,89 +17,207 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
|
||||
/* OSRM CSS styles for printing*/
|
||||
|
||||
|
||||
/* printer button */
|
||||
.printer-inactive
|
||||
/* page setup */
|
||||
body
|
||||
{
|
||||
cursor:pointer;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background-image:url("../images/printer_inactive.png");
|
||||
}
|
||||
.printer
|
||||
{
|
||||
cursor:pointer;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background-image:url("../images/printer.png");
|
||||
}
|
||||
.printer:hover
|
||||
{
|
||||
background-image:url("../images/printer_hover.png");
|
||||
}
|
||||
.printer:active
|
||||
{
|
||||
background-image:url("../images/printer_active.png");
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
/* route summary */
|
||||
.route-summary
|
||||
{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* route description box */
|
||||
#description
|
||||
{
|
||||
position:absolute;
|
||||
bottom:15px;
|
||||
top:60px;
|
||||
width:380px;
|
||||
font-size:12px;
|
||||
width:500px;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
|
||||
/* route map box */
|
||||
#map
|
||||
{
|
||||
width:500px;
|
||||
height:500px;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
|
||||
/* styles for information-box-header */
|
||||
div.header-title
|
||||
{
|
||||
font-weight:bold;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.header-content
|
||||
{
|
||||
font-weight:normal;
|
||||
}
|
||||
.result-link
|
||||
{
|
||||
color:#0000ff;
|
||||
text-decoration:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
.result-link:hover
|
||||
{
|
||||
color:#ff0000;
|
||||
}
|
||||
|
||||
|
||||
/* style for information-box table (search results, driving directions) */
|
||||
.results-table
|
||||
{
|
||||
border-spacing:0px;
|
||||
width:100%;
|
||||
}
|
||||
.results-odd
|
||||
{
|
||||
background-color: #FAF3E9; //#ffffff;
|
||||
background-color: #FFFDE3;
|
||||
}
|
||||
.results-even
|
||||
{
|
||||
background-color: #F2DE9C; //#ffffe0;
|
||||
background-color: #FFF9BB;
|
||||
}
|
||||
.result-counter
|
||||
{
|
||||
text-align:right;
|
||||
vertical-align:top;
|
||||
font-weight:bold;
|
||||
padding:1px 5px 1px 5px;
|
||||
}
|
||||
.result-items
|
||||
{
|
||||
text-align:left;
|
||||
vertical-align: middle;
|
||||
width:100%;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
padding:1px;
|
||||
}
|
||||
.result-direction
|
||||
.result-directions
|
||||
{
|
||||
width:30px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
text-align:left;
|
||||
vertical-align: middle;
|
||||
padding:1px 5px 1px 5px;
|
||||
}
|
||||
.result-distance
|
||||
{
|
||||
text-align:right;
|
||||
vertical-align: middle;
|
||||
width:30px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
vertical-align: middle;
|
||||
padding:1px 1px 1px 5px;
|
||||
}
|
||||
.result-item
|
||||
{
|
||||
cursor:pointer;
|
||||
color:#000000
|
||||
}
|
||||
.no-results
|
||||
{
|
||||
text-align:center;
|
||||
margin:28px;
|
||||
}
|
||||
|
||||
|
||||
/* header area */
|
||||
#printing-header
|
||||
{
|
||||
left:0px;
|
||||
right:0px;
|
||||
top:0px;
|
||||
height:20px;
|
||||
}
|
||||
.top-left-button
|
||||
{
|
||||
float:left;
|
||||
}
|
||||
.top-right-button
|
||||
{
|
||||
float:right;
|
||||
}
|
||||
|
||||
|
||||
/* utility styles */
|
||||
@media print {
|
||||
.quad
|
||||
{
|
||||
page-break-before:always;
|
||||
}
|
||||
}
|
||||
@media screen {
|
||||
.quad
|
||||
{
|
||||
min-width:10px;
|
||||
min-height:10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* iconic buttons */
|
||||
.iconic-button
|
||||
{
|
||||
cursor:pointer;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
#gui-printer
|
||||
{
|
||||
background-image:url("../images/printer.png");
|
||||
}
|
||||
#gui-printer:hover
|
||||
{
|
||||
background-image:url("../images/printer_hover.png");
|
||||
}
|
||||
#gui-printer:active
|
||||
{
|
||||
background-image:url("../images/printer_active.png");
|
||||
}
|
||||
|
||||
|
||||
/* fonts */
|
||||
@media print {
|
||||
|
||||
.base-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.big-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medium-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.small-font {
|
||||
font-family: Times New Roman, Times, serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.base-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.big-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medium-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 10.5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.small-font {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@ -39,34 +39,30 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
|
||||
<!-- scripts -->
|
||||
<script src="../leaflet/leaflet-src.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
function initialize() {
|
||||
/* // setup map
|
||||
// setup events
|
||||
document.getElementById('gui-printer').onclick= printsite;
|
||||
|
||||
// setup map
|
||||
var osmorgURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
osmorgOptions = {maxZoom: 18};
|
||||
var osmorg = new L.TileLayer(osmorgURL, osmorgOptions);
|
||||
var temp1 = new L.Map("map1", {
|
||||
var temp1 = new L.Map("map", {
|
||||
center: new L.LatLng(51.505, -0.09),
|
||||
zoom: 13,
|
||||
zoomAnimation: false, // false: removes animations and hiding of routes during zoom
|
||||
zoomAnimation: false,
|
||||
fadeAnimation: false,
|
||||
layers: [osmorg],
|
||||
attributionControl: false,
|
||||
zoomControl: false
|
||||
zoomControl: false,
|
||||
dragging:false,
|
||||
scrollWheelZoom:false,
|
||||
touchZoom:false,
|
||||
doubleClickZoom:false
|
||||
});
|
||||
|
||||
var osmorgURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
osmorgOptions = {maxZoom: 18, attributionControl:false};
|
||||
var osmorg = new L.TileLayer(osmorgURL, osmorgOptions);
|
||||
var temp2 = new L.Map("map2", {
|
||||
center: new L.LatLng(51.505, -0.09),
|
||||
zoom: 13,
|
||||
zoomAnimation: false, // false: removes animations and hiding of routes during zoom
|
||||
fadeAnimation: false,
|
||||
layers: [osmorg],
|
||||
attributionControl: false,
|
||||
zoomControl: false
|
||||
}); */
|
||||
return temp1;
|
||||
}
|
||||
|
||||
function printsite() {
|
||||
@ -78,14 +74,20 @@ function printsite() {
|
||||
|
||||
|
||||
<!-- body -->
|
||||
<body>
|
||||
<div style="position:absolute;right:5px;top:5px;" class="printer" onclick="printsite();"></div>
|
||||
<!--maps-->
|
||||
<!-- <div id="map1" style='width:100px;height:100px'></div>
|
||||
<div id="map2" style='width:100px;height:100px'></div> -->
|
||||
<body class="base-font">
|
||||
|
||||
<!-- header -->
|
||||
<div id="printing-header">
|
||||
<div id="gui-printer" class="iconic-button top-right-button"></div>
|
||||
</div>
|
||||
|
||||
<!--description-->
|
||||
<div id="description-headline"></div>
|
||||
<div id="description"></div>
|
||||
|
||||
<!--map-->
|
||||
<div class="quad"></div>
|
||||
<div class="header-title">Übersichtskarte</div>
|
||||
<div id="map"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
105
WebContent/printing/printing_screen.css
Normal file
105
WebContent/printing/printing_screen.css
Normal file
@ -0,0 +1,105 @@
|
||||
/*
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU AFFERO General Public License as published by
|
||||
the Free Software Foundation; either version 3 of the License, or
|
||||
any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program; if not, write to the Free Software
|
||||
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
|
||||
or see http://www.gnu.org/licenses/agpl.txt.
|
||||
*/
|
||||
|
||||
/* OSRM CSS styles for printing*/
|
||||
|
||||
|
||||
/* printer button */
|
||||
.printer-inactive
|
||||
{
|
||||
cursor:pointer;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background-image:url("../images/printer_inactive.png");
|
||||
}
|
||||
.printer
|
||||
{
|
||||
cursor:pointer;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background-image:url("../images/printer.png");
|
||||
}
|
||||
.printer:hover
|
||||
{
|
||||
background-image:url("../images/printer_hover.png");
|
||||
}
|
||||
.printer:active
|
||||
{
|
||||
background-image:url("../images/printer_active.png");
|
||||
}
|
||||
|
||||
/* route summary */
|
||||
.route-summary
|
||||
{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* route description box */
|
||||
#description
|
||||
{
|
||||
position:absolute;
|
||||
bottom:15px;
|
||||
top:60px;
|
||||
width:380px;
|
||||
font-size:12px;
|
||||
margin:5px;
|
||||
}
|
||||
.results-table
|
||||
{
|
||||
border-spacing:0px;
|
||||
}
|
||||
.results-odd
|
||||
{
|
||||
background-color: #FAF3E9; //#ffffff;
|
||||
}
|
||||
.results-even
|
||||
{
|
||||
background-color: #F2DE9C; //#ffffe0;
|
||||
}
|
||||
.result-items
|
||||
{
|
||||
text-align:left;
|
||||
vertical-align: middle;
|
||||
width:100%;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
.result-direction
|
||||
{
|
||||
width:30px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
.result-distance
|
||||
{
|
||||
text-align:right;
|
||||
vertical-align: middle;
|
||||
width:30px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
.result-item
|
||||
{
|
||||
cursor:pointer;
|
||||
color:#000000
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user