bd7eaeb167
tests, examples, modification to proxy.cgi, etc. This should allow one to build an OpenLayers based OpenStreetMap editor with some effort, and makes it trivially simple to drop OpenStreetMap data from the API into your OpenLayers application. r=ahocevar,elemoine (Closes #1271) git-svn-id: http://svn.openlayers.org/trunk/openlayers@5902 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
118 lines
5.5 KiB
HTML
118 lines
5.5 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<style type="text/css">
|
|
#map {
|
|
width: 70%;
|
|
height: 475px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<script type="text/javascript">
|
|
var lon = 5;
|
|
var lat = 40;
|
|
var zoom = 5;
|
|
var map, layer, gml;
|
|
function export_vectors() {
|
|
var x = new OpenLayers.Format.XML();
|
|
var content = x.write(gml.renderer.rendererRoot);
|
|
$("vectors").value = content;
|
|
$("vectors").style.display = "block";
|
|
$("vectorlink").href = "data:image/svg+xml," + escape(content);
|
|
$("vectorlink").style.display="block";
|
|
}
|
|
function on_feature_hover(feature) {
|
|
var text ="<ul>";
|
|
var type ="way";
|
|
if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
|
|
type = "node";
|
|
}
|
|
text += "<li>" + feature.fid + ": <a href='http://crschmidt.net/osm/attributes.html?type="+type+"&id="+feature.fid+"'>Edit</a>, <a href='http://www.openstreetmap.org/api/0.5/"+type + "/" + feature.fid + "'>API</a></li>";
|
|
for (var key in feature.attributes) {
|
|
text += "<li>" + key + ": " + feature.attributes[key] + "</li>";
|
|
}
|
|
text += "</ul>";
|
|
$("status").innerHTML = text;
|
|
}
|
|
function clear_data() {
|
|
gml.destroyFeatures();
|
|
}
|
|
function new_data() {
|
|
if (!check_zoom()) { return; }
|
|
clear_data();
|
|
gml.loaded = false;
|
|
gml.url = "http://www.openstreetmap.org/api/0.5/map?bbox=" + map.getExtent().toBBOX();
|
|
$("status").innerHTML = "Loading more data...";
|
|
gml.loadGML();
|
|
}
|
|
function style_osm_feature(feature) {
|
|
feature.style.fill = "black";
|
|
if (feature.attributes.highway == "motorway") {
|
|
feature.style.strokeColor = "blue";
|
|
feature.style.strokeWidth = 5;
|
|
} else if (feature.attributes.highway == "primary") {
|
|
feature.style.strokeColor = "red";
|
|
} else if (feature.attributes.highway == "secondary") {
|
|
feature.style.strokeColor = "orange";
|
|
} else if (feature.attributes.highway) {
|
|
feature.style.strokeColor = "black";
|
|
}
|
|
}
|
|
function check_zoom() {
|
|
var zoom = map.getZoom();
|
|
if (zoom >= 11) { return true; }
|
|
if (zoom >= 9) { return confirm("Loading this amount of data may slow your browser. Are you sure you want to do this?"); }
|
|
$("status").innerHTML = "Area too large. Zoom in to load data. (Current zoom level: "+ zoom + ". Must be at zoom 9+.)";
|
|
return false;
|
|
}
|
|
function init(){
|
|
OpenLayers.ProxyHost = "proxy.cgi?url=";
|
|
OpenLayers.Feature.Vector.style['default'].strokeWidth = 4;
|
|
OpenLayers.Feature.Vector.style['default'].cursor = 'pointer';
|
|
map = new OpenLayers.Map('map', {'maxResolution': 360/512/16, 'numZoomLevels':15, controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar() ]});
|
|
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
|
map.addControl(new OpenLayers.Control.Permalink());
|
|
layer = new OpenLayers.Layer.WMS( "OSM",
|
|
[
|
|
"http://t1.hypercube.telascience.org/tiles?",
|
|
"http://t2.hypercube.telascience.org/tiles?",
|
|
"http://t3.hypercube.telascience.org/tiles?",
|
|
"http://t4.hypercube.telascience.org/tiles?"
|
|
],
|
|
{layers: 'osm-4326', format: 'image/png' } );
|
|
map.addLayer(layer);
|
|
if (!map.getCenter()) {
|
|
gml = new OpenLayers.Layer.GML("OSM", "osm/sutton_coldfield.osm", {format: OpenLayers.Format.OSM});
|
|
map.zoomToExtent(new OpenLayers.Bounds(-1.819072,52.549034,-1.814341,52.551582));
|
|
} else {
|
|
if (map.getZoom() >= 11) {
|
|
gml = new OpenLayers.Layer.GML("OSM", "http://www.openstreetmap.org/api/0.5/map?bbox=" + map.getExtent().toBBOX(), {format: OpenLayers.Format.OSM});
|
|
} else {
|
|
gml = new OpenLayers.Layer.GML("OSM", "xml/cambridgeport.osm", {format: OpenLayers.Format.OSM});
|
|
}
|
|
}
|
|
gml.events.register("loadstart", null, function() { $("status").innerHTML = "Loading..."; })
|
|
gml.events.register("loadend", null, function() { $("status").innerHTML = ""; })
|
|
map.addLayer(gml);
|
|
gml.preFeatureInsert = style_osm_feature;
|
|
var sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
|
|
map.addControl(sf);
|
|
sf.activate();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div style="width:28%; float:right" id="download">
|
|
<ul>
|
|
<li><a href="javascript:new_data();">Download current view</a></li>
|
|
<li><a href="javascript:clear_data();">Clear current data</a></li>
|
|
<li><a href="javascript:export_vectors();">Export Vector Data</a></li>
|
|
</ul>
|
|
<div id="status">Loading...</div>
|
|
</div>
|
|
<div id="map"></div>
|
|
<a id="vectorlink" href="" style="display:none">Display via data: URL (FF Only)</a>
|
|
<textarea id="vectors" style="display:none;width:100%" rows="10"></textarea>
|
|
</body>
|
|
</html>
|