source: subversion/applications/editors/django/osmeditor/static/map.html @ 13683

Last change on this file since 13683 was 13683, checked in by crschmidt, 10 years ago

add samll help help

File size: 11.3 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2  <head>
3    <title>Simple OSM Editor Map Viewer</title>
4    <script src="http://openlayers.org/api/OpenLayers.js"></script>
5    <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
6    <link rel="stylesheet" href="/static/base.css" type="text/css" />
7
8    <style type="text/css">
9       #helpLink {
10        font-size: smaller;
11        position: absolute;
12        right: 25px;
13        bottom: 53px;
14        z-index: 10000;
15       }
16       .potlatchLink {
17        font-size: smaller;
18        position: absolute;
19        right: 7em;
20        bottom: 17px;
21        z-index: 10000;
22       }
23       .olControlPermalink {
24        bottom: 3px;
25       } 
26       .olControlAttribution {
27        bottom: 20px;
28       } 
29    </style> 
30    <script type="text/javascript">
31        var map, layer;
32        var OSMEditor = {};
33        OSMEditor.CreatePOIClick = OpenLayers.Class(OpenLayers.Control, {               
34             title: 'Create POI',
35             initialize: function(options) {
36                 OpenLayers.Control.prototype.initialize.apply(
37                     this, arguments
38                 ); 
39                 this.handler = new OpenLayers.Handler.Click(
40                     this, {
41                         'dblclick': this.onClick,
42                     }, {
43                         'double': true,
44                         'stopDouble': true,
45                         'single': false
46                     }
47                 );
48             }, 
49
50             onClick: function(evt) {
51                 var xy = evt.xy;
52                 var f = new OpenLayers.Format.XML();
53                 var loc = map.getLonLatFromPixel(evt.xy);
54                 loc.transform(map.getProjectionObject(), map.displayProjection);
55                 var osm = f.createElementNS(null, "osm");
56                 osm.setAttribute("version", "0.5");
57                 var node = f.createElementNS(null, "node");
58                 node.setAttribute("lon", loc.lon);
59                 node.setAttribute("lat", loc.lat);
60                 osm.appendChild(node);
61                 var node = f.write(osm);
62                 var request = OpenLayers.Request.PUT({
63                     url: "/api/0.5/node/create",
64                     data: node,
65                     callback: this.handleResponse
66                 });           
67             },
68
69             handleResponse: function(req) {
70                 var id = req.responseText;
71                 document.location = "/node/" + id;
72             }
73        });     
74        OSMEditor.LoadDataClick = OpenLayers.Class(OpenLayers.Control, {               
75             title: 'Browse OSM Data by clicking',
76             initialize: function(options) {
77                 OpenLayers.Control.prototype.initialize.apply(
78                     this, arguments
79                 ); 
80                 this.handler = new OpenLayers.Handler.Click(
81                     this, {
82                         'click': this.onClick
83                     }
84                 );
85             }, 
86
87             onClick: function(evt) {
88                 if (map.getResolution() > 30) {
89                     alert("sorry, zoom in");
90                     return;
91                 }   
92                 var output = document.getElementById("data");
93                 var xy = evt.xy;
94                 var b = new OpenLayers.Bounds();
95                 b.extend(map.getLonLatFromPixel(new OpenLayers.Pixel(xy.x-30, xy.y-30)));
96                 b.extend(map.getLonLatFromPixel(new OpenLayers.Pixel(xy.x+30, xy.y+30)));
97                 this.lastLonLat = b.getCenterLonLat();
98                 if (this.selectFeature) {
99                     this.selectFeature.destroy();
100                 }   
101                 if (this.layers) {
102                     for (var i = 0; i <this.layers.length; i++) {
103                         this.layers[i].destroy();
104                     }
105                 }
106                 $("data").innerHTML = "";
107                 $("loading").innerHTML = "Loading...";
108                 var styleMap = new OpenLayers.StyleMap({'default': OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'], {strokeWidth: 5, cursor: 'pointer'})});
109
110                 this.layers = []
111                 this.layers.push(
112                     new OpenLayers.Layer.GML("", 
113                         "/api/0.5/map?bbox="+b.clone().transform(map.getProjectionObject(), map.displayProjection).toBBOX(), 
114                         {format: OpenLayers.Format.OSM, styleMap: styleMap, projection: map.displayProjection}));
115                 
116                 var selectFeature = new OpenLayers.Control.SelectFeature(this.layers[0]);
117                 var click = this;
118                 for (var i = 0; i < this.layers.length; i++) {
119                     
120                     this.layers[i].events.on({
121                     'featureselected': 
122                         function(e) {
123                             var feature = e.feature;
124                             var type = "way"; 
125                             if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
126                                 type = "node";
127                             }   
128                             var s = "<a href='/" + type +"/" + feature.osm_id +"'>Edit "+ type + " " + feature.osm_id + "</a>";
129                             var tags = "<ul>"; 
130                             for (var key in feature.attributes) {
131                                 if (key.search(":") == -1) {
132                                     tags += "<li><b>" + key + "</b>: " + feature.attributes[key] + "</li>";
133                                 }
134                             }
135                             tags += "</ul>";
136                             document.getElementById("data").innerHTML = s + tags;
137                         },
138                     'featureunselected': function () {
139                         $("data").innerHTML = "";
140
141                     },
142                     "loadend": 
143                         function() { 
144                             $("loading").innerHTML = this.features.length + " loaded";
145                             if (this.features.length == 1) {
146                                 selectFeature.select(this.features[0]);
147                             } else {
148                                 var matches = [];
149                                 var point = new OpenLayers.Geometry.Point(click.lastLonLat.lon, click.lastLonLat.lat); 
150                                 for (var i = 0; i < this.features.length; i++) {
151                                      if (this.features[i].geometry.intersects(point)) {
152                                         matches.push(this.features[i]);
153                                      }
154                                 }
155                                 if (matches.length == 1) {
156                                     selectFeature.select(matches[0]);
157                                 }   
158                             }
159                                 
160                         }   
161                     });
162                 }   
163                 this.selectFeature = selectFeature;
164                 map.addControl(this.selectFeature);
165                 this.selectFeature.activate();
166                 
167                 map.addLayers(this.layers);
168             }
169
170         }); 
171        function onPopupClose(evt) {
172            selectControl.unselect(selectedFeature);
173        }
174        function onFeatureSelect(feature) {
175            selectedFeature = feature;
176            popup = new OpenLayers.Popup.FramedCloud("featurePopup", 
177                                     feature.geometry.getBounds().getCenterLonLat(),
178                                     null,
179                                     "<div style='font-size:.8em'>Feature: " + feature.attributes.osm_id +"<br />Area: " + feature.geometry.getArea()+"</div>",
180                                     null, true, onPopupClose);
181            feature.popup = popup;
182            map.addPopup(popup);
183        }
184        function onFeatureUnselect(feature) {
185            map.removePopup(feature.popup);
186            feature.popup.destroy();
187            feature.popup = null;
188        }   
189        function init(){
190            var options = {
191                projection: new OpenLayers.Projection("EPSG:900913"),
192                displayProjection: new OpenLayers.Projection("EPSG:4326"),
193                units: "m",
194                maxResolution: 156543.03392804062,
195                numZoomLevels: 19,
196                maxExtent: new OpenLayers.Bounds(-20037508.342787, -20037508.342788, 20037508.342789, 20037508.342789 )
197            };
198
199            map = new OpenLayers.Map( 'map', options );
200            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
201                    "http://labs.metacarta.com/wms/vmap0",
202                    {layers: 'basic'} );
203            var mapnik = new OpenLayers.Layer.TMS(
204                "OpenStreetMap (Mapnik)",
205                  ["http://a.tile.openstreetmap.org/",
206                   "http://b.tile.openstreetmap.org/"],
207                {
208                    type: 'png', getURL: osm_getTileURL,
209                    attribution: '&copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> Contributors',
210                    buffer: 0
211                }
212            );
213
214            var panel = new OpenLayers.Control.Panel({displayClass: 'mainMapToolbar'});
215            panel.addControls(new OSMEditor.LoadDataClick({
216                'displayClass': 'loadData'
217            }));
218            panel.addControls(new OSMEditor.CreatePOIClick({
219                'displayClass': 'createPoi'
220            }));
221            map.addControl(panel);
222            panel.activate();
223            panel.activateControl(panel.controls[0]);
224            map.addControl(new OpenLayers.Control.Permalink());
225            map.addControl(new OpenLayers.Control.Permalink($("potlatchLinkHref"), "http://openstreetmap.org/edit.html", {displayClass: 'potlatchLink'}));
226            map.addLayer(mapnik);
227            if (!map.getCenter()) { map.zoomToMaxExtent(); }
228        }
229        function osm_getTileURL(bounds) {
230            var res = this.map.getResolution();
231            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
232            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
233            var z = this.map.getZoom();
234            var limit = Math.pow(2, z);
235
236            if (y < 0 || y >= limit || x < 0 || x >= limit) {
237                return OpenLayers.Util.getImagesLocation() + "blank.gif";
238            } else {
239                x = ((x % limit) + limit) % limit;
240                var path = z + "/" + x + "/" + y + "." + this.type;
241                var url = this.url;
242                if (url instanceof Array) {
243                    url = this.selectUrl(path, url);
244                }
245                return url + path;
246            }
247        }
248
249    </script>
250  </head>
251
252  <body onload="init()">
253    <div id="map" style="width:99%; height:99%">
254        <div id="helpLink"><a href="/help/" target="_blank">Help?</a></div>
255        <div id="data" style="position:absolute; left: 5px; bottom:5px; z-index:10000; background-color: white; padding: 5px"></div>
256        <div id="loading" style="position:absolute; right: 5px; top:45px; z-index:10000"></div>
257        <div class="potlatchLink"><a id="potlatchLinkHref">Edit (with Potlatch)</a></div>
258    </div>
259
260  </body>
261</html>
262
Note: See TracBrowser for help on using the repository browser.