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

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

bump from 15 -> 30, automatically select areas which are clicked inside of (if
only one matches).

File size: 8.9 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2  <head>
3    <title>OpenLayers Basic Single WMS Example</title>
4    <script src="http://openlayers.org/api/OpenLayers.js"></script>
5    <script type="text/javascript">
6        var map, layer;
7        function onPopupClose(evt) {
8            selectControl.unselect(selectedFeature);
9        }
10        function onFeatureSelect(feature) {
11            selectedFeature = feature;
12            popup = new OpenLayers.Popup.FramedCloud("featurePopup", 
13                                     feature.geometry.getBounds().getCenterLonLat(),
14                                     null,
15                                     "<div style='font-size:.8em'>Feature: " + feature.attributes.osm_id +"<br />Area: " + feature.geometry.getArea()+"</div>",
16                                     null, true, onPopupClose);
17            feature.popup = popup;
18            map.addPopup(popup);
19        }
20        function onFeatureUnselect(feature) {
21            map.removePopup(feature.popup);
22            feature.popup.destroy();
23            feature.popup = null;
24        }   
25        function init(){
26           OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
27                defaultHandlerOptions: {
28                    'single': true,
29                    'double': false,
30                    'pixelTolerance': 0,
31                    'stopSingle': false,
32                    'stopDouble': false
33                },
34
35                initialize: function(options) {
36                    this.handlerOptions = OpenLayers.Util.extend(
37                        {}, this.defaultHandlerOptions
38                    );
39                    OpenLayers.Control.prototype.initialize.apply(
40                        this, arguments
41                    ); 
42                    this.handler = new OpenLayers.Handler.Click(
43                        this, {
44                            'click': this.onClick
45                        }, this.handlerOptions
46                    );
47                }, 
48
49                onClick: function(evt) {
50                    if (map.getResolution() > 30) {
51                        alert("sorry, zoom in");
52                        return;
53                    }   
54                    var output = document.getElementById("data");
55                    var xy = evt.xy;
56                    var b = new OpenLayers.Bounds();
57                    b.extend(map.getLonLatFromPixel(new OpenLayers.Pixel(xy.x-30, xy.y-30)));
58                    b.extend(map.getLonLatFromPixel(new OpenLayers.Pixel(xy.x+30, xy.y+30)));
59                    this.lastLonLat = b.getCenterLonLat();
60                    if (this.selectFeature) {
61                        this.selectFeature.destroy();
62                    }   
63                    if (this.layers) {
64                        for (var i = 0; i <this.layers.length; i++) {
65                            this.layers[i].destroy();
66                        }
67                    }
68                    $("data").innerHTML = "";
69                    $("loading").innerHTML = "Loading...";
70                    var styleMap = new OpenLayers.StyleMap({'default': OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'], {strokeWidth: 5, cursor: 'pointer'})});
71
72                    this.layers = []
73                    this.layers.push(
74                        new OpenLayers.Layer.GML("", 
75                            "/api/0.5/map?bbox="+b.clone().transform(map.getProjectionObject(), map.displayProjection).toBBOX(), 
76                            {format: OpenLayers.Format.OSM, styleMap: styleMap, projection: map.displayProjection}));
77                   
78                    var selectFeature = new OpenLayers.Control.SelectFeature(this.layers[0]);
79                    var click = this;
80                    for (var i = 0; i < this.layers.length; i++) {
81                       
82                        this.layers[i].events.on({
83                        'featureselected': 
84                            function(e) {
85                                var feature = e.feature;
86                                var type = "way"; 
87                                if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
88                                    type = "node";
89                                }   
90                                var s = "<a href='/" + type +"/" + feature.osm_id +"'>Edit "+ type + " " + feature.osm_id + "</a>";
91                                var tags = "<ul>"; 
92                                for (var key in feature.attributes) {
93                                    if (key.search(":") == -1) {
94                                        tags += "<li><b>" + key + "</b>: " + feature.attributes[key] + "</li>";
95                                    }
96                                }
97                                tags += "</ul>";
98                                document.getElementById("data").innerHTML = s + tags;
99                            },
100                        'featureunselected': function () {
101                            $("data").innerHTML = "";
102
103                        },
104                        "loadend": 
105                            function() { 
106                                $("loading").innerHTML = this.features.length + " loaded";
107                                if (this.features.length == 1) {
108                                    selectFeature.select(this.features[0]);
109                                } else {
110                                    var matches = [];
111                                    var point = new OpenLayers.Geometry.Point(click.lastLonLat.lon, click.lastLonLat.lat); 
112                                    for (var i = 0; i < this.features.length; i++) {
113                                         if (this.features[i].geometry.intersects(point)) {
114                                            matches.push(this.features[i]);
115                                         }
116                                    }
117                                    if (matches.length == 1) {
118                                        selectFeature.select(matches[0]);
119                                    }   
120                                }
121                                   
122                            }   
123                        });
124                    }   
125                    this.selectFeature = selectFeature;
126                    map.addControl(this.selectFeature);
127                    this.selectFeature.activate();
128                   
129                    map.addLayers(this.layers);
130                   
131                }
132
133            }); 
134            var options = {
135                projection: new OpenLayers.Projection("EPSG:900913"),
136                displayProjection: new OpenLayers.Projection("EPSG:4326"),
137                units: "m",
138                maxResolution: 156543.03392804062,
139                numZoomLevels: 19,
140                maxExtent: new OpenLayers.Bounds(-20037508.342787, -20037508.342788, 20037508.342789, 20037508.342789 )
141            };
142
143            map = new OpenLayers.Map( 'map', options );
144            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
145                    "http://labs.metacarta.com/wms/vmap0",
146                    {layers: 'basic'} );
147            var mapnik = new OpenLayers.Layer.TMS(
148                "OpenStreetMap (Mapnik)",
149                  ["http://a.tile.openstreetmap.org/",
150                   "http://b.tile.openstreetmap.org/"],
151                {
152                    type: 'png', getURL: osm_getTileURL,
153                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
154                }
155            );
156            var control = new OpenLayers.Control.Click();
157            map.addControl(control);
158            control.activate();
159            map.addControl(new OpenLayers.Control.Permalink());
160            map.addLayer(mapnik);
161            if (!map.getCenter()) { map.zoomToMaxExtent(); }
162        }
163        function osm_getTileURL(bounds) {
164            var res = this.map.getResolution();
165            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
166            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
167            var z = this.map.getZoom();
168            var limit = Math.pow(2, z);
169
170            if (y < 0 || y >= limit || x < 0 || x >= limit) {
171                return OpenLayers.Util.getImagesLocation() + "blank.gif";
172            } else {
173                x = ((x % limit) + limit) % limit;
174                path = z + "/" + x + "/" + y + "." + this.type;
175                var url = this.url;
176                if (url instanceof Array) {
177                    url = this.selectUrl(path, url);
178                }
179                return url + path;
180            }
181        }
182
183    </script>
184  </head>
185
186  <body onload="init()">
187    <div id="map" style="width:99%; height:99%">
188        <div id="data" style="position:absolute; left: 5px; bottom:5px; z-index:10000; background-color: white; padding: 5px"></div>
189        <div id="loading" style="position:absolute; right: 5px; top:25px; z-index:10000"></div>
190
191    </div>
192
193  </body>
194</html>
195
Note: See TracBrowser for help on using the repository browser.