1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers: OpenMNND</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 type="text/javascript">
11 OpenLayers.ProxyHost="/proxy/?url=";
12 map = new OpenLayers.Map('map', {'maxResolution':'auto', maxExtent: new OpenLayers.Bounds(-203349.72008129774,4816309.33,1154786.8041952979,5472346.5), projection: 'EPSG:26915' } );
13 layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
14 ["http://geoint.lmic.state.mn.us/cgi-bin/wms"], {layers: 'fsa'} );
18 wfs_url = "http://prototype.openmnnd.org/cgi-bin/mapserv.exe?map=openmnndwfs/openmnndwfs.map";
19 wms = new OpenLayers.Layer.WMS("Minnesota Parcels (WMS)", wfs_url, {'layers':'streams', 'transparent': true, 'format':'image/gif'});
23 wfs = new OpenLayers.Layer.WFS("Minnesota Streams (WFS)", wfs_url, {'typename':'streams'}, {ratio:1.25, minZoomLevel:4, style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])});
25 // preFeatureInsert can be used to set style before the feature is drawn
26 wfs.preFeatureInsert= function(feature) { feature.style.strokeWidth="3"; feature.style.strokeColor="blue";
28 wfs.onFeatureInsert = function(feature) {
29 OpenLayers.Util.getElement('stream_features').innerHTML = feature.layer.features.length;
33 // Or a style can be set on the layer.
34 pwfsstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
35 OpenLayers.Util.extend(pwfsstyle, {'fillColor': 'green'});
37 pwfs = new OpenLayers.Layer.WFS("Minnesota Plat (WFS)", wfs_url,
42 extractAttributes: true,
46 pwfs.onFeatureInsert= function(feature) {
47 OpenLayers.Util.getElement('plat_features').innerHTML = feature.layer.features.length;
51 rstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
52 OpenLayers.Util.extend(rstyle, {'strokeColor': 'white', strokeWidth: "4"});
53 rwfs = new OpenLayers.Layer.WFS("Minnesota Roads (WFS)", wfs_url, {'typename':'roads'},
54 {ratio:1.25, minZoomLevel:7, extractAttributes: true, style:rstyle});
56 rwfs.onFeatureInsert= function(feature) {
57 OpenLayers.Util.getElement('road_features').innerHTML = feature.layer.features.length;
62 map.events.register('moveend', null, function() {
63 OpenLayers.Util.getElement('stream_features').innerHTML = "0";
64 OpenLayers.Util.getElement('road_features').innerHTML = "0";
65 OpenLayers.Util.getElement('plat_features').innerHTML = "0";
68 var ls = new OpenLayers.Control.LayerSwitcher();
72 selectPlat: new OpenLayers.Control.SelectFeature(pwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}}),
73 selectRoad: new OpenLayers.Control.SelectFeature(rwfs, {callbacks: {'up':feature_info,'over':feature_info_hover}})
76 for(var key in drawControls) {
77 map.addControl(drawControls[key]);
79 drawControls.selectPlat.activate();
81 map.zoomToExtent(new OpenLayers.Bounds(303232.550864,5082911.694856,305885.161263,5084486.682281));
84 function toggleControl(element) {
85 for(key in drawControls) {
86 var control = drawControls[key];
87 if(element.value == key && element.checked) {
94 var displayedFeature = null;
95 function feature_info_hover(feature) {
96 if (displayedFeature != feature &&
97 (!feature.layer.selectedFeatures.length ||
98 (feature.layer.selectedFeatures[0] == feature))) {
99 feature_info(feature);
100 displayedFeature = feature;
103 function feature_info(feature) {
105 for(var i in feature.attributes)
106 html += "<li><b>" + i + "</b>: "+ feature.attributes[i] + "</li>";
108 OpenLayers.Util.getElement('feature_info').innerHTML = html;
112 <body onload="init()">
113 <h1 id="title">OpenMNND WFS</h1>
114 <p id="shortdesc">This example shows the use of a WFS service rendered using the OpenLayers vector library.</p>
115 <div id="map" class="smallmap"></div>
118 This is an example that shows rendering a WFS service using OpenLayer vectors in the browser. The OpenLayers code will download the GML
119 from the WFS service for each layer, parse it and create features using the OL vector library to draw the features on the map. For
120 more information on the vector library, please visit <a href="http://trac.openlayers.org/wiki/Documentation/VectorSupport">vector support wiki</a>.
121 In this example there are 4 layers shown on the map. The base layer and parcel layer are created from a WMS service using the OpenLayers.Layer.WMS object.
122 The streams, roads, and plat layers are drawn from a WFS service using the OpenLayers.Layer.WFS object.
126 Rendering WFS layers into vectors is possible, but you need to be cautions when showing the features on the map. Testing has shown that when
127 you renderer more than 200 vectors in the browser the performance decreases dramatically. Also features that have a lot of vertices
128 can cause performance issues. In this example the parcel layer is rendered as a WMS layer because at the time of developing this example
129 there where a handful of features that had too many vertices to render without killing the browser resources.
131 There are a number of properties that can be set for each WFS layer, such color and line weight using style properties such as strokeColor and strokeWidth.
132 You can also get feature attributes from the WFS services using the extractAttribute property. View the source to see the example code.
137 <li>Streams: Feature Count <span id="stream_features">0</span></li>
138 <li>Plat: Feature Count <span id="plat_features">0</span></li>
139 <li>Roads: Feature Count <span id="road_features">0</span></li>
141 <div id="feature_info">
145 <input type="radio" name="type" value="selectRoad" id="selectToggle" onclick="toggleControl(this);" />
146 <label for="selectToggle">select road</label>
149 <input type="radio" name="type" value="selectPlat" id="selectToggle" onclick="toggleControl(this);" checked=checked />
150 <label for="selectToggle">select polygon</label>