diff --git a/WebContent/base/OSRM.Map.js b/WebContent/base/OSRM.Map.js index 1ae79092b..8982f7f24 100644 --- a/WebContent/base/OSRM.Map.js +++ b/WebContent/base/OSRM.Map.js @@ -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(); diff --git a/WebContent/base/leaflet/L.Control.Locations.js b/WebContent/base/leaflet/L.Control.Locations.js deleted file mode 100644 index ae7f631e3..000000000 --- a/WebContent/base/leaflet/L.Control.Locations.js +++ /dev/null @@ -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); -}; \ No newline at end of file diff --git a/WebContent/base/leaflet/L.Control.QueryableLayers.js b/WebContent/base/leaflet/L.Control.QueryableLayers.js index 3ebd40571..7af74a738 100644 --- a/WebContent/base/leaflet/L.Control.QueryableLayers.js +++ b/WebContent/base/leaflet/L.Control.QueryableLayers.js @@ -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', ''); } + }); diff --git a/WebContent/base/leaflet/L.Control.Zoom.js b/WebContent/base/leaflet/L.Control.Zoom.js deleted file mode 100644 index 1cdf06ac0..000000000 --- a/WebContent/base/leaflet/L.Control.Zoom.js +++ /dev/null @@ -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); -}; \ No newline at end of file diff --git a/WebContent/base/osrm/OSRM.Control.Locations.js b/WebContent/base/osrm/OSRM.Control.Locations.js new file mode 100644 index 000000000..16ab3442a --- /dev/null +++ b/WebContent/base/osrm/OSRM.Control.Locations.js @@ -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"; + } +}); diff --git a/WebContent/base/osrm/OSRM.Control.Zoom.js b/WebContent/base/osrm/OSRM.Control.Zoom.js new file mode 100644 index 000000000..af1500597 --- /dev/null +++ b/WebContent/base/osrm/OSRM.Control.Zoom.js @@ -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"; + } + } +}); diff --git a/WebContent/gui/OSRM.MainGUI.js b/WebContent/gui/OSRM.MainGUI.js index 1eaab3c99..6eb85315f 100644 --- a/WebContent/gui/OSRM.MainGUI.js +++ b/WebContent/gui/OSRM.MainGUI.js @@ -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 diff --git a/WebContent/gui/OSRM.RoutingGUI.js b/WebContent/gui/OSRM.RoutingGUI.js index 5650fe1de..25b86a5c5 100644 --- a/WebContent/gui/OSRM.RoutingGUI.js +++ b/WebContent/gui/OSRM.RoutingGUI.js @@ -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" diff --git a/WebContent/images/control_layers.png b/WebContent/images/layers.png similarity index 100% rename from WebContent/images/control_layers.png rename to WebContent/images/layers.png diff --git a/WebContent/images/control_zoom_route.png b/WebContent/images/locations_route.png similarity index 100% rename from WebContent/images/control_zoom_route.png rename to WebContent/images/locations_route.png diff --git a/WebContent/images/locations_route_active.png b/WebContent/images/locations_route_active.png new file mode 100644 index 000000000..44315410c Binary files /dev/null and b/WebContent/images/locations_route_active.png differ diff --git a/WebContent/images/locations_route_hover.png b/WebContent/images/locations_route_hover.png new file mode 100644 index 000000000..a0c6c4fc0 Binary files /dev/null and b/WebContent/images/locations_route_hover.png differ diff --git a/WebContent/images/control_zoom_user.png b/WebContent/images/locations_user.png similarity index 100% rename from WebContent/images/control_zoom_user.png rename to WebContent/images/locations_user.png diff --git a/WebContent/images/locations_user_active.png b/WebContent/images/locations_user_active.png new file mode 100644 index 000000000..a3c6d5751 Binary files /dev/null and b/WebContent/images/locations_user_active.png differ diff --git a/WebContent/images/locations_user_hover.png b/WebContent/images/locations_user_hover.png new file mode 100644 index 000000000..79f3525c5 Binary files /dev/null and b/WebContent/images/locations_user_hover.png differ diff --git a/WebContent/images/controls.pdf b/WebContent/images/raw/controls.pdf similarity index 100% rename from WebContent/images/controls.pdf rename to WebContent/images/raw/controls.pdf diff --git a/WebContent/images/zoom_in.png b/WebContent/images/zoom_in.png new file mode 100644 index 000000000..3ef8cd378 Binary files /dev/null and b/WebContent/images/zoom_in.png differ diff --git a/WebContent/images/zoom_in_active.png b/WebContent/images/zoom_in_active.png new file mode 100644 index 000000000..9e7558f66 Binary files /dev/null and b/WebContent/images/zoom_in_active.png differ diff --git a/WebContent/images/zoom_in_hover.png b/WebContent/images/zoom_in_hover.png new file mode 100644 index 000000000..ef9df7636 Binary files /dev/null and b/WebContent/images/zoom_in_hover.png differ diff --git a/WebContent/images/zoom_out.png b/WebContent/images/zoom_out.png new file mode 100644 index 000000000..130a3f653 Binary files /dev/null and b/WebContent/images/zoom_out.png differ diff --git a/WebContent/images/zoom_out_active.png b/WebContent/images/zoom_out_active.png new file mode 100644 index 000000000..58bcc07ea Binary files /dev/null and b/WebContent/images/zoom_out_active.png differ diff --git a/WebContent/images/zoom_out_hover.png b/WebContent/images/zoom_out_hover.png new file mode 100644 index 000000000..0383161e4 Binary files /dev/null and b/WebContent/images/zoom_out_hover.png differ diff --git a/WebContent/main.css b/WebContent/main.css index ef05b613a..2c46e5e24 100644 --- a/WebContent/main.css +++ b/WebContent/main.css @@ -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 { diff --git a/WebContent/main.html b/WebContent/main.html index 1c95c5d1d..d6baa6c96 100644 --- a/WebContent/main.html +++ b/WebContent/main.html @@ -37,7 +37,6 @@ or see http://www.gnu.org/licenses/agpl.txt. - @@ -51,6 +50,8 @@ or see http://www.gnu.org/licenses/agpl.txt. + + @@ -153,7 +154,7 @@ or see http://www.gnu.org/licenses/agpl.txt.