1 | /** |
---|
2 | * Copyright (c) 2008-2010 The Open Source Geospatial Foundation |
---|
3 | * |
---|
4 | * Published under the BSD license. |
---|
5 | * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text |
---|
6 | * of the license. |
---|
7 | */ |
---|
8 | |
---|
9 | /** api: example[legendpanel] |
---|
10 | * Legend Panel |
---|
11 | * ------------ |
---|
12 | * Display a layer legend in a panel. |
---|
13 | */ |
---|
14 | |
---|
15 | |
---|
16 | var mapPanel, legendPanel; |
---|
17 | |
---|
18 | Ext.onReady(function() { |
---|
19 | var map = new OpenLayers.Map({allOverlays: true}); |
---|
20 | map.addLayers([ |
---|
21 | new OpenLayers.Layer.WMS( |
---|
22 | "Tasmania", |
---|
23 | "http://demo.opengeo.org/geoserver/wms?", |
---|
24 | {layers: 'topp:tasmania_state_boundaries', format: 'image/png', transparent: true}, |
---|
25 | {singleTile: true}), |
---|
26 | new OpenLayers.Layer.WMS( |
---|
27 | "Cities and Roads", |
---|
28 | "http://demo.opengeo.org/geoserver/wms?", |
---|
29 | {layers: 'topp:tasmania_cities,topp:tasmania_roads', format: 'image/png', transparent: true}, |
---|
30 | {singleTile: true}), |
---|
31 | new OpenLayers.Layer.Vector('Polygons', {styleMap: new OpenLayers.StyleMap({ |
---|
32 | "default": new OpenLayers.Style({ |
---|
33 | pointRadius: 8, |
---|
34 | fillColor: "#00ffee", |
---|
35 | strokeColor: "#000000", |
---|
36 | strokeWidth: 2 |
---|
37 | }) }) }) |
---|
38 | ]); |
---|
39 | map.layers[2].addFeatures([ |
---|
40 | new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT( |
---|
41 | "POLYGON(146.1 -41, 146.2 -41, 146.2 -41.1, 146.1 -41.1)")) |
---|
42 | ]); |
---|
43 | map.addControl(new OpenLayers.Control.LayerSwitcher()); |
---|
44 | |
---|
45 | var addRemoveLayer = function() { |
---|
46 | if(mapPanel.map.layers.indexOf(water) == -1) { |
---|
47 | mapPanel.map.addLayer(water); |
---|
48 | } else { |
---|
49 | mapPanel.map.removeLayer(water); |
---|
50 | } |
---|
51 | }; |
---|
52 | |
---|
53 | var moveLayer = function(idx) { |
---|
54 | var layer = layerRec0.getLayer(); |
---|
55 | var idx = mapPanel.map.layers.indexOf(layer) == 0 ? |
---|
56 | mapPanel.map.layers.length : 0; |
---|
57 | mapPanel.map.setLayerIndex(layerRec0.getLayer(), idx); |
---|
58 | }; |
---|
59 | |
---|
60 | var toggleVisibility = function() { |
---|
61 | var layer = layerRec1.getLayer(); |
---|
62 | layer.setVisibility(!layer.getVisibility()); |
---|
63 | }; |
---|
64 | |
---|
65 | var updateHideInLegend = function() { |
---|
66 | layerRec0.set("hideInLegend", !layerRec0.get("hideInLegend")); |
---|
67 | }; |
---|
68 | |
---|
69 | var updateLegendUrl = function() { |
---|
70 | var url = layerRec0.get("legendURL"); |
---|
71 | layerRec0.set("legendURL", otherUrl); |
---|
72 | otherUrl = url; |
---|
73 | }; |
---|
74 | |
---|
75 | mapPanel = new GeoExt.MapPanel({ |
---|
76 | region: 'center', |
---|
77 | height: 400, |
---|
78 | width: 600, |
---|
79 | map: map, |
---|
80 | center: new OpenLayers.LonLat(146.4, -41.6), |
---|
81 | zoom: 7 |
---|
82 | }); |
---|
83 | |
---|
84 | // give the record of the 1st layer a legendURL, which will cause |
---|
85 | // UrlLegend instead of WMSLegend to be used |
---|
86 | var layerRec0 = mapPanel.layers.getAt(0); |
---|
87 | layerRec0.set("legendURL", "http://demo.opengeo.org/geoserver/wms?FORMAT=image%2Fgif&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&EXCEPTIONS=application%2Fvnd.ogc.se_xml&LAYER=topp%3Atasmania_state_boundaries"); |
---|
88 | |
---|
89 | // store the layer that we will modify in toggleVis() |
---|
90 | var layerRec1 = mapPanel.layers.getAt(1); |
---|
91 | |
---|
92 | // stores another legendURL for the legendurl button action |
---|
93 | var otherUrl = "http://www.geoext.org/trac/geoext/chrome/site/img/GeoExt.png"; |
---|
94 | |
---|
95 | // create another layer for the add/remove button action |
---|
96 | var water = new OpenLayers.Layer.WMS("Bodies of Water", |
---|
97 | "http://demo.opengeo.org/geoserver/wms?", |
---|
98 | {layers: 'topp:tasmania_water_bodies', format: 'image/png', transparent: true}, |
---|
99 | {singleTile: true}); |
---|
100 | |
---|
101 | legendPanel = new GeoExt.LegendPanel({ |
---|
102 | defaults: { |
---|
103 | labelCls: 'mylabel', |
---|
104 | style: 'padding:5px' |
---|
105 | }, |
---|
106 | bodyStyle: 'padding:5px', |
---|
107 | width: 350, |
---|
108 | autoScroll: true, |
---|
109 | region: 'west' |
---|
110 | }); |
---|
111 | |
---|
112 | new Ext.Panel({ |
---|
113 | title: "GeoExt LegendPanel Demo", |
---|
114 | layout: 'border', |
---|
115 | renderTo: 'view', |
---|
116 | height: 400, |
---|
117 | width: 800, |
---|
118 | tbar: new Ext.Toolbar({ |
---|
119 | items: [ |
---|
120 | {text: 'add/remove', handler: addRemoveLayer}, |
---|
121 | {text: 'movetop/bottom', handler: moveLayer }, |
---|
122 | {text: 'togglevis', handler: toggleVisibility}, |
---|
123 | {text: 'hide/show', handler: updateHideInLegend}, |
---|
124 | {text: 'legendurl', handler: updateLegendUrl} |
---|
125 | ] |
---|
126 | }), |
---|
127 | items: [legendPanel, mapPanel] |
---|
128 | }); |
---|
129 | }); |
---|