1 /** 2 * @fileOverview 3 * Copyright (c) 2013 Regione Autonoma della Sardegna 4 * Published under the GPL license.<br> 5 * See <a href="https://sardegnageoportale.it/webgis/license.txt">https://sardegnageoportale.it/webgis/license.txt</a> 6 * for the full text of the license. 7 * @version 0.1 8 */ 9 10 /** 11 * @include OpenLayers/Control/OverviewMap.js 12 */ 13 14 /** 15 * @namespace framework.widgets 16 */ 17 Ext.namespace('framework.widgets'); 18 19 /** 20 * A panel showing overview map control of the OpenLayers library (Class OpenLayers.Control.OverviewMap). 21 * This control creates a small overview map, useful to display the 22 * extent of a zoomed map and your main map and provide additional 23 * navigation options to the User. 24 * This implementation, by default, place the panel, with the overview map control, in 25 * the lower right corner of the main map, without any spacing and with a body transparency. 26 * This configuration is obtained by the use of a style sheet. 27 * By default the panel is collapsed and collapsible, and its height and width are 180px x 150px. 28 * You can pass a custom layer as a base map to show in the overview map control. 29 * @name_ PanelMapOverview 30 * @class A panel showing overview map control of the OpenLayers library 31 * @constructor 32 * @extends <a target="_blank" href="http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel">Ext.Panel</a> 33 */ 34 framework.widgets.PanelMapOverview = Ext.extend(Ext.Panel, 35 /** 36 * @lends framework.widgets.PanelMapOverview.prototype 37 */ 38 { 39 /** 40 * An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be 41 * useful for adding customized styles to the component or any of its children using standard CSS rules. 42 * @public 43 * @type String 44 */ 45 cls: "panelMapOverview", 46 47 /** 48 * Come from Ext.Panel. 49 * <code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to 50 * <code>false</code>). 51 * @public 52 * @type boolean 53 */ 54 collapsed: true, 55 56 /** 57 * Come from Ext.Panel. 58 * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into 59 * the header tool button area, false to keep the panel statically sized with no button (defaults to false). 60 * @public 61 * @type boolean 62 */ 63 collapsible: true, 64 65 /** 66 * Come from Ext.BoxComponent. 67 * The height of this component in pixels (defaults to auto). 68 * <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. 69 * @public 70 * @type number 71 */ 72 height: 180, 73 74 /** 75 * Specifico per SardegnaMappe: consente di specificare un id diverso per il 76 * contenitore della mappa di overview 77 * 78 */ 79 mapControlContainerId:null, 80 81 82 /** 83 * Come from Ext.Component. 84 * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element 85 * content (defaults to ''). The HTML content is added after the component is rendered, 86 * so the document will not contain this HTML at the time the {@link #render} event is fired. 87 * This content is inserted into the body <i>before</i> any configured {@link #contentEl} is appended. 88 * @public 89 * @type String 90 */ 91 html: '<div id="overviewmapcontrolcontainer"/>', 92 93 94 /** 95 * {Array(<OpenLayers.Layer>)} Ordered list of layers in the overview map. 96 * If none are sent at construction, the layer called ``basic`` of the WMS service from the URL 97 * ``http://vmap0.tiles.osgeo.org/wms/vmap0``. 98 * @public 99 * @type Array(<OpenLayers.Layer>) 100 */ 101 layersOverview: null, 102 103 /** 104 * The ratio of the overview map resolution to the main map 105 * resolution at which to zoom farther in on the overview map. 106 * @public 107 * @type float 108 */ 109 maxRatio: 512, 110 111 /** 112 * The ratio of the overview map resolution to the main map 113 * resolution at which to zoom farther out on the overview map. 114 * @public 115 * @type float 116 */ 117 minRatio: 8, 118 119 /** 120 * The max resolution of the overview map 121 * @public 122 * @type float 123 */ 124 maxResolution: 512, 125 126 /** 127 * The max extent of the overview map 128 * @public 129 * @type Array 130 */ 131 maxExtent: [1426638, 4301311, 1570229, 4573602.5], 132 133 /** 134 * The min resolution of the overview map 135 * @public 136 * @type float 137 */ 138 minResolution: 8, 139 140 /** 141 * Come from Ext.Panel. 142 * The title text to be used as innerHTML (html tags are accepted) to display in the panel 143 * <code>{@link #header}</code> (defaults to ''). When a <code>title</code> is specified the 144 * <code>{@link #header}</code> element will automatically be created and displayed unless 145 * {@link #header} is explicitly set to <code>false</code>. If you do not want to specify a 146 * <code>title</code> at config time, but you may want one later, you must either specify a non-empty 147 * <code>title</code> (a blank space ' ' will do) or <code>header:true</code> so that the container 148 * element will get created. 149 * @public 150 * @type String 151 */ 152 title: "Overview", 153 154 /** 155 * Come from Ext.BoxComponent. 156 * The width of this component in pixels (defaults to auto). 157 * <b>Note</b> to express this dimension as a percentage or offset see {@link Ext.Component#anchor}. 158 * @public 159 * @type Number 160 */ 161 width: 150, 162 163 /** 164 * It initial the component invoking the namesake method of the superclass register a new, 165 * internal event listener, which we'll use to call (once) the local method onAfterLayout. 166 * @private 167 */ 168 initComponent: function(){ 169 if (this.mapControlContainerId !== null){ 170 this.html ='<div id="' + this.mapControlContainerId + '"/>'; 171 }else{ 172 this.mapControlContainerId = "overviewmapcontrolcontainer"; 173 } 174 framework.widgets.PanelMapOverview.superclass.initComponent.call(this); 175 176 this.addListener({ 177 afterlayout:{ 178 fn: this.onAfterLayout, 179 single: true 180 } 181 }); 182 }, 183 184 185 /** 186 * It executes the following steps: 187 * get the instance of the map object of the Gxp.Viewer instance that will host this PanelMapOverview; 188 * assign the default value to the property layersOverview, if the user has not provided a custom value; 189 * instantiate the overview map control and assign it to the map; 190 * insert the component in the div overviewmapcontrolcontainer that represents the body of the panel. 191 * @private 192 */ 193 onAfterLayout: function(){ 194 var mapPanel = this.findParentBy(function(cmp) { 195 return cmp instanceof GeoExt.MapPanel; 196 }); 197 198 var map = mapPanel.map; 199 var mapOpt; 200 201 if (map) { 202 if (this.layersOverview == null) { 203 this.layersOverview = [new OpenLayers.Layer.WMS( "OpenLayers WMS", 204 "http://vmap0.tiles.osgeo.org/wms/vmap0", 205 {layers: 'basic'} )]; 206 mapOpt = { 207 layers: this.layersOverview 208 }; 209 } else { 210 mapOpt = { 211 projection: map.projection, 212 units: map.units, 213 maxResolution: this.maxResolution, 214 minResolution: this.minResolution, 215 maxExtent: this.maxExtent, 216 minRatio: this.minRatio, 217 maxRatio: this.maxRatio, 218 layers: this.layersOverview 219 }; 220 } 221 222 var myEl = new Ext.Element(document.createElement('div')); 223 224 var overviewMapCtrl = new OpenLayers.Control.OverviewMap( { 225 maximized: true, 226 id: this.mapControlContainerId + '_map', 227 div:myEl, 228 size: { 229 h: this.height - 27, 230 w: this.width - 2 231 }, 232 mapOptions: mapOpt 233 }); 234 235 236 237 map.addControl(overviewMapCtrl); 238 Ext.get(this.mapControlContainerId).appendChild(myEl); 239 } 240 } 241 242 }); 243 244 /** api: xtype = framework_panelmapoverview */ 245 Ext.reg('framework_panelmapoverview',framework.widgets.PanelMapOverview); 246 247 248 249