From: Tom Hughes Date: Sat, 23 Jun 2007 18:29:01 +0000 (+0000) Subject: Factor out javascript code to support OpenLayers maps into a common file X-Git-Tag: live~8333 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/9619dfdb4bac9df864b738c2180120a680fe9cec?ds=inline Factor out javascript code to support OpenLayers maps into a common file that is shared by both the (current) pages that display maps. --- diff --git a/app/views/site/index.rhtml b/app/views/site/index.rhtml index b383c4b5e..6e893d1a1 100644 --- a/app/views/site/index.rhtml +++ b/app/views/site/index.rhtml @@ -7,10 +7,6 @@ <% lon = params['mlon'] %> <% lat = params['mlat'] %> <% zoom = params['zoom'] || '12' %> - <% elsif @user and params['lon'].nil? and params['lat'].nil? %> <% lon = @user.home_lon %> <% lat = @user.home_lat %> @@ -21,89 +17,42 @@ <% zoom = params['zoom'] || '4' %> <% end %> - - - - +<%= javascript_include_tag '/openlayers/OpenLayers.js' %> +<%= javascript_include_tag 'map.js' %> diff --git a/app/views/user/account.rhtml b/app/views/user/account.rhtml index 938d3ea9b..177e9ac97 100644 --- a/app/views/user/account.rhtml +++ b/app/views/user/account.rhtml @@ -37,165 +37,70 @@ <% if @user.home_lat and @user.home_lon %> - <% marker = true %> - <% mlon = @user.home_lon %> - <% mlat = @user.home_lat %> - <% lon = @user.home_lon %> - <% lat = @user.home_lat %> - <% zoom = '12' %> - + <% marker = true %> + <% mlon = @user.home_lon %> + <% mlat = @user.home_lat %> + <% lon = @user.home_lon %> + <% lat = @user.home_lat %> + <% zoom = '12' %> <% else %> - <% lon = params['lon'] || '-0.1' %> - <% lat = params['lat'] || '51.5' %> - <% zoom = params['zoom'] || '4' %> + <% lon = params['lon'] || '-0.1' %> + <% lat = params['lat'] || '51.5' %> + <% zoom = params['zoom'] || '4' %> <% end %> - - - - +<%= javascript_include_tag '/openlayers/OpenLayers.js' %> +<%= javascript_include_tag 'map.js' %> diff --git a/public/javascripts/map.js b/public/javascripts/map.js new file mode 100644 index 000000000..4ba66b03f --- /dev/null +++ b/public/javascripts/map.js @@ -0,0 +1,110 @@ +var map; +var markers; +var popup; + +function createMap(divName, centre, zoom) { + OpenLayers.Util.onImageLoadError = function() { + this.src = OpenLayers.Util.getImagesLocation() + "404.png"; + } + + map = new OpenLayers.Map(divName, + { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), + numZoomLevels: 19, + maxResolution: 156543, + units: 'm', + projection: "EPSG:41001" }); + + var mapnik = new OpenLayers.Layer.TMS("Mapnik", + "http://tile.openstreetmap.org/", + { type: 'png', getURL: getTileURL }); + map.addLayer(mapnik); + + var osmarender = new OpenLayers.Layer.TMS("Osmarender", + "http://dev.openstreetmap.org/~ojw/Tiles/tile.php/", + { type: 'png', getURL: getTileURL }); + map.addLayer(osmarender); + + map.addControl(new OpenLayers.Control.LayerSwitcher()); + map.setCenter(centre, zoom); + + return map; +} + +function getTileURL(bounds) { + var res = this.map.getResolution(); + var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); + var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); + var z = this.map.getZoom(); + + return this.url + z + "/" + x + "/" + y + "." + this.type; +} + +function addMarkerToMap(position, icon, description) { + if (markers == null) { + markers = new OpenLayers.Layer.Markers("markers"); + map.addLayer(markers); + } + + var marker = new OpenLayers.Marker(position, icon); + + markers.addMarker(marker); + + if (description) { + marker.events.register("click", marker, function() { openMapPopup(marker, description) }); + } + + return marker; +} + +function openMapPopup(marker, description) { +// var box = document.createElement("div"); +// box.innerHTML = description; +// box.style.display = 'none'; +// box.style.width = "200px"; +// document.body.appendChild(box); + + closeMapPopup(); + + popup = new OpenLayers.Popup.AnchoredBubble("popup", marker.lonlat, + new OpenLayers.Size(200, 50), + "

" + description + "

", + marker.icon, true); + popup.setBackgroundColor("#E3FFC5"); + map.addPopup(popup); + + return popup; +} + +function closeMapPopup() { + if (popup) { + map.removePopup(popup); + delete popup; + } +} + +function removeMarkerFromMap(marker){ + markers.removeMarker(marker); +} + +function mercatorToLonLat(merc) { + var lon = (merc.lon / 20037508.34) * 180; + var lat = (merc.lat / 20037508.34) * 180; + var PI = 3.14159265358979323846; + + lat = 180/PI * (2 * Math.atan(Math.exp(lat * PI / 180)) - PI / 2); + + return new OpenLayers.LonLat(lon, lat); +} + +function lonLatToMercator(ll) { + var lon = ll.lon * 20037508.34 / 180; + var lat = Math.log(Math.tan((90 + ll.lat) * PI / 360)) / (PI / 180); + + lat = lat * 20037508.34 / 180; + + return new OpenLayers.LonLat(lon, lat); +} + +function scaleToZoom(scale) { + return Math.log(360.0/(scale * 512.0)) / Math.log(2.0); +} diff --git a/public/stylesheets/site.css b/public/stylesheets/site.css index 5f672216e..e06a6bf81 100644 --- a/public/stylesheets/site.css +++ b/public/stylesheets/site.css @@ -470,10 +470,6 @@ input { padding : 2px; } -#popup p, #popup span { - background-color : #E3FFC5 !important; -} - #map p#highlightinfo p, #popup p { margin : 0; padding : 2px;