all images are now loaded in main.js

This commit is contained in:
DennisSchiefer 2012-04-10 23:50:04 +02:00
parent ea207cef6e
commit ffd5e2de99
5 changed files with 76 additions and 59 deletions

View File

@ -30,6 +30,9 @@ init: function() {
OSRM.GUI.visible = true; OSRM.GUI.visible = true;
OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth; OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
// init favicon
document.getElementById('favicon').href=OSRM.G.images["favicon"].src;
// init starting source/target // init starting source/target
document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE; document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
document.getElementById('gui-input-target').value = OSRM.DEFAULTS.ONLOAD_TARGET; document.getElementById('gui-input-target').value = OSRM.DEFAULTS.ONLOAD_TARGET;

View File

@ -30,7 +30,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<meta name="author" content="Dennis Schieferdecker" /> <meta name="author" content="Dennis Schieferdecker" />
<!-- favicon --> <!-- favicon -->
<link rel="shortcut icon" href="images/osrm-favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="" type="image/x-icon" id="favicon"/>
<!-- stylesheets --> <!-- stylesheets -->
<link rel="stylesheet" href="leaflet/leaflet.css" type="text/css"/> <link rel="stylesheet" href="leaflet/leaflet.css" type="text/css"/>

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.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
OSRM.checkURL(); OSRM.checkURL();
@ -35,40 +35,54 @@ OSRM.init = function() {
// prefetch images // prefetch images
OSRM.GLOBALS.images = Array(); OSRM.GLOBALS.images = {};
OSRM.prefetchImages = function() { OSRM.prefetchImages = function() {
var images = [ 'images/marker-source.png', var image_names = [ 'marker-source',
'images/marker-target.png', 'marker-target',
'images/marker-via.png', 'marker-via',
'images/marker-highlight.png', 'marker-highlight',
'images/marker-source-drag.png', 'marker-source-drag',
'images/marker-target-drag.png', 'marker-target-drag',
'images/marker-via-drag.png', 'marker-via-drag',
'images/marker-highlight-drag.png', 'marker-highlight-drag',
'images/marker-drag.png', 'marker-drag',
'images/cancel.png', 'cancel',
'images/cancel_active.png', 'cancel_active',
'images/cancel_hover.png', 'cancel_hover',
'images/restore.png', 'restore',
'images/restore_active.png', 'restore_active',
'images/restore_hover.png', 'restore_hover',
'images/printer.png', 'printer',
'images/printer_active.png', 'printer_active',
'images/printer_hover.png', 'printer_hover',
'images/printer_inactive.png' 'printer_inactive',
]; 'turn-left',
'turn-right',
for(var i=0; i<images.length; i++) { 'u-turn',
OSRM.G.images[i] = new Image(); 'continue',
OSRM.G.images[i].src = images[i]; 'slight-left',
'slight-right',
'sharp-left',
'sharp-right',
'round-about',
'target',
'default'
];
for(var i=0; i<image_names.length; i++) {
OSRM.G.images[image_names[i]] = new Image();
OSRM.G.images[image_names[i]].src = 'images/'+image_names[i]+'.png';
} }
OSRM.G.images["favicon"] = new Image();
OSRM.G.images["favicon"].src = 'images/osrm-favicon.ico';
}; };
// prefetch icons // prefetch icons
OSRM.GLOBALS.icons = Array(); OSRM.GLOBALS.icons = {};
OSRM.prefetchIcons = function() { OSRM.prefetchIcons = function() {
var images = [ 'marker-source', var image_names = [ 'marker-source',
'marker-target', 'marker-target',
'marker-via', 'marker-via',
'marker-highlight', 'marker-highlight',
@ -79,13 +93,13 @@ OSRM.prefetchIcons = function() {
'marker-drag' 'marker-drag'
]; ];
for(var i=0; i<images.length; i++) { for(var i=0; i<image_names.length; i++) {
var icon = { var icon = {
iconUrl: 'images/'+images[i]+'.png', iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41), iconUrl: 'images/'+image_names[i]+'.png', iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41),
shadowUrl: L.ROOT_URL + 'images/marker-shadow.png', shadowSize: new L.Point(41, 41), shadowUrl: L.ROOT_URL + 'images/marker-shadow.png', shadowSize: new L.Point(41, 41),
popupAnchor: new L.Point(0, -33) popupAnchor: new L.Point(0, -33)
}; };
OSRM.G.icons[images[i]] = new L.SwitchableIcon(icon); OSRM.G.icons[image_names[i]] = new L.SwitchableIcon(icon);
} }
// special values for drag marker // special values for drag marker

View File

@ -66,7 +66,7 @@ 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.G.images[OSRM.RoutingDescription.getDirectionIcon(response.route_instructions[i][0])].src+'" alt="" />';
route_desc += "</td>"; route_desc += "</td>";
route_desc += '<td class="result-items">'; route_desc += '<td class="result-items">';
@ -158,33 +158,33 @@ showNA: function( display_text ) {
// [TODO: language-safe implementation] // [TODO: language-safe implementation]
getDirectionIcon: function(name) { getDirectionIcon: function(name) {
var directions = { var directions = {
"Turn left":"turn-left.png", "Turn left":"turn-left",
"Turn right":"turn-right.png", "Turn right":"turn-right",
"U-Turn":"u-turn.png", "U-Turn":"u-turn",
"Head":"continue.png", "Head":"continue",
"Continue":"continue.png", "Continue":"continue",
"Turn slight left":"slight-left.png", "Turn slight left":"slight-left",
"Turn slight right":"slight-right.png", "Turn slight right":"slight-right",
"Turn sharp left":"sharp-left.png", "Turn sharp left":"sharp-left",
"Turn sharp right":"sharp-right.png", "Turn sharp right":"sharp-right",
"Enter roundabout and leave at first exit":"round-about.png", "Enter roundabout and leave at first exit":"round-about",
"Enter roundabout and leave at second exit":"round-about.png", "Enter roundabout and leave at second exit":"round-about",
"Enter roundabout and leave at third exit":"round-about.png", "Enter roundabout and leave at third exit":"round-about",
"Enter roundabout and leave at fourth exit":"round-about.png", "Enter roundabout and leave at fourth exit":"round-about",
"Enter roundabout and leave at fifth exit":"round-about.png", "Enter roundabout and leave at fifth exit":"round-about",
"Enter roundabout and leave at sixth exit":"round-about.png", "Enter roundabout and leave at sixth exit":"round-about",
"Enter roundabout and leave at seventh exit":"round-about.png", "Enter roundabout and leave at seventh exit":"round-about",
"Enter roundabout and leave at eighth exit":"round-about.png", "Enter roundabout and leave at eighth exit":"round-about",
"Enter roundabout and leave at nineth exit":"round-about.png", "Enter roundabout and leave at nineth exit":"round-about",
"Enter roundabout and leave at tenth exit":"round-about.png", "Enter roundabout and leave at tenth exit":"round-about",
"Enter roundabout and leave at one of the too many exit":"round-about.png", "Enter roundabout and leave at one of the too many exit":"round-about",
"You have reached your destination":"target.png" "You have reached your destination":"target"
}; };
if( directions[name] ) if( directions[name] )
return directions[name]; return directions[name];
else else
return "default.png"; return "default";
} }
}; };

View File

@ -48,17 +48,17 @@ reverseRouting: function() {
if(OSRM.G.markers.route.length == 1) { if(OSRM.G.markers.route.length == 1) {
if(OSRM.G.markers.route[0].label == OSRM.C.TARGET_LABEL) { if(OSRM.G.markers.route[0].label == OSRM.C.TARGET_LABEL) {
OSRM.G.markers.route[0].label = OSRM.C.SOURCE_LABEL; OSRM.G.markers.route[0].label = OSRM.C.SOURCE_LABEL;
OSRM.G.markers.route[0].marker.setIcon( new L.Icon('images/marker-source.png') ); OSRM.G.markers.route[0].marker.setIcon( OSRM.G.icons['marker-source'] );
} else if(OSRM.G.markers.route[0].label == OSRM.C.SOURCE_LABEL) { } else if(OSRM.G.markers.route[0].label == OSRM.C.SOURCE_LABEL) {
OSRM.G.markers.route[0].label = OSRM.C.TARGET_LABEL; OSRM.G.markers.route[0].label = OSRM.C.TARGET_LABEL;
OSRM.G.markers.route[0].marker.setIcon( new L.Icon('images/marker-target.png') ); OSRM.G.markers.route[0].marker.setIcon( OSRM.G.icons['marker-target'] );
} }
} else if(OSRM.G.markers.route.length > 1){ } else if(OSRM.G.markers.route.length > 1){
OSRM.G.markers.route[0].label = OSRM.C.SOURCE_LABEL; OSRM.G.markers.route[0].label = OSRM.C.SOURCE_LABEL;
OSRM.G.markers.route[0].marker.setIcon( new L.Icon('images/marker-source.png') ); OSRM.G.markers.route[0].marker.setIcon( OSRM.G.icons['marker-source'] );
OSRM.G.markers.route[OSRM.G.markers.route.length-1].label = OSRM.C.TARGET_LABEL; OSRM.G.markers.route[OSRM.G.markers.route.length-1].label = OSRM.C.TARGET_LABEL;
OSRM.G.markers.route[OSRM.G.markers.route.length-1].marker.setIcon( new L.Icon('images/marker-target.png') ); OSRM.G.markers.route[OSRM.G.markers.route.length-1].marker.setIcon( OSRM.G.icons['marker-target'] );
} }
// recompute route // recompute route