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

- gui animations no longer trigger an onEndTransition event on loading

Browse Source 
- refactored control management (handle is stored with map)
- refactored inactive control buttons (no background change)
- added localization strings for zooming and default search engine
- renaming: OSRM.MapView -> OSRM.Control.Map
This commit is contained in:
DennisSchiefer
2012-08-27 16:24:37 +01:00
parent 6dcea6d808
commit 794140711d
27 changed files with 243 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/base/OSRM.Map.js
+8 -9
View File
@@ -47,7 +47,7 @@ init: function() {
}
// setup map
OSRM.G.map = new OSRM.MapView('map', {
OSRM.G.map = new OSRM.Control.Map('map', {
center: new L.LatLng(OSRM.DEFAULTS.ONLOAD_LATITUDE, OSRM.DEFAULTS.ONLOAD_LONGITUDE),
zoom: OSRM.DEFAULTS.ONLOAD_ZOOM_LEVEL,
layers: [base_maps[tile_servers[0].display_name]],
@@ -57,18 +57,17 @@ init: function() {
});
// add locations control
var locationsControl = new OSRM.Control.Locations();
OSRM.G.map.addControl(locationsControl);
OSRM.G.map.locationsControl = new OSRM.Control.Locations();
OSRM.G.map.locationsControl.addTo(OSRM.G.map);
// add layer control
var layerControl = new L.Control.QueryableLayers(base_maps, {});
OSRM.G.map.addLayerControl(layerControl);
OSRM.G.map.layerControl = new OSRM.Control.Layers(base_maps, {});
OSRM.G.map.layerControl.addTo(OSRM.G.map);
// add zoom control
var zoomControl = new OSRM.Control.Zoom();
OSRM.G.map.addControl(zoomControl);
zoomControl.show();
OSRM.G.map.zoomControl = new OSRM.Control.Zoom();
OSRM.G.map.zoomControl.addTo(OSRM.G.map);
OSRM.G.map.zoomControl.show();
// add scale control
OSRM.G.map.scaleControl = new L.Control.Scale();
WebContent/base/leaflet/L.Control.QueryableLayers.js → WebContent/base/osrm/OSRM.Control.Layers.js
+52 -3
View File
@@ -15,9 +15,9 @@ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
or see http://www.gnu.org/licenses/agpl.txt.
*/
// queryable Layers control
// OSRM Layers control
// [extension of Layers.Control with OSRM styling and additional query methods]
L.Control.QueryableLayers = L.Control.Layers.extend({
OSRM.Control.Layers = L.Control.Layers.extend({
// query functionality
getActiveLayerName: function () {
@@ -48,7 +48,56 @@ getActiveLayer: function () {
},
// overwrite Control.Layers methods to get OSRM styling
// overwrite Control.Layers methods to get OSRM styling
onAdd: function (map) {
this._initLayout(map);
this._update();
return this._container;
},
_initLayout: function (map) {
var className = 'leaflet-control-layers',
container = this._container = L.DomUtil.create('div', className);
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(container);
} else {
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
}
var form = this._form = L.DomUtil.create('form', className + '-list');
if (this.options.collapsed) {
L.DomEvent
.on(container, 'mouseover', this._expand, this)
.on(container, 'mouseout', this._collapse, this);
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
link.href = '#';
link.title = 'Layers';
if (L.Browser.touch) {
L.DomEvent
.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', this._expand, this);
}
else {
L.DomEvent.on(link, 'focus', this._expand, this);
}
this._map.on('movestart', this._collapse, this);
// TODO keyboard accessibility
} else {
this._expand();
}
this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
this._separator = L.DomUtil.create('div', className + '-separator', form);
this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
container.appendChild(form);
},
_expand: function () {
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
},
WebContent/base/osrm/OSRM.Control.Locations.js
+12 -14
View File
@@ -17,34 +17,28 @@ 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);
this._userButton = this._createButton('gui-locations-user', container, OSRM.GUI.zoomOnUser, map, !!navigator.geolocation );
this._routeButton = this._createButton('gui-locations-route', container, OSRM.GUI.zoomOnRoute, map, false);
this._container = container;
return container;
},
_createButton: function (id, container, fn, context, isActive) {
var inactive = (isActive == false) ? "-inactive" : "";
var classNames = "box-content" + " " + "gui-control"+inactive + " " + id+inactive;
var classNames = "box-content gui-control " + id+inactive;
var link = L.DomUtil.create('a', classNames, container);
link.id = id;
link.title = id;
L.DomEvent
@@ -56,10 +50,14 @@ OSRM.Control.Locations = L.Control.extend({
return link;
},
activate: function (id) {
document.getElementById(id).className = "box-content gui-control " + id;
activateRoute: function() {
this._routeButton.className = "box-content gui-control gui-locations-route";
},
deactivate: function (id) {
document.getElementById(id).className = "box-content gui-control-inactive " + id + "-inactive";
deactivateRoute: function() {
this._routeButton.className = "box-content gui-control gui-locations-route-inactive";
},
setTooltips: function( userButton, routeButton) {
this._userButton.title = userButton;
this._routeButton.title = routeButton;
}
});
WebContent/base/osrm/OSRM.MapView.js → WebContent/base/osrm/OSRM.Control.Map.js
+3 -10
View File
@@ -15,9 +15,9 @@ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
or see http://www.gnu.org/licenses/agpl.txt.
*/
// map view/model
// [extending Leaflet L.Map with setView/fitBounds methods that respect UI visibility, better layerControl]
OSRM.MapView = L.Map.extend({
// OSRM Map control
// [extension of L.Map with additional view & bounds methods that respect OSRM UI visibility; methods for querying active layers]
OSRM.Control.Map = L.Map.extend({
_boundsInsideView: function(bounds) {
var viewBounds = this.getBounds(),
viewSw = this.project(viewBounds.getSouthWest()),
@@ -106,13 +106,6 @@ OSRM.MapView = L.Map.extend({
return this.unproject(centerPoint, this._zoom, unbounded);
},
addLayerControl: function( layerControl ) {
if( this.layerControl )
return;
this.layerControl = layerControl;
this.addControl(this.layerControl);
},
getActiveLayerId: function() {
var tile_server_id = 0;
WebContent/base/osrm/OSRM.Control.Zoom.js
+15 -19
View File
@@ -17,34 +17,28 @@ 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);
this._zoomIn = this._createButton('gui-zoom-in', container, map.zoomIn, map, true);
this._zoomOut = this._createButton('gui-zoom-out', container, map.zoomOut, map, true);
this._container = container;
return container;
},
_createButton: function (id, container, fn, context, isActive) {
var inactive = (isActive == false) ? "-inactive" : "";
var classNames = "box-content" + " " + "gui-control"+inactive + " " + id+inactive;
var classNames = "box-content gui-control " + id+inactive;
var link = L.DomUtil.create('a', classNames, container);
link.id = id;
link.title = id;
L.DomEvent
@@ -57,17 +51,19 @@ OSRM.Control.Zoom = L.Control.extend({
},
hide: function() {
var zoom_controls = document.getElementById("gui-control-zoom");
if( zoom_controls )
zoom_controls.style.visibility="hidden";
if( this._container )
this._container.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";
if( this._container ) {
this._container.style.top = "5px";
this._container.style.left = ( OSRM.G.main_handle.boxVisible() == true ? (OSRM.G.main_handle.boxWidth()+10) : "30") + "px";
this._container.style.visibility="visible";
}
},
setTooltips: function( zoomIn, zoomOut) {
this._zoomIn.title = zoomIn;
this._zoomOut.title = zoomOut;
}
});