cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge HTML export branch to trunk.

Browse source
This commit is contained in:
Tom Hughes 2008-05-01 07:49:28 +00:00
commit 51c11f2ef5
3 changed files with 203 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

25
app/views/export/_start.rhtml
View file

@ -18,11 +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
</p>
</div>
@ -52,6 +54,23 @@
<p>Zoom <%= select_tag("osmarender_zoom", options_for_select([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17])) %></p>
</div>
</div>
<div id="export_html">
<p class="export_heading">Options</p>
<div class="export_details">
<p><a id="add_marker" href="#">Add a marker to the map</a></p>
<p id="marker_inputs" style="display:none">
Lat: <input type="text" id="marker_lat" size="9" />
Lon: <input type="text" id="marker_lon" size="9" />
</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>
</div>
</div>
<div class="export_buttons">
<p><%= submit_tag "Export", :id => "export_commit" %></p>

106
app/views/export/start.rjs
View file

@ -3,6 +3,8 @@ page.replace_html :sidebar_content, :partial => 'start'
page << <<EOJ
var vectors;
var box;
var markerLayer;
var markerControl;
function startExport() {
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
@ -22,6 +24,7 @@ page << <<EOJ
map.addControl(box);
map.events.register("moveend", map, mapMoved);
map.events.register("changebaselayer", map, htmlUrlChanged);
openSidebar({ onclose: stopExport });
@ -43,7 +46,9 @@ page << <<EOJ
$("exportanchor").className = "";
clearBox();
clearMarker();
map.events.unregister("moveend", map, mapMoved);
map.events.unregister("changebaselayer", map, htmlUrlChanged);
map.removeLayer(vectors);
}
@ -92,6 +97,66 @@ page << <<EOJ
$("drag_box").innerHTML = "Manually select a different area";
}
function startMarker() {
$("add_marker").innerHTML='Click on the map to add a marker';
if (!markerLayer) {
markerLayer = new OpenLayers.Layer.Vector("",{
displayInLayerSwitcher: false,
style: {
externalGraphic: OpenLayers.Util.getImagesLocation() + "marker.png",
graphicXOffset: -10.5,
graphicYOffset: -25,
graphicWidth: 21,
graphicHeight: 25
}
});
map.addLayer(markerLayer);
markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point);
map.addControl(markerControl);
markerLayer.events.on({ "featureadded": endMarker });
}
markerLayer.destroyFeatures();
markerControl.activate();
return false;
}
$("add_marker").onclick = startMarker;
function endMarker(event) {
markerControl.deactivate();
$("add_marker").innerHTML = "Change marker position";
$("marker_inputs").style.display = "block";
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg900913 = new OpenLayers.Projection("EPSG:900913");
var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326);
$("marker_lon").value = geom.x.toFixed(5);
$("marker_lat").value = geom.y.toFixed(5);
htmlUrlChanged();
}
function clearMarker() {
$("marker_lon").value = "";
$("marker_lat").value = "";
$("marker_inputs").style.display = "none";
$("add_marker").innerHTML = "Add a marker to the map";
if (markerLayer) {
markerControl.destroy();
markerLayer.destroy();
markerLayer = null;
markerControl = null;
}
}
function mapMoved() {
setBounds(map.getExtent());
validateControls();
@ -109,6 +174,7 @@ page << <<EOJ
$("maxlat").value = Math.round(bounds.top * decimals) / decimals;
mapnikSizeChanged();
htmlUrlChanged();
}
function clearBox() {
@ -159,7 +225,37 @@ page << <<EOJ
}
}
function htmlUrlChanged() {
var bounds = new OpenLayers.Bounds($("minlon").value, $("minlat").value, $("maxlon").value, $("maxlat").value);
var layerName = map.baseLayer.name.toLowerCase();
var url = "http://#{SERVER_URL}/export/embed.html?bbox=" + bounds.toBBOX() + "&layer=" + layerName;
if ($("marker_lat").value && $("marker_lon").value) {
url += "&marker=" + $("marker_lat").value + "," + $("marker_lon").value;
}
var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
// Create "larger map" link
var center = bounds.getCenterLonLat();
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var epsg900913 = new OpenLayers.Projection("EPSG:900913");
bounds.transform(epsg4326, epsg900913);
var zoom = map.getZoomForExtent(bounds);
html += '<br /><small><a href="http://#{SERVER_URL}/?lat='+center.lat+'&lon='+center.lon+'&zoom='+zoom+'">View Larger Map</a></small>';
$("export_html_text").value = html;
if ($("format_html").checked) {
$("export_html_text").select();
}
}
function formatChanged() {
$("export_commit").style.display = "inline";
if ($("format_osm").checked) {
$("export_osm").style.display = "inline";
} else {
@ -182,12 +278,22 @@ page << <<EOJ
$("export_osmarender").style.display = "none";
}
if ($("format_html").checked) {
$("export_html").style.display = "inline";
$("export_commit").style.display = "none";
$("export_html_text").select();
} else {
$("export_html").style.display = "none";
clearMarker();
}
validateControls();
}
$("format_osm").onclick = formatChanged;
$("format_mapnik").onclick = formatChanged;
$("format_osmarender").onclick = formatChanged;
$("format_html").onclick = formatChanged;
function maxMapnikScale() {
var bounds = new OpenLayers.Bounds($("minlon").value, $("minlat").value, $("maxlon").value, $("maxlat").value);