<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>
<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>
$("maxlat").value = Math.round(bounds.top * decimals) / decimals;
mapnikSizeChanged();
- htmlBoundsChanged(bounds);
+ htmlBoundsChanged();
}
function clearBox() {
}
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 {
} else {
$("export_osmarender").style.display = "none";
}
+
if ($("format_html").checked) {
$("export_html").style.display = "inline";
$("export_commit").style.display = "none";
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>
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;
}
var href = this.base;
- if( href.indexOf('?') != -1 ){
+ if(href.indexOf('?') != -1) {
href = href.substring( 0, href.indexOf('?') );
}
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,
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>