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

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

add checkTags option to OSM format constructor, to fix bob's request that
subway stations show up as seperate nodes.

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.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
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, formatOptions: {checkTags: true}}));
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.