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

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

fix bug where duplicate hashes could get added when browsing the main map

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