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

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

add a larger loading indicator, from tedm

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