From 2bb51717b91d1d7f8cdf05abbc49bc08f6f1a9d8 Mon Sep 17 00:00:00 2001 From: DennisSchiefer Date: Thu, 29 Mar 2012 14:34:55 +0100 Subject: [PATCH] extracted OSRM.Map and OSRM.MapView classes, moved centering that respects UI visibility to OSRM.MapView --- WebContent/OSRM.GUI.js | 4 +- WebContent/OSRM.Map.js | 143 +++++++++++++++++++++++++++++++++++++ WebContent/OSRM.Markers.js | 11 +-- WebContent/OSRM.Route.js | 17 +---- WebContent/main.html | 1 + WebContent/main.js | 101 ++------------------------ 6 files changed, 153 insertions(+), 124 deletions(-) create mode 100644 WebContent/OSRM.Map.js diff --git a/WebContent/OSRM.GUI.js b/WebContent/OSRM.GUI.js index 093e557ce..76ec2b682 100644 --- a/WebContent/OSRM.GUI.js +++ b/WebContent/OSRM.GUI.js @@ -22,8 +22,8 @@ or see http://www.gnu.org/licenses/agpl.txt. OSRM.GUI = { // defaults -visible: true, -width: 410, +visible: null, +width: null, // init GUI init: function() { diff --git a/WebContent/OSRM.Map.js b/WebContent/OSRM.Map.js new file mode 100644 index 000000000..91a4740ab --- /dev/null +++ b/WebContent/OSRM.Map.js @@ -0,0 +1,143 @@ +/* +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 map handling +// [initialization, event handling, centering relative to UI] + +// will hold the map object +OSRM.GLOBALS.map = null; + + +// map view/model +// [extending Leaflet L.Map with setView/fitBounds methods that respect UI visibility] +OSRM.MapView = L.Map.extend({ + setViewUI: function(position, zoom) { + if( OSRM.GUI.visible == true ) { + var point = OSRM.G.map.project( position, zoom); + point.x-=OSRM.GUI.width/2; + position = OSRM.G.map.unproject(point,zoom); + } + this.setView( position, zoom); + }, + fitBoundsUI: function(bounds) { + var southwest = bounds.getSouthWest(); + var northeast = bounds.getNorthEast(); + var zoom = OSRM.G.map.getBoundsZoom(bounds); + var sw_point = OSRM.G.map.project( southwest, zoom); + if( OSRM.GUI.visible == true ) + sw_point.x-=OSRM.GUI.width/2; + else + sw_point.x-=10; + sw_point.y+=10; + var ne_point = OSRM.G.map.project( northeast, zoom); + ne_point.y-=10; + sw_point.x+=10; + bounds.extend( OSRM.G.map.unproject(sw_point,zoom) ); + bounds.extend( OSRM.G.map.unproject(ne_point,zoom) ); + this.fitBounds( bounds ); + } +}); + + +// map controller +// [map initialization, event handling] +OSRM.Map = { + +// map initialization +init: function() { + // check if GUI is initialized! + if(OSRM.GUI.visible == null) + OSRM.GUI.init(); + + // setup tile servers + var osmorgURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + osmorgAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 Mapnik', + osmorgOptions = {maxZoom: 18, attribution: osmorgAttribution}; + + var osmdeURL = 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', + osmdeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 Mapnik', + osmdeOptions = {maxZoom: 18, attribution: osmdeAttribution}; + + var mapquestURL = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', + mapquestAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 MapQuest', + mapquestOptions = {maxZoom: 18, attribution: mapquestAttribution, subdomains: '1234'}; + + var cloudmadeURL = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', + cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', + cloudmadeOptions = {maxZoom: 18, attribution: cloudmadeAttribution}; + + var osmorg = new L.TileLayer(osmorgURL, osmorgOptions), + osmde = new L.TileLayer(osmdeURL, osmdeOptions), + mapquest = new L.TileLayer(mapquestURL, mapquestOptions), + cloudmade = new L.TileLayer(cloudmadeURL, cloudmadeOptions); + + // setup map + OSRM.G.map = new OSRM.MapView('map', { + 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] + }); + + // add tileservers + var baseMaps = { + "osm.org": osmorg, + "osm.de": osmde, + "MapQuest": mapquest, + "CloudMade": cloudmade + }; + + var overlayMaps = {}; + var layersControl = new L.Control.Layers(baseMaps, overlayMaps); + OSRM.G.map.addControl(layersControl); + + // move zoom markers + getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px"; + getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px"; + + // initial map position and zoom + var position = new L.LatLng( OSRM.DEFAULTS.ONLOAD_LATITUDE, OSRM.DEFAULTS.ONLOAD_LONGITUDE); + OSRM.G.map.setViewUI( position, OSRM.DEFAULTS.ZOOM_LEVEL); + + // map events + OSRM.G.map.on('zoomend', OSRM.Map.zoomed ); + OSRM.G.map.on('click', OSRM.Map.click ); + OSRM.G.map.on('contextmenu', OSRM.Map.contextmenu ); + OSRM.G.map.on('click', OSRM.Map.mousemove ); +}, + +// map event handlers +zoomed: function(e) { OSRM.Routing.getRoute(OSRM.C.FULL_DESCRIPTION); }, +contextmenu: function(e) {;}, +mousemove: function(e) {;}, +click: function(e) { + if( !OSRM.G.markers.hasSource() ) { + var index = OSRM.G.markers.setSource( e.latlng ); + OSRM.Geocoder.updateAddress( OSRM.C.SOURCE_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG ); + OSRM.G.markers.route[index].show(); + OSRM.G.markers.route[index].centerView( OSRM.G.map.getZoom() ); + OSRM.Routing.getRoute( OSRM.C.FULL_DESCRIPTION ); + } else if( !OSRM.G.markers.hasTarget() ) { + var index = OSRM.G.markers.setTarget( e.latlng ); + OSRM.Geocoder.updateAddress( OSRM.C.TARGET_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG ); + OSRM.G.markers.route[index].show(); + OSRM.G.markers.route[index].centerView( OSRM.G.map.getZoom() ); + OSRM.Routing.getRoute( OSRM.C.FULL_DESCRIPTION ); + } +} +}; \ No newline at end of file diff --git a/WebContent/OSRM.Markers.js b/WebContent/OSRM.Markers.js index feaee67b7..71ae6f7d2 100644 --- a/WebContent/OSRM.Markers.js +++ b/WebContent/OSRM.Markers.js @@ -59,16 +59,7 @@ isShown: function() { centerView: function(zoom) { if( zoom == undefined ) zoom = OSRM.DEFAULTS.ZOOM_LEVEL; - - var position; - if( OSRM.GUI.visible == true ) { - var point = OSRM.G.map.project( this.position, zoom); - point.x-=OSRM.GUI.width/2; - position = OSRM.G.map.unproject(point,zoom); - } else { - position = this.position; - } - OSRM.G.map.setView( position, zoom); + OSRM.G.map.setViewUI( this.position, zoom ); }, toString: function() { return "OSRM.Marker: \""+this.label+"\", "+this.position+")"; diff --git a/WebContent/OSRM.Route.js b/WebContent/OSRM.Route.js index 19810636c..2750f33f9 100644 --- a/WebContent/OSRM.Route.js +++ b/WebContent/OSRM.Route.js @@ -56,22 +56,7 @@ setStyle: function(style) { }, centerView: function() { var bounds = new L.LatLngBounds( this.getPositions() ); - - var southwest = bounds.getSouthWest(); - var northeast = bounds.getNorthEast(); - var zoom = OSRM.G.map.getBoundsZoom(bounds); - var sw_point = OSRM.G.map.project( southwest, zoom); - if( OSRM.GUI.visible == true ) - sw_point.x-=OSRM.GUI.width/2; - else - sw_point.x-=10; - sw_point.y+=10; - var ne_point = OSRM.G.map.project( northeast, zoom); - ne_point.y-=10; - sw_point.x+=10; - bounds.extend( OSRM.G.map.unproject(sw_point,zoom) ); - bounds.extend( OSRM.G.map.unproject(ne_point,zoom) ); - OSRM.G.map.fitBounds( bounds ); + OSRM.g.map.fitBoundsUI( bounds ); }, onClick: function(e) { if(OSRM.G.route.isRoute()) diff --git a/WebContent/main.html b/WebContent/main.html index be1c3c099..b52aebf1b 100644 --- a/WebContent/main.html +++ b/WebContent/main.html @@ -50,6 +50,7 @@ or see http://www.gnu.org/licenses/agpl.txt. + diff --git a/WebContent/main.js b/WebContent/main.js index c53ca5c08..a7140c69f 100644 --- a/WebContent/main.js +++ b/WebContent/main.js @@ -16,7 +16,7 @@ or see http://www.gnu.org/licenses/agpl.txt. */ // OSRM initialization -// [initialization of maps, gui, image prefetching] +// [initialization, image prefetching] // will hold the Leaflet map object OSRM.GLOBALS.map = null; @@ -28,8 +28,8 @@ OSRM.init = function() { OSRM.prefetchIcons(); OSRM.GUI.init(); - OSRM.Routing.init(); - OSRM.initMap(); + OSRM.Map.init(); + OSRM.Routing.init(); // check if the URL contains some GET parameter, e.g. for showing a route OSRM.checkURL(); @@ -72,97 +72,6 @@ OSRM.prefetchIcons = function() { }; -// centering on geolocation -function callback_centerOnGeolocation( position ) { - OSRM.G.map.setView( new L.LatLng( position.coords.latitude, position.coords.longitude), OSRM.DEFAULTS.ZOOM_LEVEL); -} -function centerOnGeolocation() { - if (navigator.geolocation) - navigator.geolocation.getCurrentPosition( callback_centerOnGeolocation ); -} - - -// init map -OSRM.initMap = function() { - // TODO: check if GUI is initialized! - - // setup tile servers - var osmorgURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', - osmorgAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 Mapnik', - osmorgOptions = {maxZoom: 18, attribution: osmorgAttribution}; - - var osmdeURL = 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', - osmdeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 Mapnik', - osmdeOptions = {maxZoom: 18, attribution: osmdeAttribution}; - - var mapquestURL = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', - mapquestAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 MapQuest', - mapquestOptions = {maxZoom: 18, attribution: mapquestAttribution, subdomains: '1234'}; - - var cloudmadeURL = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', - cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', - cloudmadeOptions = {maxZoom: 18, attribution: cloudmadeAttribution}; - - var osmorg = new L.TileLayer(osmorgURL, osmorgOptions), - osmde = new L.TileLayer(osmdeURL, osmdeOptions), - mapquest = new L.TileLayer(mapquestURL, mapquestOptions), - cloudmade = new L.TileLayer(cloudmadeURL, cloudmadeOptions); - - // setup map - OSRM.G.map = new L.Map('map', { - 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] - }); - - // add tileservers - var baseMaps = { - "osm.org": osmorg, - "osm.de": osmde, - "MapQuest": mapquest, - "CloudMade": cloudmade - }; - - var overlayMaps = {}; - var layersControl = new L.Control.Layers(baseMaps, overlayMaps); - OSRM.G.map.addControl(layersControl); - - // move zoom markers - getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px"; - getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px"; - - // initial map position and zoom - var position = new L.LatLng( OSRM.DEFAULTS.ONLOAD_LATITUDE, OSRM.DEFAULTS.ONLOAD_LONGITUDE); - if( OSRM.GUI.visible == true ) { - var point = OSRM.G.map.project( position, OSRM.DEFAULTS.ZOOM_LEVEL); - point.x-=OSRM.GUI.width/2; - position = OSRM.G.map.unproject(point,OSRM.DEFAULTS.ZOOM_LEVEL); - } - OSRM.G.map.setView( position, OSRM.DEFAULTS.ZOOM_LEVEL); - - // map events - OSRM.G.map.on('zoomend', function(e) { OSRM.Routing.getRoute(OSRM.C.FULL_DESCRIPTION); }); - OSRM.G.map.on('contextmenu', function(e) {}); - OSRM.G.map.on('click', function(e) { - if( !OSRM.G.markers.hasSource() ) { - var index = OSRM.G.markers.setSource( e.latlng ); - OSRM.Geocoder.updateAddress( OSRM.C.SOURCE_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG ); - OSRM.G.markers.route[index].show(); - OSRM.G.markers.route[index].centerView( OSRM.G.map.getZoom() ); - OSRM.Routing.getRoute( OSRM.C.FULL_DESCRIPTION ); - } else if( !OSRM.G.markers.hasTarget() ) { - var index = OSRM.G.markers.setTarget( e.latlng ); - OSRM.Geocoder.updateAddress( OSRM.C.TARGET_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG ); - OSRM.G.markers.route[index].show(); - OSRM.G.markers.route[index].centerView( OSRM.G.map.getZoom() ); - OSRM.Routing.getRoute( OSRM.C.FULL_DESCRIPTION ); - } - } ); -}; - - // parse URL GET parameters if any exist OSRM.checkURL = function(){ var called_url = document.location.search.substr(1,document.location.search.length); @@ -244,9 +153,9 @@ OSRM.checkURL = function(){ // center on route (support for old links) / move to given view (new behaviour) if(zoom == null || center == null) { var bounds = new L.LatLngBounds( positions ); - OSRM.G.map.fitBounds( bounds ); + OSRM.g.map.fitBoundsUI( bounds ); } else { - OSRM.G.map.setView(center, zoom); + OSRM.g.map.setView(center, zoom); } // compute route