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

added new buttons for map zooming and requesting important locations

Browse Source
This commit is contained in:
DennisSchiefer 2012-08-27 10:27:19 +01:00
parent 94ad1003e9
commit d3d3ebb5de
25 changed files with 302 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
WebContent/base/OSRM.Map.js
View File

@ -52,20 +52,23 @@ init: function() {
zoom: OSRM.DEFAULTS.ONLOAD_ZOOM_LEVEL,
layers: [base_maps[tile_servers[0].display_name]],
zoomAnimation: false, // animations have to be inactive during initialization (leaflet issue #918)
fadeAnimation: false
fadeAnimation: false,
zoomControl: false // use OSRM zoom buttons
});
// // add locations control
// var locationsControl = new L.Control.Locations();
// OSRM.G.map.addControl(locationsControl);
// add locations control
var locationsControl = new OSRM.Control.Locations();
OSRM.G.map.addControl(locationsControl);
// add layer control
var layerControl = new L.Control.QueryableLayers(base_maps, {});
OSRM.G.map.addLayerControl(layerControl);
// move zoom markers
OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.G.main_handle.boxWidth()+10)+"px";
OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
// add zoom control
var zoomControl = new OSRM.Control.Zoom();
OSRM.G.map.addControl(zoomControl);
zoomControl.show();
// add scale control
OSRM.G.map.scaleControl = new L.Control.Scale();

65
WebContent/base/leaflet/L.Control.Locations.js
View File

@ -1,65 +0,0 @@
/*
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.
*/
// locations control
// [buttons to important locations - zoom on route, zoom on user]
L.Control.Locations = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function (map) {
var className = 'leaflet-control-locations',
container = L.DomUtil.create('div', className);
this._createButton('Goto Location', className + '-user', container, OSRM.GUI.zoomOnUser, map);
this._createButton('Goto Route', className + '-route', container, OSRM.GUI.zoomOnRoute, map);
return container;
},
_createButton: function (title, className, container, fn, context) {
var link = L.DomUtil.create('a', className, container);
link.id = className;
link.title = title;
L.DomEvent
.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', fn, context)
.on(link, 'mousedown', function() { this.className = this.id + "-active"; } )
.on(link, 'mouseup', function() { this.className = this.id + ""; } )
.on(link, 'dblclick', L.DomEvent.stopPropagation);
return link;
}
});
L.Map.mergeOptions({
locationsControl: false
});
L.Map.addInitHook(function () {
if (this.options.locationsControl) {
this.locationsControl = new L.Control.Locations();
this.addControl(this.locationsControl);
}
});
L.control.locations = function (options) {
return new L.Control.Locations(options);
};

14
WebContent/base/leaflet/L.Control.QueryableLayers.js
View File

@ -16,10 +16,10 @@ or see http://www.gnu.org/licenses/agpl.txt.
*/
// queryable Layers control
// [simply Control.Layers extended by query functions]
// [extension of Layers.Control with OSRM styling and additional query methods]
L.Control.QueryableLayers = L.Control.Layers.extend({
// new query functionality
// query functionality
getActiveLayerName: function () {
var i, input, obj,
inputs = this._form.getElementsByTagName('input'),
@ -45,5 +45,15 @@ getActiveLayer: function () {
return obj.layer;
}
}
},
// overwrite Control.Layers methods to get OSRM styling
_expand: function () {
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
},
_collapse: function () {
this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
}
});

63
WebContent/base/leaflet/L.Control.Zoom.js
View File

@ -1,63 +0,0 @@
/*
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.
*/
// zoom control
// [control moves with sidebar and changes color when clicked]
L.Control.Zoom = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var className = 'leaflet-control-zoom',
container = L.DomUtil.create('div', className);
this._createButton('Zoom in', className + '-in', container, map.zoomIn, map);
this._createButton('Zoom out', className + '-out', container, map.zoomOut, map);
return container;
},
_createButton: function (title, className, container, fn, context) {
var link = L.DomUtil.create('a', className, container);
link.href = '#';
link.title = title;
L.DomEvent
.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', fn, context)
.on(link, 'dblclick', L.DomEvent.stopPropagation);
return link;
}
});
L.Map.mergeOptions({
zoomControl: true
});
L.Map.addInitHook(function () {
if (this.options.zoomControl) {
this.zoomControl = new L.Control.Zoom();
this.addControl(this.zoomControl);
}
});
L.control.zoom = function (options) {
return new L.Control.Zoom(options);
};

65
WebContent/base/osrm/OSRM.Control.Locations.js Normal file
View File

@ -0,0 +1,65 @@
/*
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.
*/
// locations control
// [navigation buttons for important locations - zoom on route, zoom on user]
OSRM.Control = OSRM.Control || {};
OSRM.Control.Locations = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function (map) {
// unique control
if( document.getElementById('gui-control-locations') )
return document.getElementById('gui-control-locations');
// create wrapper
var container = L.DomUtil.create('div', 'box-wrapper gui-control-wrapper');
container.id = 'gui-control-locations';
L.DomEvent.disableClickPropagation(container);
// create buttons
this._createButton('gui-locations-user', container, OSRM.GUI.zoomOnUser, map, navigator.geolocation );
this._createButton('gui-locations-route', container, OSRM.GUI.zoomOnRoute, map, false);
return container;
},
_createButton: function (id, container, fn, context, isActive) {
var inactive = (isActive == false) ? "-inactive" : "";
var classNames = "box-content" + " " + "gui-control"+inactive + " " + id+inactive;
var link = L.DomUtil.create('a', classNames, container);
link.id = id;
link.title = id;
L.DomEvent
.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', fn, context)
.on(link, 'dblclick', L.DomEvent.stopPropagation);
return link;
},
activate: function (id) {
document.getElementById(id).className = "box-content gui-control " + id;
},
deactivate: function (id) {
document.getElementById(id).className = "box-content gui-control-inactive " + id + "-inactive";
}
});

73
WebContent/base/osrm/OSRM.Control.Zoom.js Normal file
View File

@ -0,0 +1,73 @@
/*
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.
*/
// zoom control
// [modified zoom control with ids, prevention of click propagation, show/hide with respect to main OSRM window]
OSRM.Control = OSRM.Control || {};
OSRM.Control.Zoom = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
// unique control
if( document.getElementById('gui-control-zoom') )
return document.getElementById('gui-control-zoom');
// create wrapper
var container = L.DomUtil.create('div', 'box-wrapper gui-control-wrapper');
container.id = 'gui-control-zoom';
L.DomEvent.disableClickPropagation(container);
// create buttons
this._createButton('gui-zoom-in', container, map.zoomIn, map, true);
this._createButton('gui-zoom-out', container, map.zoomOut, map, true);
return container;
},
_createButton: function (id, container, fn, context, isActive) {
var inactive = (isActive == false) ? "-inactive" : "";
var classNames = "box-content" + " " + "gui-control"+inactive + " " + id+inactive;
var link = L.DomUtil.create('a', classNames, container);
link.id = id;
link.title = id;
L.DomEvent
.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', fn, context)
.on(link, 'dblclick', L.DomEvent.stopPropagation);
return link;
},
hide: function() {
var zoom_controls = document.getElementById("gui-control-zoom");
if( zoom_controls )
zoom_controls.style.visibility="hidden";
},
show: function() {
var zoom_controls = document.getElementById("gui-control-zoom");
if( zoom_controls ) {
zoom_controls.style.top = "5px";
zoom_controls.style.left = ( OSRM.G.main_handle.boxVisible() == true ? (OSRM.G.main_handle.boxWidth()+10) : "30") + "px";
zoom_controls.style.visibility="visible";
}
}
});

14
WebContent/gui/OSRM.MainGUI.js
View File

@ -71,6 +71,10 @@ setLabels: function() {
document.getElementById('config-handle-icon').title = OSRM.loc("GUI_CONFIGURATION");
document.getElementById('mapping-handle-icon').title = OSRM.loc("GUI_MAPPING_TOOLS");
document.getElementById('main-handle-icon').title = OSRM.loc("GUI_MAIN_WINDOW");
document.getElementById('gui-locations-route').title = OSRM.loc("GUI_ZOOM_ON_ROUTE");
document.getElementById('gui-locations-user').title = OSRM.loc("GUI_ZOOM_ON_USER");
document.getElementById('gui-zoom-in').title = OSRM.loc("GUI_ZOOM_IN");
document.getElementById('gui-zoom-out').title = OSRM.loc("GUI_ZOOM_OUT");
OSRM.GUI.setDistanceFormatsLanguage();
OSRM.GUI.setRoutingEnginesLanguage();
},
@ -83,17 +87,11 @@ clearResults: function() {
// reposition and hide zoom controls before main box animation
beforeMainTransition: function() {
var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');
if( zoom_controls.length > 0)
zoom_controls[0].style.visibility="hidden";
OSRM.Control.Zoom.prototype.hide();
},
// show zoom controls after main box animation
afterMainTransition: function() {
var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');
if( zoom_controls.length > 0) {
zoom_controls[0].style.left = ( OSRM.G.main_handle.boxVisible() == true ? (OSRM.G.main_handle.boxWidth()+10) : "30") + "px";
zoom_controls[0].style.visibility="visible";
}
OSRM.Control.Zoom.prototype.show();
},
// distance format routines

6
WebContent/gui/OSRM.RoutingGUI.js
View File

@ -46,13 +46,11 @@ init: function() {
// toggle GUI features that need a route to work
activateRouteFeatures: function() {
OSRM.Printing.activate();
// document.getElementById("gui-zoom").className = "button";
// document.getElementById('leaflet-control-locations-route').className = "leaflet-control-locations-route";
OSRM.Control.Locations.prototype.activate('gui-locations-route');
},
deactivateRouteFeatures: function() {
OSRM.Printing.deactivate();
// document.getElementById("gui-zoom").className = "button-inactive";
// document.getElementById('leaflet-control-locations-route').className = "leaflet-control-locations-route-inactive";
OSRM.Control.Locations.prototype.deactivate('gui-locations-route');
},
// click: button "reset"

0
WebContent/images/control_layers.png → WebContent/images/layers.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 871 B

After

Width:  |  Height:  |  Size: 871 B

0
WebContent/images/control_zoom_route.png → WebContent/images/locations_route.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 701 B

After

Width:  |  Height:  |  Size: 701 B

BIN
WebContent/images/locations_route_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 709 B

BIN
WebContent/images/locations_route_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 682 B

0
WebContent/images/control_zoom_user.png → WebContent/images/locations_user.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
WebContent/images/locations_user_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
WebContent/images/locations_user_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

0
WebContent/images/controls.pdf → WebContent/images/raw/controls.pdf
View File

BIN
WebContent/images/zoom_in.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 B

BIN
WebContent/images/zoom_in_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 B

BIN
WebContent/images/zoom_in_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
WebContent/images/zoom_out.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 B

BIN
WebContent/images/zoom_out_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
WebContent/images/zoom_out_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 B

187
WebContent/main.css
View File

@ -34,116 +34,6 @@ html, body {
/* ------------------------------------------------------------------------ */
/* changes/additions to leaflet styles */
.via-counter
{
position:absolute;
top:-3px;
right:-6px;
width:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#FFFFFF;
text-align:center;
vertical-align:middle;
font-size:9px;
display:none;
}
/*
.leaflet-control-zoom {
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:rgba(0, 0, 0, 0.25);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000);
padding:0px;
}
.leaflet-control-zoom a {
background-color: #ffffff;
background-color: rgba(255,255,255,1);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
margin:5px;
padding:2px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
width: 19px;
height: 19px;
}
.leaflet-control-zoom a:hover {
background-color: #CCCCCC;
}
.leaflet-touch .leaflet-control-zoom a {
width: 27px;
height: 27px;
}
.leaflet-control-locations {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:rgba(0, 0, 0, 0.25);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000);
padding:0px;
}
.leaflet-control-locations a {
float:left;
background-color: #ffffff;
background-color: rgba(255,255,255,1);
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
margin:5px;
padding:2px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
width: 26px;
height: 26px;
}
.leaflet-control-locations a:hover {
background-color: #CCCCCC;
}
.leaflet-touch .leaflet-control-locations a {
width: 32px;
height: 32px;
}
.leaflet-control-zoom-in {
background-image: url(images/zoom-in.png);
margin-bottom: 5px;
}
.leaflet-control-zoom-out {
background-image: url(images/zoom-out.png);
}
.leaflet-control-locations-user {
background-image:url('images/control_zoom_user.png');
}
.leaflet-control-locations-user-active {
background-image:url('images/control_zoom_route.png');
background-color: rgba(255,255,0,1);
}
.leaflet-control-locations-user-inactive {
background-image:url('images/control_zoom_route.png');
background-color: rgba(0,255,255,1);
}
.leaflet-control-locations-route {
background-image:url('images/control_zoom_route.png');
}
.leaflet-control-locations-route-active {
background-image:url('images/control_zoom_user.png');
}
.leaflet-control-locations-route-inactive {
background-image:url('images/control_zoom_user.png');
}
.leaflet-control-layers {
box-shadow: 0 0px 0px;
border-radius:10px;
@ -162,17 +52,31 @@ html, body {
-moz-border-radius:8px;
-webkit-border-radius:8px;
margin:5px;
padding:2px;
padding:5px;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
width: 26px;
height: 26px;
background-image:url('images/control_layers.png');
}
.leaflet-control-layers a:hover {
background-color: #CCCCCC;
}*/
/* counter for leaflet markers*/
.via-counter
{
position:absolute;
top:-3px;
right:-6px;
width:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#FFFFFF;
text-align:center;
vertical-align:middle;
font-size:9px;
display:none;
}
/* ------------------------------------------------------------------------ */
@ -632,6 +536,59 @@ html, body {
/* ------------------------------------------------------------------------ */
/* map buttons */
.gui-control-wrapper {
position:relative;
}
.gui-control {
cursor:pointer;
position:relative;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.gui-control-inactive {
cursor:default;
position:relative;
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
background-color: #EFEFEF;
}
/* zoom buttons */
.gui-zoom-in,
.gui-zoom-out {
width: 15px;
height: 15px;
}
.leaflet-touch .gui-zoom-in,
.leaflet-touch .gui-zoom-out {
width: 23px;
height: 23px;
}
/* locations buttons */
.gui-locations-user,
.gui-locations-route,
.gui-locations-user-inactive,
.gui-locations-route-inactive {
float:left;
width: 26px;
height: 26px;
}
.leaflet-touch .gui-locations-user,
.leaflet-touch .gui-locations-route,
.leaflet-touch .gui-locations-user-inactive,
.leaflet-touch .gui-locations-route-inactive {
width: 32px;
height: 32px;
}
/* ------------------------------------------------------------------------ */
/* buttons */
.button
{

5
WebContent/main.html
View File

@ -37,7 +37,6 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- scripts -->
<script src="leaflet/leaflet-src.js" type="text/javascript"></script>
<script src="base/leaflet/L.Bugfixes.js" type="text/javascript"></script>
<!-- <script src="base/leaflet/L.Control.Locations.js" type="text/javascript"></script> -->
<script src="base/leaflet/L.Control.QueryableLayers.js" type="text/javascript"></script>
<script src="base/leaflet/L.LabelMarker.js" type="text/javascript"></script>
<script src="base/leaflet/L.LabelMarkerIcon.js" type="text/javascript"></script>
@ -51,6 +50,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
<script src="main.js" type="text/javascript"></script>
<!-- <script defer="defer" src="OSRM.debug.js" type="text/javascript"></script> -->
<script src="base/osrm/OSRM.Control.Locations.js" type="text/javascript"></script>
<script src="base/osrm/OSRM.Control.Zoom.js" type="text/javascript"></script>
<script src="base/osrm/OSRM.MapView.js" type="text/javascript"></script>
<script src="base/osrm/OSRM.Marker.js" type="text/javascript"></script>
<script src="base/osrm/OSRM.Route.js" type="text/javascript"></script>
@ -153,7 +154,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- mapping gui -->
<div id="mapping-wrapper" class="box-wrapper">
<div id="mapping-content" class="box-content">
<!-- header -->select
<!-- header -->
<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
<div id="gui-mapping-label" class="box-label">Mapping Tools</div>

83
WebContent/main.js
View File

@ -83,6 +83,21 @@ OSRM.prefetchImages = function() {
{id:'printer_active', url:'images/printer_active.png'},
{id:'printer_hover', url:'images/printer_hover.png'},
{id:'printer_inactive', url:'images/printer_inactive.png'},
{id:'zoom_in', url:'images/zoom_in.png'},
{id:'zoom_in_active', url:'images/zoom_in_active.png'},
{id:'zoom_in_hover', url:'images/zoom_in_hover.png'},
{id:'zoom_out', url:'images/zoom_out.png'},
{id:'zoom_out_active', url:'images/zoom_out_active.png'},
{id:'zoom_out_hover', url:'images/zoom_out_hover.png'},
{id:'locations_user', url:'images/locations_user.png'},
{id:'locations_user_active', url:'images/locations_user_active.png'},
{id:'locations_user_hover', url:'images/locations_user_hover.png'},
{id:'locations_user_inactive', url:'images/locations_user_inactive.png'},
{id:'locations_route', url:'images/locations_route.png'},
{id:'locations_route_active', url:'images/locations_route_active.png'},
{id:'locations_route_hover', url:'images/locations_route_hover.png'},
{id:'locations_route_inactive', url:'images/locations_route_inactive.png'},
{id:'layers', url:'images/layers.png'},
{id:'direction_0', url:'images/default.png'},
{id:'direction_1', url:'images/continue.png'},
{id:'direction_2', url:'images/slight-right.png'},
@ -141,37 +156,57 @@ OSRM.prefetchIcons = function() {
// set css styles for images
OSRM.prefetchCSSIcons = function() {
var css_list = [
{ id:'#gui-printer-inactive', image_id:'printer_inactive'},
{ id:'#gui-printer', image_id:'printer'},
{ id:'#gui-printer:hover', image_id:'printer_hover'},
{ id:'#gui-printer:active', image_id:'printer_active'},
{ id:'#gui-printer-inactive', image_id:'printer_inactive'},
{ id:'#gui-printer', image_id:'printer'},
{ id:'#gui-printer:hover', image_id:'printer_hover'},
{ id:'#gui-printer:active', image_id:'printer_active'},
{ id:'.gui-zoom-in', image_id:'zoom_in'},
{ id:'.gui-zoom-in:hover', image_id:'zoom_in_hover'},
{ id:'.gui-zoom-in:active', image_id:'zoom_in_active'},
{ id:'.cancel-marker', image_id:'cancel'},
{ id:'.cancel-marker:hover', image_id:'cancel_hover'},
{ id:'.cancel-marker:active', image_id:'cancel_active'},
{ id:'.gui-zoom-out', image_id:'zoom_out'},
{ id:'.gui-zoom-out:hover', image_id:'zoom_out_hover'},
{ id:'.gui-zoom-out:active', image_id:'zoom_out_active'},
{ id:'.up-marker', image_id:'up'},
{ id:'.up-marker:hover', image_id:'up_hover'},
{ id:'.up-marker:active', image_id:'up_active'},
{ id:'.gui-locations-user-inactive', image_id:'locations_user_inactive'},
{ id:'.gui-locations-user', image_id:'locations_user'},
{ id:'.gui-locations-user:hover', image_id:'locations_user_hover'},
{ id:'.gui-locations-user:active', image_id:'locations_user_active'},
{ id:'.down-marker', image_id:'down'},
{ id:'.down-marker:hover', image_id:'down_hover'},
{ id:'.down-marker:active', image_id:'down_active'},
{ id:'.gui-locations-route-inactive', image_id:'locations_route_inactive'},
{ id:'.gui-locations-route', image_id:'locations_route'},
{ id:'.gui-locations-route:hover', image_id:'locations_route_hover'},
{ id:'.gui-locations-route:active', image_id:'locations_route_active'},
{ id:'#input-mask-header', image_id:'osrm-logo'},
{ id:'.styled-select', image_id:'selector'},
{ id:'.leaflet-control-layers a', image_id:'layers'},
{ id:'#config-handle-icon', image_id:'config'},
{ id:'#config-handle-icon:hover', image_id:'config_hover'},
{ id:'#config-handle-icon:active', image_id:'config_active'},
{ id:'.cancel-marker', image_id:'cancel'},
{ id:'.cancel-marker:hover', image_id:'cancel_hover'},
{ id:'.cancel-marker:active', image_id:'cancel_active'},
{ id:'.up-marker', image_id:'up'},
{ id:'.up-marker:hover', image_id:'up_hover'},
{ id:'.up-marker:active', image_id:'up_active'},
{ id:'.down-marker', image_id:'down'},
{ id:'.down-marker:hover', image_id:'down_hover'},
{ id:'.down-marker:active', image_id:'down_active'},
{ id:'#input-mask-header', image_id:'osrm-logo'},
{ id:'.styled-select', image_id:'selector'},
{ id:'#config-handle-icon', image_id:'config'},
{ id:'#config-handle-icon:hover', image_id:'config_hover'},
{ id:'#config-handle-icon:active', image_id:'config_active'},
{ id:'#mapping-handle-icon', image_id:'mapping'},
{ id:'#mapping-handle-icon:hover', image_id:'mapping_hover'},
{ id:'#mapping-handle-icon:active', image_id:'mapping_active'},
{ id:'#mapping-handle-icon', image_id:'mapping'},
{ id:'#mapping-handle-icon:hover', image_id:'mapping_hover'},
{ id:'#mapping-handle-icon:active', image_id:'mapping_active'},
{ id:'#main-handle-icon', image_id:'restore'},
{ id:'#main-handle-icon:hover', image_id:'restore_hover'},
{ id:'#main-handle-icon:active', image_id:'restore_active'}
{ id:'#main-handle-icon', image_id:'restore'},
{ id:'#main-handle-icon:hover', image_id:'restore_hover'},
{ id:'#main-handle-icon:active', image_id:'restore_active'}
];
var stylesheet = OSRM.CSS.getStylesheet("main.css");