OpenLayers OpenLayers

Changeset 6101

Show
Ignore:
Timestamp:
02/08/08 09:00:09 (1 year ago)
Author:
euzuro
Message:

add ambercloud popup. make framedPopups example showcase both of them.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/euzuro/pop/examples/framedPopups.html

    r6098 r6101  
    1414        var map; 
    1515        var layer, markers; 
    16         var feature, marker, popup; 
    17         var initialDecoration, backToInitDecoration; 
     16        var cloudFeature, cloudMarker, cloudPopup; 
     17        var amberFeature, amberMarker, amberPopup; 
    1818         
    1919        function init(){ 
    …… 
    2121 
    2222            layer = new OpenLayers.Layer.WMS(  
    23                "OpenLayers WMS",  
     23                "OpenLayers WMS",  
    2424                "http://labs.metacarta.com/wms/vmap0",  
    2525                {layers: 'basic'}  
    …… 
    3333            map.setCenter(new OpenLayers.LonLat(0, 0), 3); 
    3434 
    35             addMarker(); 
    36              
    37             initialDecoration = OpenLayers.Popup.FramedCloud.prototype.bubble; 
     35            addMarkers(); 
    3836        } 
    3937         
    40         function addMarker() { 
    41             ll = new OpenLayers.LonLat(0,0); 
    42             feature = new OpenLayers.Feature(layer, ll);  
     38        function addMarkers() { 
    4339 
    44             marker = feature.createMarker(); 
    45             marker.events.register("mousedown", marker, mousedown); 
    46             markers.addMarker(marker); 
     40            var ll = new OpenLayers.LonLat(-10,-10); 
     41            cloudFeature = new OpenLayers.Feature(layer, ll);  
     42            cloudFeature.popupClass = OpenLayers.Popup.FramedCloud; 
     43            cloudFeature.data.popupContentHTML = "Lorem Ipsum is simply dummy text of the printing and <br/>typesetting industry. Lorem <br/>Ipsum has been the <br/>industry's standard dummy text <br/>ever since the 1500s, when <br/>an unknown printer took a galley of <br/>type and scrambled it to make a type specimen book. It has <br/>survived not only five centuries, but also <br/>the leap into electronic typesetting, <br/>remaining <br/>essentially <br/>unchanged. It was popularised in <br/>the 1960s with <br/>the <br/>release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop <br/>publishing software like Aldus PageMaker including versions of Lorem Ipsum."; 
     44             
     45            cloudMarker = cloudFeature.createMarker(); 
     46            cloudMarker.events.register( 
     47                "mousedown", cloudFeature, mousedown 
     48            ); 
     49            markers.addMarker(cloudMarker); 
     50 
     51            ll = new OpenLayers.LonLat(10,10); 
     52            amberFeature = new OpenLayers.Feature(layer, ll);  
     53            amberFeature.popupClass = OpenLayers.Popup.AmberCloud; 
     54            amberFeature.data.popupContentHTML = "Message: Hi all, I would love some advice. My sister and <br/>I are planning a trip to Providenciales, but have found many of the beautiful hotels, condos, and <br/>villas to be beyond our limited price range. So, we'<br/>ve come up with a hairbrained scheme: we'<br/>ll stay at Club Med (for only $749 per person for 7 <br/>nights) but spend most of our time (and many meals) away from the summer <br/>camp campus. Do you think this is a good option? Or <br/>would we do better just to stay in the Comfort Suites? We're most interested in <br/>snorkeling and lounging on the sand in beach chairs. Would <br/>we have to walk far from Club Med to reach the best Grace <br/>Bay snorkeling spots? Is it feasible to walk to good restaurants from Club Med<br/>? We certainly don't want to be stuck there! Many thanks <br/>in advance for your help!!!"; 
     55            amberMarker = amberFeature.createMarker(); 
     56            amberMarker.events.register( 
     57                "mousedown", amberFeature, mousedown 
     58            ); 
     59            markers.addMarker(amberMarker); 
    4760        } 
    4861         
    4962        function mousedown(evt) { 
    50              // check to see if the popup was hidden by the close box 
    51              // if so, then destroy it before continuing 
    52             if ((popup != null) && (!popup.visible())) { 
    53                 removePopup(); 
     63 
     64            if (this.popup != null) { 
     65                map.removePopup(this.popup); 
     66                this.popup.destroy(); 
     67                this.popup = null; 
    5468            } 
    55  
    56             if (popup == null) { 
    57  
    58                 var contentHTML =  
    59                      "<a href='http://www.somethingconstructive.net' target='_blank'>click me</a><br />" + 
    60                      "<img src='http://www.openlayers.org/images/OpenLayers.trac.png' /><br />" +  
    61                      "OpenLayers rocks !", 
    62                       
    63                 popup = new OpenLayers.Popup.FramedCloud("chicken",  
    64                      feature.lonlat, 
    65                      new OpenLayers.Size(200, 200), 
    66                      contentHTML, 
    67                      marker.icon, 
    68                      true); 
    69                                           
    70                 markers.map.addPopup(popup); 
    71             } else { 
    72                 removePopup(); 
    73             } 
     69             
     70            this.popup = this.createPopup(true); 
     71            map.addPopup(this.popup); 
     72            this.popup.show(); 
    7473            OpenLayers.Event.stop(evt); 
    7574        }         
    7675 
    77         /** 
    78          * @param {Event} evt 
    79          */ 
    80         function onPopupMouseDown(evt) { 
    81             removePopup(); 
    82             OpenLayers.Event.stop(evt); 
    83         } 
    84  
    85         function removePopup() { 
    86             markers.map.removePopup(popup); 
    87             popup.destroy(); 
    88             popup = null; 
    89         } 
    90  
    91         function changeDecoration() { 
    92             if (popup != null) { 
    93                 removePopup() 
    94             } 
    95              
    96             if (backToInitDecoration) { 
    97                 OpenLayers.Popup.FramedCloud.prototype.bubble = initialDecoration; 
    98                 backToInitDecoration = false; 
    99             } else { 
    100                 OpenLayers.Popup.FramedCloud.prototype.bubble = { 
    101                     image: { 
    102                         src: OpenLayers.Util.getImagesLocation() + 'popup_orange.png', 
    103                         size: new OpenLayers.Size(598, 588) 
    104                     }, 
    105                     minSize: new OpenLayers.Size(105, 10), 
    106                     margin: new OpenLayers.Bounds(5, 5, 5, 5), 
    107                     padding: [15, 26, 30, 40], 
    108                     relativePosition: OpenLayers.Position.BOTTOM_LEFT, 
    109                     offset: new OpenLayers.Pixel(0, -10), 
    110                     blocks: [ 
    111                         { // top-left 
    112                             size: ['auto', 'auto'], 
    113                             anchor: [0, 19, 29, 0], 
    114                             position: new OpenLayers.Pixel(0, 0) 
    115                         }, 
    116                         { //top-right 
    117                             size: [19, 'auto'], 
    118                             anchor: [0, 0, 29, null], 
    119                             position: new OpenLayers.Pixel(-579, 0) 
    120                         }, 
    121                         { //bottom-right 
    122                             size: [19, 29], 
    123                             anchor: [null, 0, 0, null], 
    124                             position: new OpenLayers.Pixel(-579, -559) 
    125                         }, 
    126                         { // stem 
    127                             size: ['auto', 29], 
    128                             anchor: [null, 19, 0, 0], 
    129                             position: new OpenLayers.Pixel(0, -559) 
    130                         } 
    131                     ] 
    132                 }; 
    133                 backToInitDecoration = true; 
    134             } 
    135         } 
    13676    </script> 
    13777  </head> 
    …… 
    14282  </div> 
    14383  <p id="shortdesc"> 
    144   All kinds of ways to create and interact with Popups. 
     84      All kinds of ways to create and interact with Popups. 
    14585  </p> 
    14686 
    14787  <div id="map"></div> 
    14888    <div id="docs"> 
    149   Detailed description of this example needs to be written.<br /> 
     89      Detailed description of this example needs to be written.<br /> 
    15090    <a href="javascript:changeDecoration();void(0)" >change popup decoration</a>  
    15191    You'll need to reopen the popup to see it rendered differently.<br /> 

  • sandbox/euzuro/pop/lib/OpenLayers.js

    r6098 r6101  
    120120            "OpenLayers/Popup/Framed.js", 
    121121            "OpenLayers/Popup/FramedCloud.js", 
     122            "OpenLayers/Popup/AmberCloud.js", 
    122123            "OpenLayers/Feature.js", 
    123124            "OpenLayers/Feature/Vector.js",