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

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

add static directory, with a simple map, that won't work right now, based
around the idea of proxying to a FeatureServer? setup atm.

File size: 6.6 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2  <head>
3    <title>OpenLayers Basic Single WMS Example</title>
4    <script src="openlayers/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-8, xy.y-8)));
58                    b.extend(map.getLonLatFromPixel(new OpenLayers.Pixel(xy.x+8, xy.y+8)));
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                   
68                    var styleMap = new OpenLayers.StyleMap({'default': OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'], {strokeWidth:3, cursor: 'pointer'})});
69
70                    this.layers = []
71                    this.layers.push(new OpenLayers.Layer.GML("", "/featureserver/featureserver.cgi/osm-polygons/?bbox="+b.toBBOX(), {format: OpenLayers.Format.GeoJSON, styleMap: styleMap, osmType: 'way'}));
72                    this.layers.push(new OpenLayers.Layer.GML("", "/featureserver/featureserver.cgi/osm/?bbox="+b.toBBOX(), {format: OpenLayers.Format.GeoJSON, styleMap: styleMap, 'osmType': 'way'}));
73                    this.layers.push(new OpenLayers.Layer.GML("", "/featureserver/featureserver.cgi/osm-points/?bbox="+b.toBBOX(), {format: OpenLayers.Format.GeoJSON, styleMap: styleMap, osmType: 'node'}));
74                    map.addLayers(this.layers);
75                    for (var i = 0; i < this.layers.length; i++) {
76                        this.layers[i].events.on({'featureselected': function(e) {
77                            var feature = e.feature;
78                            var s = "<a href='http://openstreetmap.org/browse/" + e.feature.layer.osmType+"/" + feature.fid +"'>"+ e.feature.layer.osmType+" " + feature.fid + "</a>";
79                            document.getElementById("data").innerHTML = s;
80                        }   
81                        });
82                    }   
83                    this.selectFeature = new OpenLayers.Control.SelectFeature(this.layers);
84                    map.addControl(this.selectFeature);
85                    this.selectFeature.activate();
86                }
87
88            }); 
89            var options = {
90                projection: new OpenLayers.Projection("EPSG:900913"),
91                units: "m",
92                maxResolution: 156543.0339,
93                numZoomLevels: 19,
94                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
95                                                 20037508.34, 20037508.34)
96            };
97
98            map = new OpenLayers.Map( 'map', options );
99            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
100                    "http://labs.metacarta.com/wms/vmap0",
101                    {layers: 'basic'} );
102            var mapnik = new OpenLayers.Layer.TMS(
103                "OpenStreetMap (Mapnik)",
104                  "http://a.tile.openstreetmap.org/",
105                {
106                    type: 'png', getURL: osm_getTileURL,
107                    displayOutsideMaxExtent: true,
108                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
109                }
110            );
111            var control = new OpenLayers.Control.Click();
112            map.addControl(control);
113            map.addControl(new OpenLayers.Control.Permalink());
114            var sfc = new OpenLayers.Control.SelectFeature
115            control.activate();
116            map.addLayer(mapnik);
117            if (!map.getCenter()) { map.zoomToMaxExtent(); }
118        }
119        function osm_getTileURL(bounds) {
120            var res = this.map.getResolution();
121            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
122            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
123            var z = this.map.getZoom();
124            var limit = Math.pow(2, z);
125
126            if (y < 0 || y >= limit) {
127                return OpenLayers.Util.getImagesLocation() + "404.png";
128            } else {
129                x = ((x % limit) + limit) % limit;
130                return this.url + z + "/" + x + "/" + y + "." + this.type;
131            }
132        }
133
134    </script>
135  </head>
136
137  <body onload="init()">
138    <div id="map" style="width:99%; height:99%">
139        <div id="data" style="position:absolute; right: 5px; top:5px; z-index:10000"></div>
140    </div>
141
142  </body>
143</html>
144
Note: See TracBrowser for help on using the repository browser.