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

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

rearranging some code

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());
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.