← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/wfs-reprojection.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/openlayers/examples/wfs-reprojection.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
  <head>
 
3
    <title>WFS Reprojection + Canvas Renderer Example</title>
 
4
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
 
5
    <link rel="stylesheet" href="style.css" type="text/css" />
 
6
    <script src="../lib/OpenLayers.js"></script>
 
7
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
 
8
    <script type="text/javascript">
 
9
 
 
10
        var map, layer, styleMap;
 
11
        OpenLayers.ProxyHost = "/proxy/?url=";
 
12
        function init(){
 
13
 
 
14
            map = new OpenLayers.Map('map', {
 
15
                projection: new OpenLayers.Projection("EPSG:900913"),
 
16
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
 
17
                units: "m",
 
18
                maxResolution: 156543.0339,
 
19
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
 
20
                                                 20037508.34, 20037508.34)
 
21
            });
 
22
 
 
23
            var g = new OpenLayers.Layer.Google("G", {sphericalMercator: true});
 
24
            map.addLayers([g]);
 
25
 
 
26
            // prepare to style the data
 
27
            styleMap = new OpenLayers.StyleMap({
 
28
                strokeColor: "black",
 
29
                strokeWidth: 2,
 
30
                strokeOpacity: 0.5,
 
31
                fillOpacity: 0.2
 
32
            });
 
33
            // create a color table for state FIPS code
 
34
            var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
 
35
            var code, fips = {};
 
36
            for(var i=1; i<=66; ++i) {
 
37
                code = "0" + i;
 
38
                code = code.substring(code.length - 2);
 
39
                fips[code] = {fillColor: colors[i % colors.length]};
 
40
            }
 
41
            // add unique value rules with your color lookup
 
42
            styleMap.addUniqueValueRules("default", "STATE_FIPS", fips);
 
43
 
 
44
            // create a wfs layer with a projection different than the map
 
45
            // (only if your wfs doens't support your map projection)
 
46
            var wfs = layer = new OpenLayers.Layer.WFS(
 
47
                "States (SVG)",
 
48
                "http://sigma.openplans.org/geoserver/ows",
 
49
                {typename: 'topp:states'},
 
50
                {
 
51
                    typename: 'states',
 
52
                    featureNS: 'http://www.openplans.org/topp',
 
53
                    projection: new OpenLayers.Projection("EPSG:4326"),
 
54
                    extractAttributes: true,
 
55
                    ratio: 1.2,
 
56
                    styleMap: styleMap
 
57
                }
 
58
            );
 
59
            map.addLayer(wfs);
 
60
            
 
61
            var wfs = layer = new OpenLayers.Layer.WFS(
 
62
                "States (Canvas)",
 
63
                "http://sigma.openplans.org/geoserver/ows",
 
64
                {typename: 'topp:states'},
 
65
                {
 
66
                    typename: 'states',
 
67
                    featureNS: 'http://www.openplans.org/topp',
 
68
                    projection: new OpenLayers.Projection("EPSG:4326"),
 
69
                    extractAttributes: true,
 
70
                    ratio: 1.2,
 
71
                    styleMap: styleMap,
 
72
                    renderers: ['Canvas', 'SVG', 'VML'] 
 
73
                }
 
74
            );
 
75
            map.addLayer(wfs);
 
76
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
77
 
 
78
            // if you want to use Geographic coords, transform to ESPG:900913
 
79
            var ddBounds = new OpenLayers.Bounds(
 
80
                -73.839111,40.287907,-68.214111,44.441624
 
81
            );
 
82
            map.zoomToExtent(
 
83
                ddBounds.transform(map.displayProjection, map.getProjectionObject())
 
84
            );
 
85
        }
 
86
    </script>
 
87
  </head>
 
88
  <body onload="init()">
 
89
 
 
90
  <h1 id="title">WFS Reprojection + Canvas Renderer Example</h1>
 
91
 
 
92
  <div id="tags">
 
93
  </div>
 
94
  <p id="shortdesc">
 
95
        Shows the use of the WFS layer reprojection support 
 
96
  </p>
 
97
 
 
98
        <div id="map" class="smallmap"></div>
 
99
 
 
100
  <div id="docs">
 
101
    <p>This example shows automatic WFS reprojection, displaying an 'unprojected'
 
102
    WFS layer projected on the client side over Google Maps. The key configuration
 
103
    here is the 'projection' option on the WFS layer.</p>
 
104
    <p>Also shown is styleMap for the layer with unique value rules.  Colors
 
105
    are assigned based on the STATE_FIPS attribute.</p>
 
106
    <p>Additionally, this map demonstrates the Canvas/SVG renderers in browsers
 
107
       which support both. See the two different layers in the
 
108
       LayerSwitcher.</p>
 
109
  </div>
 
110
 
 
111
 
 
112
 
 
113
  </body>
 
114
</html>