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

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

make the auto-select box a bit bigger.

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