Changeset 1096

Timestamp:

08/08/06 14:20:24 (2 years ago)

Author:

euzuro

Message:

new layerswitcher, improved google layer, boxes layer, grid fix

Files:

• trunk/openlayers/art/layer-switcher-maximize.svg (copied) (copied from sandbox/euzuro/layerswitcher/art/layer-switcher-maximize.svg)
• trunk/openlayers/art/layer-switcher-minimize.svg (copied) (copied from sandbox/euzuro/layerswitcher/art/layer-switcher-minimize.svg)
• trunk/openlayers/examples/LayerSwitcher.html (copied) (copied from sandbox/euzuro/layerswitcher/examples/LayerSwitcher.html)
• trunk/openlayers/examples/boxes.html (copied) (copied from sandbox/euzuro/layerswitcher/examples/boxes.html)
• trunk/openlayers/examples/google.html (modified) (4 diffs)
• trunk/openlayers/img/layer-switcher-minimize.png (modified) (previous)
• trunk/openlayers/lib/OpenLayers.js (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Control/LayerSwitcher.js (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Control/LayerTabs.js (copied) (copied from sandbox/euzuro/layerswitcher/lib/OpenLayers/Control/LayerTabs.js)
• trunk/openlayers/lib/OpenLayers/Control/MouseToolbar.js (modified) (4 diffs)
• trunk/openlayers/lib/OpenLayers/Icon.js (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Layer.js (modified) (4 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/Boxes.js (copied) (copied from sandbox/euzuro/layerswitcher/lib/OpenLayers/Layer/Boxes.js)
• trunk/openlayers/lib/OpenLayers/Layer/GeoRSS.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/Google.js (modified) (8 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/Grid.js (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Layer/KaMap.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/Markers.js (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/Text.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/VirtualEarth.js (modified) (4 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/WFS.js (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/WMS.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/WMS/Untiled.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/WorldWind.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/Yahoo.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Map.js (modified) (7 diffs)
• trunk/openlayers/lib/OpenLayers/Marker (copied) (copied from sandbox/euzuro/layerswitcher/lib/OpenLayers/Marker)
• trunk/openlayers/lib/OpenLayers/Marker.js (modified) (2 diffs)
• trunk/openlayers/lib/OpenLayers/Marker/Box.js (copied) (copied from sandbox/euzuro/layerswitcher/lib/OpenLayers/Marker/Box.js)
• trunk/openlayers/tests/list-tests.html (modified) (1 diff)
• trunk/openlayers/tests/run-tests.html (modified) (2 diffs)
• trunk/openlayers/tests/test_Bounds.html (modified) (2 diffs)
• trunk/openlayers/tests/test_Control_LayerSwitcher.html (copied) (copied from sandbox/euzuro/layerswitcher/tests/test_Control_LayerSwitcher.html)
• trunk/openlayers/tests/test_Layer.html (modified) (1 diff)
• trunk/openlayers/tests/test_Layer_Google.html (modified) (2 diffs)
• trunk/openlayers/tests/test_Layer_Grid.html (modified) (1 diff)
• trunk/openlayers/tests/test_Layer_KaMap.html (modified) (1 diff)
• trunk/openlayers/tests/test_Layer_WMS.html (modified) (1 diff)
• trunk/openlayers/tests/test_Map.html (modified) (1 diff)

trunk/openlayers/examples/google.html

@@ -23 +23 @@
-        function init(){
-            map = new OpenLayers.Map( $('map') );
-
+, {type: G_HYBRID_MAP }
-            map.addLayer(gmap);
-
@@ -31 +31 @@
-            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
-            map.addControl( new OpenLayers.Control.LayerSwitcher() );
+
-        }
-        
@@ -42 +43 @@
-            markers.removeMarker(marker);
-        }
-
+        
-    // -->
-
@@ -50 +51 @@
-    <h1>OpenLayers With Google Layer Example</h1>
-    <div id="map"></div>
-    <div style="background-color:green" onclick="add()"> click to add the marker to the map</div>
-    <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
-  </body>

trunk/openlayers/lib/OpenLayers.js

@@ -59 +59 @@
-        "OpenLayers/Icon.js",
-        "OpenLayers/Marker.js",
+        "OpenLayers/Marker/Box.js",
-        "OpenLayers/Popup.js",
-        "OpenLayers/Tile.js",
@@ -78 +79 @@
-        "OpenLayers/Layer/WMS/Untiled.js",
-        "OpenLayers/Layer/GeoRSS.js",
+        "OpenLayers/Layer/Boxes.js",
-        "OpenLayers/Popup/Anchored.js",
-        "OpenLayers/Popup/AnchoredBubble.js",
@@ -88 +90 @@
-        "OpenLayers/Control/Permalink.js",
-        "OpenLayers/Control/Scale.js",
-
+
+
-    ); // etc.
-

trunk/openlayers/lib/OpenLayers/Control/LayerSwitcher.js

@@ -2 +2 @@
- * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
- * text of the license. */
+
-// @require: OpenLayers/Control.js
+
-/** 
-* @class
-*/
-OpenLayers.Control.LayerSwitcher = Class.create();
-
-/** color used in the UI to show a layer is active/displayed
-*
-* @final
-* @type String 
-*/
-OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR = "darkblue";
-
-/** color used in the UI to show a layer is deactivated/hidden
-*
-* @final
-* @type String 
-*/
-OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR = "lightblue";
-
-
-OpenLayers.Control.LayerSwitcher.prototype = 
-  Object.extend( new OpenLayers.Control(), {
-
-    /** @type String */
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    /**
-    * @constructor
-    */
-    initialize: function(options) {
-        this.activeColor = OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR;
-        this.nonActiveColor = OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR;
-        this.backdrops = [];
-        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+    },
+
+    /** 
+     * @param {OpenLayers.Map} map
+     */
+    setMap: function(map) {
+        OpenLayers.Control.prototype.setMap.apply(this, arguments);
+
+        this.map.events.register("addlayer", this, this.redraw);
+        this.map.events.register("changelayer", this, this.redraw);
+        this.map.events.register("removelayer", this, this.redraw);
+        this.map.events.register("changebaselayer", this, this.redraw);
-    },
-
@@ -50 +64 @@
-    */  
-    draw: function() {
-        // initialize our internal div
-        OpenLayers.Control.prototype.draw.apply(this);
-
+        // create layout divs
+        this.loadContents();
+
+        // set mode to minimize
+        this.minimizeControl();
+        
+        // populate div with current info
+        this.redraw();    
+
+        return this.div;
+    },
+
+    /** Goes through and takes the current state of the Map and rebuilds the
+     *   control to display that state. Groups base layers into a radio-button
+     *   group and lists each data layer with a checkbox.
+     * 
+     * @returns A reference to the DIV DOMElement containing the control
+     * @type DOMElement
+     */  
+    redraw: function() {
+
+        //clear out previous layers 
+        this.baseLayersDiv.innerHTML = "";
+        this.baseLayerInputs = new Array();
+        
+        this.dataLayersDiv.innerHTML = "";
+        this.dataLayerInputs = new Array();
+        
+        for( var i = 0; i < this.map.layers.length; i++) {
+            var layer = this.map.layers[i];
+            var baseLayer = layer.isBaseLayer;
+
+            // only check a baselayer if it is *the* baselayer, check data
+            //  layers if they are visible
+            var checked = (baseLayer) ? (layer == this.map.baseLayer)
+                                      : layer.getVisibility();
+
+            // create input element
+            var inputElem = document.createElement("input");
+            inputElem.id = "input_" + layer.name;
+            inputElem.name = (baseLayer) ? "baseLayers" : layer.name;
+            inputElem.type = (baseLayer) ? "radio" : "checkbox";
+            inputElem.value = layer.name;
+            inputElem.checked = checked;
+            inputElem.layer = layer;
+            
+            // create span
+            var labelSpan = document.createElement("span");
+            labelSpan.innerHTML = layer.name;
+            labelSpan.style.verticalAlign = (baseLayer) ? "bottom" : "auto";
+            Event.observe(labelSpan, 
+                          "click", 
+                          this.onLabelClick.bindAsEventListener(inputElem));
+
+            // create line break
+            var br = document.createElement("br");
+
+            
+            var groupArray = (baseLayer) ? this.baseLayerInputs
+                                         : this.dataLayerInputs;
+            groupArray.push(inputElem);
+                                                 
+
+            var groupDiv = (baseLayer) ? this.baseLayersDiv
+                                       : this.dataLayersDiv;
+            groupDiv.appendChild(inputElem);
+            groupDiv.appendChild(labelSpan);
+            groupDiv.appendChild(br);
+
+        }
+
+        return this.div;
+    },
+
+    /** A label has been clicked, check or uncheck its corresponding input
+     * 
+     * @private
+     * 
+     * @param {Event} e
+     */
+    onLabelClick: function(e) {
+        this.checked = !this.checked;
+    },
+
+    /** Need to update the map accordingly whenever user clicks in either of
+     *   the layers.
+     * 
+     * @private
+     * 
+     * @param {Event} e
+     */
+    onLayerClick: function(e) {
+        this.updateMap();
+    },
+
+
+    /** Cycles through the loaded data and base layer input arrays and makes
+     *   the necessary calls to the Map object such that that the map's 
+     *   visual state corresponds to what the user has selected in the control
+     * 
+     * @private
+     */
+    updateMap: function() {
+
+        // set the newly selected base layer        
+        for(var i=0; i < this.baseLayerInputs.length; i++) {
+            var input = this.baseLayerInputs[i];   
+            if (input.checked) {
+                this.map.setBaseLayer(input.layer, true);
+            }
+        }
+
+        // set the correct visibilities for the overlays
+        for(var i=0; i < this.dataLayerInputs.length; i++) {
+            var input = this.dataLayerInputs[i];   
+            input.layer.setVisibility(input.checked, true);
+        }
+
+    },
+
+    /** Set up the labels and divs for the control
+     * 
+     * @param {Event} e
+     */
+    maximizeControl: function(e) {
+
+        //HACK HACK HACK - find a way to auto-size this layerswitcher
+        this.div.style.width = "20em";
+        this.div.style.height = "";
+
+        this.showControls(false);
+
+        if (e != null) {
+            Event.stop(e);                                            
+        }
+    },
+    
+    /** Hide all the contents of the control, shrink the size, 
+     *   add the maximize icon
+     * 
+     * @param {Event} e
+     */
+    minimizeControl: function(e) {
+
+        this.div.style.width = "0px";
+        this.div.style.height = "0px";
+
+//        this.div.style.backgroundColor = "transparent";
+
+        this.showControls(true);
+
+        if (e != null) {
+            Event.stop(e);                                            
+        }
+    },
+
+    /** Hide/Show all LayerSwitcher controls depending on whether we are
+     *   minimized or not
+     * 
+     * @private
+     * 
+     * @param {Boolean} minimize
+     */
+    showControls: function(minimize) {
+
+        this.maximizeDiv.style.display = minimize ? "" : "none";
+        this.minimizeDiv.style.display = minimize ? "none" : "";
+
+        this.layersDiv.style.display = minimize ? "none" : "";
+    },
+    
+    /** Set up the labels and divs for the control
+     * 
+     */
+    loadContents: function() {
+
+        //configure main div
-        this.div.style.position = "absolute";
-        this.div.style.top = "10px";
@@ -58 +248 @@
-        this.div.style.left = "";
-        this.div.style.fontFamily = "sans-serif";
-        this.div.style.color = "white";
-        this.div.style.fontWeight = "bold";
-        this.div.style.marginTop = "3px";
-        this.div.style.marginLeft = "3px";
-        this.div.style.marginBottom = "3px";
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-    
-    /** 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-    ignoreEvent: function(evt) {
-        Event.stop(evt);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-    /** @final @type String */
-    CLASS_NAME: "OpenLayers.Control.LayerSwitcher"
-});
-

trunk/openlayers/lib/OpenLayers/Control/MouseToolbar.js

@@ -86 +86 @@
-    defaultDblClick: function (evt) {
-        this.switchModeTo("pan");
+        this.performedDrag = false;
-        var newCenter = this.map.getLonLatFromViewPortPx( evt.xy ); 
-        this.map.setCenter(newCenter, this.map.zoom + 2);
@@ -96 +97 @@
-        if (!Event.isLeftClick(evt)) return;
-        this.mouseDragStart = evt.xy.clone();
+        this.performedDrag = false;
-        if (evt.shiftKey && this.mode !="zoombox") {
-            this.switchModeTo("zoombox");
@@ -218 +220 @@
-                    this.mouseDragStart = evt.xy.clone();
-            }
+            this.performedDrag = true;
-        }
-    },
@@ -245 +248 @@
-                break;
-            case "pan":
-
-
+
+
+
-        }
-        document.onselectstart = null;

trunk/openlayers/lib/OpenLayers/Icon.js

@@ -96 +96 @@
-        }
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-            }
-            var offsetPx = this.px.offset(this.offset);
-            OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, offsetPx);
-        }
+    },
+    
+    /** Hide or show the icon
+     * 
+     * @param {Boolean} display
+     */
+    display: function(display) {
+        this.imageDiv.style.display = (display) ? "" : "none"; 
-    },
-    

trunk/openlayers/lib/OpenLayers/Layer.js

@@ -23 +23 @@
-    map: null,
-    
-
+
+
+
+
+
+
+
+
-  // OPTIONS
-
@@ -136 +143 @@
-        //this function can be implemented by subclasses.
-    },
+
+    /**
+     */
+    reproject:function() {
+        //this function can be implemented by subclasses.
+    },
-    
-    /** Set the map property for the layer. This is done through an accessor
@@ -148 +161 @@
-  
-    /**
-     * @returns Whether or not the layer is a base layer. This should be 
-     *          determined individually by all subclasses. Default is false
-     * @type Boolean
-     */
-    isBaseLayer: function() {
-        //this function should be implemented by all subclasses.
-        return false;
-    },
-    
-    /**
-    * @returns Whether or not the layer is visible
-    * @type Boolean
@@ -166 +169 @@
-
-    /** 
-
-
-
+
+
+
+
-        if (visible != this.getVisibility()) {
-            this.div.style.display = (visible) ? "block" : "none";
-
-
-
-
-
-
+
+
+
+
-                }
+            }
+            if ((this.map != null) && 
+                ((noEvent == null) || (noEvent == false))) {
-                this.map.events.triggerEvent("changelayer");
-            }

trunk/openlayers/lib/OpenLayers/Layer/GeoRSS.js

@@ -11 +11 @@
-  Object.extend( new OpenLayers.Layer.Markers(), {
-
+    /** GeoRSS layer is never a base layer. 
+     * @type Boolean
+     */
+    isBaseLayer: false,
+    
-    /** store url of text file
-    * @type str */
@@ -42 +47 @@
-        OpenLayers.Layer.Markers.prototype.destroy.apply(this, arguments);
-    },
-
-
-
-
-
-
-
-
-
+
-    /**
-     * @param {?} ajaxRequest

trunk/openlayers/lib/OpenLayers/Layer/Google.js

@@ -38 +38 @@
-OpenLayers.Layer.Google.prototype = Object.extend( new OpenLayers.Layer(), {
-
+    
+    /** Google layer is always base layer
+     * 
+     * @type Boolean
+     */
+    isBaseLayer: true,
+    
-    /** @type Boolean */
-    isFixed: true,
@@ -43 +50 @@
-    /** @type GMap2 gmap stores the Google Map element */
-    gmap:null,
+
+    /** @type GMapType */
+    type: null,
-   
-    /** @type Boolean */
-    dragging:false,
+
+    /** @type Boolean */
+    dontListen:false,
-    
-  // OPTIONS
@@ -83 +96 @@
-        OpenLayers.Layer.prototype.setMap.apply(this, arguments);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-     * 
-     * @param {OpenLayers.Bounds} bounds
@@ -118 +125 @@
-                     (newZoom != currentZoom) ) {
-    
+                    this.dontListen = true;
-                    this.gmap.setCenter(this.getGLatLngFromOLLonLat(newCenter), 
-                                        this.getGZoomFromOLZoom(newZoom));
-
+
+
+
+
+
+
+
-                }
-            }
@@ -137 +151 @@
-        try {
-            // create GMap, hide nav controls
-
-
+ 
+    
-            // this causes the GMap to set itself to Map's center/zoom
-            this.moveTo();
-
+
+
-            // catch pans and zooms from GMap
-            GEvent.addListener(this.gmap, 
@@ -241 +256 @@
-     */
-    catchPanZoom: function(e) { 
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-    },
-    
@@ -339 +357 @@
-        var zoom = null;
-        if (gZoom != null) {
- - 1
+
-        }
-        return zoom;
@@ -354 +372 @@
-        var zoom = null; 
-        if (olZoom != null) {
- + 1
+
-        }