- var gml, sf, obj_list, currentFeature;
- OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
- OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
- function start() {
- openSidebar({ onclose: stopBrowse });
- vectors = new OpenLayers.Layer.Vector("Vector Layer", {
- displayInLayerSwitcher: false
- });
-
- box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
- handlerOptions: {
- sides: 4,
- snapAngle: 90,
- irregular: true,
- persist: true,
- callbacks: { done: endDrag }
- }
- });
- map.addControl(box);
- }
- function stopBrowse() {
- if (gml) {
- gml.destroy();
- gml = null;
- }
- if (sf) {
- sf.destroy();
- sf = null;
- }
- if (currentFeature) {
- currentFeature.destroy();
- currentFeature = null;
- }
- }
- function startDrag() {
- $("drag_box").innerHTML='Drag a box on the map to select an area';
- box.activate();
- return false;
- };
+
+ var gml, sf, objList, currentFeature;
+ OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
+ OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
+
+ function start() {
+ openSidebar({ onclose: stopBrowse });
+ var vectors = new OpenLayers.Layer.Vector();
+
+ box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
+ handlerOptions: {
+ sides: 4,
+ snapAngle: 90,
+ irregular: true,
+ persist: true,
+ callbacks: { done: endDrag }
+ }
+ });
+ map.addControl(box);
+ }
+
+ function stopBrowse() {
+ if (gml) {
+ gml.destroy();
+ gml = null;
+ }
+ if (sf) {
+ sf.destroy();
+ sf = null;
+ }
+ if (currentFeature) {
+ currentFeature.destroy();
+ currentFeature = null;
+ }
+ }
+
+ function startDrag() {
+ $("drag_box").innerHTML='Drag a box on the map to select an area';
+ box.activate();
+ return false;
+ };
+ $("drag_box").onclick = startDrag;
+
+ function useMap() {
+ var bounds = map.getExtent();
+ setBounds(bounds);
+ getData(bounds);
+ }
+ $("use_map").onclick = useMap;
+
+ function endDrag(bbox) {
+ var bounds = bbox.getBounds();
+ setBounds(bounds);
+ box.deactivate();
+ getData(bounds);
+ $("drag_box").innerHTML = "Manually select a different area";
+ }
+
+ function getData(bounds) {
+ $("status").innerHTML = "Loading...";
+
+ bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
+ var url = "/api/0.5/map?bbox="+bounds.toBBOX();
+
+ if (!gml) {
+ var def = OpenLayers.Feature.Vector.style['default'];
+ var style = new OpenLayers.Style();
+ style.addRules([new OpenLayers.Rule(
+ {'symbolizer':
+ {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
+ "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
+ "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
+ }
+ )]);
+ gml = new OpenLayers.Layer.GML("Data",url,
+ {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
+ styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
+ }
+ );
+ gml.events.register("loadend", gml, dataLoaded );
+ map.addLayer(gml);
+
+ sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': onFeatureSelect});
+ map.addControl(sf);
+ sf.activate();
+ } else {
+ gml.setUrl(url);
+ }
+ }
+
+ function dataLoaded() {
+ $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
+
+ objList = document.createElement("ul");
+ for (var i = 0; i < this.features.length; i++) {
+ var feature = this.features[i];
+
+ // Type, for linking
+ var type ="way";
+ if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
+ type = "node";
+ }
+ var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
+ var li = document.createElement("li");
+ li.appendChild(document.createTextNode(nice_name + " "));
+
+ // Link, for viewing in the tab
+ var link = document.createElement("a");
+ link.href = "/browse/" + type + "/" + feature.osm_id;
+ var name = feature.attributes.name || feature.osm_id;
+ link.appendChild(document.createTextNode(name));
+ link.feature = feature;
+ link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
+ li.appendChild(link);