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

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

make map view work

File size: 8.1 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-15, xy.y-15)));
58                    b.extend(map.getLonLatFromPixel(new OpenLayers.Pixel(xy.x+15, xy.y+15)));
59                    if (this.selectFeature) {
60                        this.selectFeature.destroy();
61                    }   
62                    if (this.layers) {
63                        for (var i = 0; i <this.layers.length; i++) {
64                            this.layers[i].destroy();
65                        }
66                    }
67                    $("data").innerHTML = "";
68                    $("loading").innerHTML = "Loading...";
69                    var styleMap = new OpenLayers.StyleMap({'default': OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'], {strokeWidth: 5, cursor: 'pointer'})});
70
71                    this.layers = []
72                    this.layers.push(
73                        new OpenLayers.Layer.GML("", 
74                            "/api/0.5/map?bbox="+b.clone().transform(map.getProjectionObject(), map.displayProjection).toBBOX(), 
75                            {format: OpenLayers.Format.OSM, styleMap: styleMap, projection: map.displayProjection}));
76                   
77                    var selectFeature = new OpenLayers.Control.SelectFeature(this.layers[0]);
78                   
79                    for (var i = 0; i < this.layers.length; i++) {
80                       
81                        this.layers[i].events.on({
82                        'featureselected': 
83                            function(e) {
84                                var feature = e.feature;
85                                var type = "way"; 
86                                if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
87                                    type = "node";
88                                }   
89                                var s = "<a href='/" + type +"/" + feature.osm_id +"'>Edit "+ type + " " + feature.osm_id + "</a>";
90                                var tags = "<ul>"; 
91                                for (var key in feature.attributes) {
92                                    if (key.search(":") == -1) {
93                                        tags += "<li><b>" + key + "</b>: " + feature.attributes[key] + "</li>";
94                                    }
95                                }
96                                tags += "</ul>";
97                                document.getElementById("data").innerHTML = s + tags;
98                            },
99                        'featureunselected': function () {
100                            $("data").innerHTML = "";
101
102                        },
103                        "loadend": 
104                            function() { 
105                                $("loading").innerHTML = this.features.length + " loaded";
106                                if (this.features.length == 1) {
107                                    selectFeature.select(this.features[0]);
108                                }   
109                            }   
110                        });
111                    }   
112                    this.selectFeature = selectFeature;
113                    map.addControl(this.selectFeature);
114                    this.selectFeature.activate();
115                   
116                    map.addLayers(this.layers);
117                   
118                }
119
120            }); 
121            var options = {
122                projection: new OpenLayers.Projection("EPSG:900913"),
123                displayProjection: new OpenLayers.Projection("EPSG:4326"),
124                units: "m",
125                maxResolution: 156543.03392804062,
126                numZoomLevels: 19,
127                maxExtent: new OpenLayers.Bounds(-20037508.342787, -20037508.342788, 20037508.342789, 20037508.342789 )
128            };
129
130            map = new OpenLayers.Map( 'map', options );
131            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
132                    "http://labs.metacarta.com/wms/vmap0",
133                    {layers: 'basic'} );
134            var mapnik = new OpenLayers.Layer.TMS(
135                "OpenStreetMap (Mapnik)",
136                  ["http://a.tile.openstreetmap.org/",
137                   "http://b.tile.openstreetmap.org/"],
138                {
139                    type: 'png', getURL: osm_getTileURL,
140                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
141                }
142            );
143            var control = new OpenLayers.Control.Click();
144            map.addControl(control);
145            control.activate();
146            map.addControl(new OpenLayers.Control.Permalink());
147            map.addLayer(mapnik);
148            if (!map.getCenter()) { map.zoomToMaxExtent(); }
149        }
150        function osm_getTileURL(bounds) {
151            var res = this.map.getResolution();
152            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
153            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
154            var z = this.map.getZoom();
155            var limit = Math.pow(2, z);
156
157            if (y < 0 || y >= limit || x < 0 || x >= limit) {
158                return OpenLayers.Util.getImagesLocation() + "blank.gif";
159            } else {
160                x = ((x % limit) + limit) % limit;
161                path = z + "/" + x + "/" + y + "." + this.type;
162                var url = this.url;
163                if (url instanceof Array) {
164                    url = this.selectUrl(path, url);
165                }
166                return url + path;
167            }
168        }
169
170    </script>
171  </head>
172
173  <body onload="init()">
174    <div id="map" style="width:99%; height:99%">
175        <div id="data" style="position:absolute; left: 5px; bottom:5px; z-index:10000; background-color: white; padding: 5px"></div>
176        <div id="loading" style="position:absolute; right: 5px; top:25px; z-index:10000"></div>
177
178    </div>
179
180  </body>
181</html>
182
Note: See TracBrowser for help on using the repository browser.