Add support for parsing and serializing OpenStreetMap data. Includes
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
This commit is contained in:
crschmidt
117
examples/osm-layer.html
Normal file
117
examples/osm-layer.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user