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

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

add the ability to create POIs by clicking in the map.

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