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

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

add matt's minutely nonames tiles, give credit to entity hosting data

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