Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

continued work on printing support

Browse Source
This commit is contained in:
DennisSchiefer 2012-04-15 19:34:18 +02:00
parent 253b591a87
commit 47369a0036
5 changed files with 348 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
WebContent/main.js
View File

@ -27,7 +27,7 @@ OSRM.init = function() {
OSRM.Localization.init(); OSRM.Localization.init();
OSRM.GUI.init(); OSRM.GUI.init();
OSRM.Map.init(); OSRM.Map.init();
//OSRM.Printing.init(); OSRM.Printing.init();
OSRM.Routing.init(); OSRM.Routing.init();
// check if the URL contains some GET parameter, e.g. for showing a route // check if the URL contains some GET parameter, e.g. for showing a route

81
WebContent/printing/OSRM.Printing.js
View File

@ -36,15 +36,29 @@ init: function() {
}, },
windowLoaded: function(){ windowLoaded: function(){
OSRM.printwindow.initialize();
OSRM.Printing.show( OSRM.G.response ); OSRM.Printing.show( OSRM.G.response );
OSRM.printwindow.focus(); OSRM.printwindow.focus();
}, },
show: function(response) { 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 // create route description
var route_desc = ""; var route_desc = '';
route_desc += '<table class="results-table">'; 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++){ for(var i=0; i < response.route_instructions.length; i++){
//odd or even ? //odd or even ?
@ -54,20 +68,21 @@ show: function(response) {
route_desc += '<tr class="'+rowstyle+'">'; route_desc += '<tr class="'+rowstyle+'">';
route_desc += '<td class="result-directions">'; 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>";
route_desc += '<td class="result-items">'; route_desc += '<td class="result-items">';
route_desc += '<span class="result-item">'; route_desc += '<div class="result-item">';
route_desc += response.route_instructions[i][0];
// build route description
if( i == 0 ) if( i == 0 )
route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] ); route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, OSRM.loc(response.route_instructions[i][6]) );
if( response.route_instructions[i][1] != "" ) { else if( response.route_instructions[i][1] != "" )
route_desc += ' on '; route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][1]);
route_desc += '<b>' + response.route_instructions[i][1] + '</b>'; else
} route_desc += OSRM.loc(OSRM.RoutingDescription.getDrivingInstruction(response.route_instructions[i][0])).replace(/\[(.*)\]/,"");
//route_desc += ' for ';
route_desc += '</span>'; route_desc += '</div>';
route_desc += "</td>"; route_desc += "</td>";
route_desc += '<td class="result-distance">'; route_desc += '<td class="result-distance">';
@ -76,29 +91,31 @@ show: function(response) {
route_desc += "</td>"; route_desc += "</td>";
route_desc += "</tr>"; route_desc += "</tr>";
} }
route_desc += '</tbody>';
route_desc += '</table>'; route_desc += '</table>';
headline = "";
headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br/>"; // put everything in DOM
headline += '<div style="float:left;width:40%">'; OSRM.printwindow.document.getElementById('description').innerHTML = route_desc;
headline += "<span class='route-summary'>"
+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) // init map
+ "<br/>" var map = OSRM.printwindow.initialize();
+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) var markers = OSRM.G.markers.route;
+ "</span>"; map.addLayer( new L.MouseMarker( markers[0].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-source']} ) );
headline += '</div>'; 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']} ) );
var output = ""; map.addLayer( new L.MouseMarker( markers[markers.length-1].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-target']} ));
output += route_desc; var route = new L.DashedPolyline();
route.setLatLngs( OSRM.G.route.getPositions() );
OSRM.printwindow.document.getElementById('description-headline').innerHTML = headline; route.setStyle( {dashed:false,clickable:false,color:'#0033FF', weight:5} );
OSRM.printwindow.document.getElementById('description').innerHTML = output; map.addLayer( route );
var bounds = new L.LatLngBounds( OSRM.G.route.getPositions() );
map.fitBounds( bounds );
}, },
// react to click // react to click
print: function() { 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); OSRM.printwindow.addEventListener("DOMContentLoaded", OSRM.Printing.windowLoaded, false);
} }

218
WebContent/printing/printing.css
View File

@ -17,89 +17,207 @@ or see http://www.gnu.org/licenses/agpl.txt.
/* OSRM CSS styles for printing*/ /* OSRM CSS styles for printing*/
/* page setup */
/* printer button */ body
.printer-inactive
{ {
cursor:pointer; margin: 8px;
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 */ /* route description box */
#description #description
{ {
position:absolute; width:500px;
bottom:15px;
top:60px;
width:380px;
font-size:12px;
margin:5px; 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 .results-table
{ {
border-spacing:0px; border-spacing:0px;
width:100%;
} }
.results-odd .results-odd
{ {
background-color: #FAF3E9; //#ffffff; background-color: #FFFDE3;
} }
.results-even .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 .result-items
{ {
text-align:left; text-align:left;
vertical-align: middle; vertical-align: middle;
width:100%; width:100%;
padding-left:1px; padding:1px;
padding-right:1px;
padding-top:1px;
padding-bottom:1px;
} }
.result-direction .result-directions
{ {
width:30px; text-align:left;
padding-left:1px; vertical-align: middle;
padding-right:1px; padding:1px 5px 1px 5px;
padding-top:1px;
padding-bottom:1px;
} }
.result-distance .result-distance
{ {
text-align:right; text-align:right;
vertical-align: middle; vertical-align: middle;
width:30px; padding:1px 1px 1px 5px;
padding-left:1px;
padding-right:1px;
padding-top:1px;
padding-bottom:1px;
} }
.result-item .result-item
{ {
cursor:pointer; cursor:pointer;
color:#000000 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;
}
}

48
WebContent/printing/printing.html
View File

@ -39,34 +39,30 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- scripts --> <!-- scripts -->
<script src="../leaflet/leaflet-src.js" type="text/javascript"></script> <script src="../leaflet/leaflet-src.js" type="text/javascript"></script>
<script> <script>
function initialize() { 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', var osmorgURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmorgOptions = {maxZoom: 18}; osmorgOptions = {maxZoom: 18};
var osmorg = new L.TileLayer(osmorgURL, osmorgOptions); 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), center: new L.LatLng(51.505, -0.09),
zoom: 13, zoom: 13,
zoomAnimation: false, // false: removes animations and hiding of routes during zoom zoomAnimation: false,
fadeAnimation: false, fadeAnimation: false,
layers: [osmorg], layers: [osmorg],
attributionControl: false, attributionControl: false,
zoomControl: false zoomControl: false,
dragging:false,
scrollWheelZoom:false,
touchZoom:false,
doubleClickZoom:false
}); });
return temp1;
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
}); */
} }
function printsite() { function printsite() {
@ -78,14 +74,20 @@ function printsite() {
<!-- body --> <!-- body -->
<body> <body class="base-font">
<div style="position:absolute;right:5px;top:5px;" class="printer" onclick="printsite();"></div>
<!--maps--> <!-- header -->
<!-- <div id="map1" style='width:100px;height:100px'></div> <div id="printing-header">
<div id="map2" style='width:100px;height:100px'></div> --> <div id="gui-printer" class="iconic-button top-right-button"></div>
</div>
<!--description--> <!--description-->
<div id="description-headline"></div>
<div id="description"></div> <div id="description"></div>
<!--map-->
<div class="quad"></div>
<div class="header-title">Übersichtskarte</div>
<div id="map"></div>
</body> </body>
</html> </html>

105
WebContent/printing/printing_screen.css Normal file
View 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
}