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

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

buffer:0 to save tile loads

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