Cosmetic tidy up, and fix hardcoding of server name.
This commit is contained in:
parent
57050172c8
commit
f2ae082a1f
3 changed files with 63 additions and 54 deletions
|
@ -18,13 +18,13 @@
|
|||
|
||||
<div class="export_details">
|
||||
<p>
|
||||
<%= radio_button_tag("format", "osm") %>OpenStreetMap XML Data
|
||||
<%= radio_button_tag("format", "osm") %> OpenStreetMap XML Data
|
||||
<br/>
|
||||
<%= radio_button_tag("format", "mapnik") %>Mapnik Image
|
||||
<%= radio_button_tag("format", "mapnik") %> Mapnik Image
|
||||
<br/>
|
||||
<%= radio_button_tag("format", "osmarender") %>Osmarender Image
|
||||
<%= radio_button_tag("format", "osmarender") %> Osmarender Image
|
||||
<br/>
|
||||
<%= radio_button_tag("format", "html") %>Embeddable HTML
|
||||
<%= radio_button_tag("format", "html") %> Embeddable HTML
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
@ -57,17 +57,14 @@
|
|||
|
||||
<div id="export_html">
|
||||
<p class="export_heading">Options</p>
|
||||
<p>
|
||||
<%= check_box_tag("html_marker", "true") %> Include Marker on Map
|
||||
</p>
|
||||
<div class="export_details">
|
||||
<p><%= check_box_tag("html_marker", "true") %> Include Marker on Map</p>
|
||||
</div>
|
||||
|
||||
<p class="export_heading">Output</p>
|
||||
<div class="export_details">
|
||||
<p>
|
||||
<input type="text" id="export_html_text" style="width:95%" />
|
||||
</p>
|
||||
<p>
|
||||
Paste HTML to embed in website
|
||||
</p>
|
||||
<p><input type="text" id="export_html_text" style="width:95%" /></p>
|
||||
<p>Paste HTML to embed in website</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -109,7 +109,7 @@ page << <<EOJ
|
|||
$("maxlat").value = Math.round(bounds.top * decimals) / decimals;
|
||||
|
||||
mapnikSizeChanged();
|
||||
htmlBoundsChanged(bounds);
|
||||
htmlBoundsChanged();
|
||||
}
|
||||
|
||||
function clearBox() {
|
||||
|
@ -161,25 +161,29 @@ page << <<EOJ
|
|||
}
|
||||
|
||||
function htmlBoundsChanged() {
|
||||
var bounds = new OpenLayers.Bounds($("minlon").value, $("minlat").value, $("maxlon").value, $("maxlat").value);
|
||||
var projBounds = bounds.clone().transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
|
||||
var zoom = map.getZoomForExtent(projBounds);
|
||||
var center = bounds.getCenterLonLat();
|
||||
var marker = $("html_marker").checked;
|
||||
var url = 'http://crschmidt2.dev.openstreetmap.org/export/embed.html?lat='+center.lat.toFixed(5)+'&lon='+center.lon.toFixed(5)+'&zoom='+zoom;
|
||||
if (marker) {
|
||||
url += "&marker=true";
|
||||
}
|
||||
var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'"></iframe>';
|
||||
$("export_html_text").value = html;
|
||||
if ($("format_html").checked) {
|
||||
$("export_html_text").select();
|
||||
}
|
||||
var bounds = new OpenLayers.Bounds($("minlon").value, $("minlat").value, $("maxlon").value, $("maxlat").value);
|
||||
var projBounds = bounds.clone().transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
|
||||
var zoom = map.getZoomForExtent(projBounds);
|
||||
var center = bounds.getCenterLonLat();
|
||||
var url = "http://#{SERVER_URL}/export/embed.html?lat=" + center.lat.toFixed(5) + "&lon=" + center.lon.toFixed(5) + "&zoom=" + zoom;
|
||||
|
||||
if ($("html_marker").checked) {
|
||||
url += "&marker=true";
|
||||
}
|
||||
|
||||
var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'"></iframe>';
|
||||
$("export_html_text").value = html;
|
||||
|
||||
if ($("format_html").checked) {
|
||||
$("export_html_text").select();
|
||||
}
|
||||
}
|
||||
|
||||
$("html_marker").onclick = htmlBoundsChanged;
|
||||
|
||||
function formatChanged() {
|
||||
$("export_commit").style.display = "inline";
|
||||
|
||||
if ($("format_osm").checked) {
|
||||
$("export_osm").style.display = "inline";
|
||||
} else {
|
||||
|
@ -201,6 +205,7 @@ page << <<EOJ
|
|||
} else {
|
||||
$("export_osmarender").style.display = "none";
|
||||
}
|
||||
|
||||
if ($("format_html").checked) {
|
||||
$("export_html").style.display = "inline";
|
||||
$("export_commit").style.display = "none";
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
height: 100%;
|
||||
}
|
||||
.olControlAttribution {
|
||||
bottom: 3px!important;
|
||||
}
|
||||
bottom: 3px!important;
|
||||
}
|
||||
</style>
|
||||
<script src="http://openstreetmap.org/openlayers/OpenLayers.js"></script>
|
||||
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
|
||||
|
@ -15,27 +15,27 @@
|
|||
var map, layer;
|
||||
function localUpdateLink() {
|
||||
var center = this.map.getCenter();
|
||||
|
||||
|
||||
// Map not initialized yet. Break out of this function.
|
||||
if (!center) {
|
||||
return;
|
||||
if (!center) {
|
||||
return;
|
||||
}
|
||||
|
||||
var params = OpenLayers.Util.getParameters(this.base);
|
||||
|
||||
params.zoom = this.map.getZoom();
|
||||
|
||||
params.zoom = this.map.getZoom();
|
||||
var lat = center.lat;
|
||||
var lon = center.lon;
|
||||
|
||||
|
||||
if (this.displayProjection) {
|
||||
var mapPosition = OpenLayers.Projection.transform(
|
||||
{ x: lon, y: lat },
|
||||
this.map.getProjectionObject(),
|
||||
{ x: lon, y: lat },
|
||||
this.map.getProjectionObject(),
|
||||
this.displayProjection );
|
||||
lon = mapPosition.x;
|
||||
lat = mapPosition.y;
|
||||
lon = mapPosition.x;
|
||||
lat = mapPosition.y;
|
||||
}
|
||||
|
||||
|
||||
if (this.map.marker) {
|
||||
params.lat = Math.round(lat*100000)/100000;
|
||||
params.lon = Math.round(lon*100000)/100000;
|
||||
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
var href = this.base;
|
||||
if( href.indexOf('?') != -1 ){
|
||||
if(href.indexOf('?') != -1) {
|
||||
href = href.substring( 0, href.indexOf('?') );
|
||||
}
|
||||
|
||||
|
@ -56,19 +56,21 @@
|
|||
function init(){
|
||||
OpenLayers.Lang.en.permalink = "Larger Map";
|
||||
map = new OpenLayers.Map ("map", {
|
||||
controls:[
|
||||
controls: [
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.ArgParser(),
|
||||
new OpenLayers.Control.Navigation(),
|
||||
new OpenLayers.Control.Permalink(null, "http://openstreetmap.org/", {updateLink:localUpdateLink})],
|
||||
new OpenLayers.Control.Navigation(),
|
||||
new OpenLayers.Control.Permalink(null, "http://openstreetmap.org/", { updateLink: localUpdateLink })
|
||||
],
|
||||
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
|
||||
20037508.34,20037508.34),
|
||||
numZoomLevels:20,
|
||||
maxResolution:156543.0339,
|
||||
numZoomLevels: 20,
|
||||
maxResolution: 156543.0339,
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
units:'m',
|
||||
units: 'm',
|
||||
projection: new OpenLayers.Projection("EPSG:900913")
|
||||
} );
|
||||
});
|
||||
|
||||
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
|
||||
displayOutsideMaxExtent: true,
|
||||
wrapDateLine: true,
|
||||
|
@ -81,21 +83,26 @@
|
|||
wrapDateLine: true,
|
||||
attribution: '<a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a>'
|
||||
});
|
||||
map.addLayer(osmarender);
|
||||
map.addLayer(osmarender);
|
||||
|
||||
var args = OpenLayers.Util.getParameters();
|
||||
if (args.marker && map.getCenter()) {
|
||||
var markers = new OpenLayers.Layer.Markers();
|
||||
map.addLayer(markers);
|
||||
markers.addMarker( new OpenLayers.Marker(map.getCenter()));
|
||||
map.marker = true;
|
||||
}
|
||||
if (!map.getCenter()) { map.zoomToMaxExtent(); }
|
||||
}
|
||||
|
||||
if (!map.getCenter()) {
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
var size = map.getSize();
|
||||
if (size.h > 320) {
|
||||
if (size.h > 320) {
|
||||
map.addControl(new OpenLayers.Control.PanZoomBar());
|
||||
} else {
|
||||
map.addControl(new OpenLayers.Control.PanZoom());
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue