OpenLayers OpenLayers

Changeset 6627

Show
Ignore:
Timestamp:
03/26/08 21:05:59 (10 months ago)
Author:
euzuro
Message:

instead of the hideous red div, lets replace all those fixed tests with a real image. now that they are almost exclusively images in the content, users will need a schema. i made a jpg that can sit as a backdrop that explains the matrix.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

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

    r6624 r6627  
    44    <style type="text/css"> 
    55        #map { 
    6             width: 800px; 
     6            width: 900px; 
    77            height: 500px; 
    88            border: 1px solid black; 
     9            background-color: blue; 
    910        } 
    1011    </style> 
    …… 
    7475            map = new OpenLayers.Map('map'); 
    7576 
    76             layer = new OpenLayers.Layer.WMS(  
    77                 "OpenLayers WMS",  
    78                 "http://labs.metacarta.com/wms/vmap0",  
    79                 {layers: 'basic'}  
    80             ); 
     77            layer = new OpenLayers.Layer.Image( 
     78                "popupMatrix",  
     79                "popupMatrix.jpg",  
     80                new OpenLayers.Bounds(-82.5,-71.5,97.5,67.5), 
     81                new OpenLayers.Size(1024,768) 
     82            ); 
    8183            map.addLayer(layer); 
    8284 
    …… 
    8587 
    8688            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    87             map.setCenter(new OpenLayers.LonLat(0, 0), 3); 
     89            map.zoomToMaxExtent(); 
    8890 
    8991            addMarkers(); 
    …… 
    101103            ll = new OpenLayers.LonLat(-55,20); 
    102104            popupClass = OpenLayers.Popup.Anchored; 
    103             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored</div>'  
     105            popupContentHTML = '<img src="small.jpg"></img>'; 
    104106            addMarker(ll, popupClass, popupContentHTML); 
    105107 
    …… 
    107109            var ll = new OpenLayers.LonLat(-50,20); 
    108110            popupClass = OpenLayers.Popup.Anchored; 
    109             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>closeBox</div>'  
     111            popupContentHTML = '<img src="small.jpg"></img>'; 
    110112            addMarker(ll, popupClass, popupContentHTML, true); 
    111113 
    …… 
    114116            ll = new OpenLayers.LonLat(-40,20); 
    115117            popupClass = AutoSizeAnchored; 
    116             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize</div>'  
     118            popupContentHTML = '<img src="small.jpg"></img>'; 
    117119            addMarker(ll, popupClass, popupContentHTML); 
    118120 
    …… 
    120122            ll = new OpenLayers.LonLat(-35,20); 
    121123            popupClass = AutoSizeAnchored; 
    122             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>closebox</div>'  
     124            popupContentHTML = '<img src="small.jpg"></img>'; 
    123125            addMarker(ll, popupClass, popupContentHTML, true); 
    124126 
    …… 
    127129            ll = new OpenLayers.LonLat(-25,20); 
    128130            popupClass = AutoSizeAnchoredMinSize; 
    129             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>minsize</div>'  
     131            popupContentHTML = '<img src="small.jpg"></img>'; 
    130132            addMarker(ll, popupClass, popupContentHTML); 
    131133 
    …… 
    133135            ll = new OpenLayers.LonLat(-20,20); 
    134136            popupClass = AutoSizeAnchoredMinSize; 
    135             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>minsize<br>closebox</div>'  
     137            popupContentHTML = '<img src="small.jpg"></img>'; 
    136138            addMarker(ll, popupClass, popupContentHTML, true); 
    137139 
    …… 
    140142            ll = new OpenLayers.LonLat(-10,20); 
    141143            popupClass = AutoSizeAnchoredMaxSize; 
    142             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>maxsize</div>'  
     144            popupContentHTML = '<img src="small.jpg"></img>'; 
    143145            addMarker(ll, popupClass, popupContentHTML); 
    144146 
    …… 
    146148            ll = new OpenLayers.LonLat(-5,20); 
    147149            popupClass = AutoSizeAnchoredMaxSize; 
    148             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>maxsize<br>closebox</div>'  
     150            popupContentHTML = '<img src="small.jpg"></img>'; 
    149151            addMarker(ll, popupClass, popupContentHTML, true); 
    150152 
    …… 
    220222            var ll = new OpenLayers.LonLat(-55,15); 
    221223            popupClass = OpenLayers.Popup.Anchored; 
    222             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>overflow</div>'  
     224            popupContentHTML = '<img src="small.jpg"></img>'; 
    223225            addMarker(ll, popupClass, popupContentHTML, false, true); 
    224226 
    …… 
    226228            var ll = new OpenLayers.LonLat(-50,15); 
    227229            popupClass = OpenLayers.Popup.Anchored; 
    228             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>closeBox<br>overflow</div>'  
     230            popupContentHTML = '<img src="small.jpg"></img>'; 
    229231            addMarker(ll, popupClass, popupContentHTML, true, true); 
    230232 
    …… 
    233235            ll = new OpenLayers.LonLat(-40,15); 
    234236            popupClass = AutoSizeAnchored; 
    235             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>overflow</div>'  
     237            popupContentHTML = '<img src="small.jpg"></img>'; 
    236238            addMarker(ll, popupClass, popupContentHTML, false, true); 
    237239 
    …… 
    239241            ll = new OpenLayers.LonLat(-35,15); 
    240242            popupClass = AutoSizeAnchored; 
    241             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>overflow<br>closebox</div>'  
     243            popupContentHTML = '<img src="small.jpg"></img>'; 
    242244            addMarker(ll, popupClass, popupContentHTML, true, true); 
    243245 
    …… 
    246248            ll = new OpenLayers.LonLat(-25,15); 
    247249            popupClass = AutoSizeAnchoredMinSize; 
    248             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>overflow<br>minsize</div>'  
     250            popupContentHTML = '<img src="small.jpg"></img>'; 
    249251            addMarker(ll, popupClass, popupContentHTML, false, true); 
    250252 
    …… 
    252254            ll = new OpenLayers.LonLat(-20,15); 
    253255            popupClass = AutoSizeAnchoredMinSize; 
    254             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>overflow<br>minsize<br>closebox</div>'  
     256            popupContentHTML = '<img src="small.jpg"></img>'; 
    255257            addMarker(ll, popupClass, popupContentHTML, true, true); 
    256258 
    …… 
    259261            ll = new OpenLayers.LonLat(-10,15); 
    260262            popupClass = AutoSizeAnchoredMaxSize; 
    261             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>overflow<br>maxsize</div>'  
     263            popupContentHTML = '<img src="small.jpg"></img>'; 
    262264            addMarker(ll, popupClass, popupContentHTML, false, true); 
    263265 
    …… 
    265267            ll = new OpenLayers.LonLat(-5,15); 
    266268            popupClass = AutoSizeAnchoredMaxSize; 
    267             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.Anchored<br>autosize<br>overflow<br>maxsize<br>closebox</div>'  
     269            popupContentHTML = '<img src="small.jpg"></img>'; 
    268270            addMarker(ll, popupClass, popupContentHTML, true, true); 
    269271 
    …… 
    340342            var ll = new OpenLayers.LonLat(-55,5); 
    341343            popupClass = OpenLayers.Popup.AnchoredBubble; 
    342             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble</div>'  
     344            popupContentHTML = '<img src="small.jpg"></img>'; 
    343345            addMarker(ll, popupClass, popupContentHTML, false); 
    344346 
    …… 
    346348            var ll = new OpenLayers.LonLat(-50,5); 
    347349            popupClass = OpenLayers.Popup.AnchoredBubble; 
    348             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>closebox</div>'  
     350            popupContentHTML = '<img src="small.jpg"></img>'; 
    349351            addMarker(ll, popupClass, popupContentHTML, true); 
    350352 
    …… 
    353355            ll = new OpenLayers.LonLat(-40,5); 
    354356            popupClass = AutoSizeAnchoredBubble; 
    355             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize</div>'  
     357            popupContentHTML = '<img src="small.jpg"></img>'; 
    356358            addMarker(ll, popupClass, popupContentHTML, false); 
    357359 
    …… 
    359361            ll = new OpenLayers.LonLat(-35,5); 
    360362            popupClass = AutoSizeAnchoredBubble; 
    361             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>closebox</div>'  
     363            popupContentHTML = '<img src="small.jpg"></img>'; 
    362364            addMarker(ll, popupClass, popupContentHTML, true); 
    363365 
    …… 
    366368            ll = new OpenLayers.LonLat(-25,5); 
    367369            popupClass = AutoSizeAnchoredBubbleMinSize; 
    368             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>minsize</div>'  
     370            popupContentHTML = '<img src="small.jpg"></img>'; 
    369371            addMarker(ll, popupClass, popupContentHTML, false); 
    370372 
    …… 
    372374            ll = new OpenLayers.LonLat(-20,5); 
    373375            popupClass = AutoSizeAnchoredBubbleMinSize; 
    374             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>minsize<br>closebox</div>'  
     376            popupContentHTML = '<img src="small.jpg"></img>'; 
    375377            addMarker(ll, popupClass, popupContentHTML, true); 
    376378 
    …… 
    379381            ll = new OpenLayers.LonLat(-10,5); 
    380382            popupClass = AutoSizeAnchoredBubbleMaxSize; 
    381             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>maxsize</div>'  
     383            popupContentHTML = '<img src="small.jpg"></img>'; 
    382384            addMarker(ll, popupClass, popupContentHTML, false); 
    383385 
    …… 
    385387            ll = new OpenLayers.LonLat(-5,5); 
    386388            popupClass = AutoSizeAnchoredBubbleMaxSize; 
    387             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>maxsize<br>closebox</div>'  
     389            popupContentHTML = '<img src="small.jpg"></img>'; 
    388390            addMarker(ll, popupClass, popupContentHTML, true); 
    389391 
    …… 
    460462            var ll = new OpenLayers.LonLat(-55,0); 
    461463            popupClass = OpenLayers.Popup.AnchoredBubble; 
    462             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>overflow</div>'  
     464            popupContentHTML = '<img src="small.jpg"></img>'; 
    463465            addMarker(ll, popupClass, popupContentHTML, false, true); 
    464466 
    …… 
    466468            var ll = new OpenLayers.LonLat(-50,0); 
    467469            popupClass = OpenLayers.Popup.AnchoredBubble; 
    468             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>overflow<br>closebox</div>'  
     470            popupContentHTML = '<img src="small.jpg"></img>'; 
    469471            addMarker(ll, popupClass, popupContentHTML, true, true); 
    470472 
    …… 
    473475            ll = new OpenLayers.LonLat(-40,0); 
    474476            popupClass = AutoSizeAnchoredBubble; 
    475             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>overflow</div>'  
     477            popupContentHTML = '<img src="small.jpg"></img>'; 
    476478            addMarker(ll, popupClass, popupContentHTML, false, true); 
    477479 
    …… 
    479481            ll = new OpenLayers.LonLat(-35,0); 
    480482            popupClass = AutoSizeAnchoredBubble; 
    481             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>overflow<br>closebox</div>'  
     483            popupContentHTML = '<img src="small.jpg"></img>'; 
    482484            addMarker(ll, popupClass, popupContentHTML, true, true); 
    483485 
    …… 
    486488            ll = new OpenLayers.LonLat(-25,0); 
    487489            popupClass = AutoSizeAnchoredBubbleMinSize; 
    488             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>overflow<br>minsize</div>'  
     490            popupContentHTML = '<img src="small.jpg"></img>'; 
    489491            addMarker(ll, popupClass, popupContentHTML, false, true); 
    490492 
    …… 
    492494            ll = new OpenLayers.LonLat(-20,0); 
    493495            popupClass = AutoSizeAnchoredBubbleMinSize; 
    494             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>overflow<br>minsize<br>closebox</div>'  
     496            popupContentHTML = '<img src="small.jpg"></img>'; 
    495497            addMarker(ll, popupClass, popupContentHTML, true, true); 
    496498 
    …… 
    499501            ll = new OpenLayers.LonLat(-10,0); 
    500502            popupClass = AutoSizeAnchoredBubbleMaxSize; 
    501             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>overflow<br>maxsize</div>'  
     503            popupContentHTML = '<img src="small.jpg"></img>'; 
    502504            addMarker(ll, popupClass, popupContentHTML, false, true); 
    503505 
    …… 
    505507            ll = new OpenLayers.LonLat(-5,0); 
    506508            popupClass = AutoSizeAnchoredBubbleMaxSize; 
    507             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.AnchoredBubble<br>autosize<br>overflow<br>maxsize<br>closebox</div>'  
     509            popupContentHTML = '<img src="small.jpg"></img>'; 
    508510            addMarker(ll, popupClass, popupContentHTML, true, true); 
    509511 
    …… 
    582584            var ll = new OpenLayers.LonLat(-55,-15); 
    583585            popupClass = OpenLayers.Popup.FramedCloud; 
    584             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud</div>'  
     586            popupContentHTML = '<img src="small.jpg"></img>'; 
    585587            addMarker(ll, popupClass, popupContentHTML, false); 
    586588 
    …… 
    588590            var ll = new OpenLayers.LonLat(-50,-15); 
    589591            popupClass = OpenLayers.Popup.FramedCloud; 
    590             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>closebox</div>'  
     592            popupContentHTML = '<img src="small.jpg"></img>'; 
    591593            addMarker(ll, popupClass, popupContentHTML, true); 
    592594 
    …… 
    595597            ll = new OpenLayers.LonLat(-40,-15); 
    596598            popupClass = AutoSizeFramedCloud; 
    597             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize</div>'  
     599            popupContentHTML = '<img src="small.jpg"></img>'; 
    598600            addMarker(ll, popupClass, popupContentHTML, false); 
    599601 
    …… 
    601603            ll = new OpenLayers.LonLat(-35,-15); 
    602604            popupClass = AutoSizeFramedCloud; 
    603             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>closebox</div>'  
     605            popupContentHTML = '<img src="small.jpg"></img>'; 
    604606            addMarker(ll, popupClass, popupContentHTML, true); 
    605607 
    …… 
    608610            ll = new OpenLayers.LonLat(-25,-15); 
    609611            popupClass = AutoSizeFramedCloudMinSize; 
    610             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>minsize</div>'  
     612            popupContentHTML = '<img src="small.jpg"></img>'; 
    611613            addMarker(ll, popupClass, popupContentHTML, false); 
    612614 
    …… 
    614616            ll = new OpenLayers.LonLat(-20,-15); 
    615617            popupClass = AutoSizeFramedCloudMinSize; 
    616             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>minsize<br>closebox</div>'  
     618            popupContentHTML = '<img src="small.jpg"></img>'; 
    617619            addMarker(ll, popupClass, popupContentHTML, true); 
    618620 
    …… 
    621623            ll = new OpenLayers.LonLat(-10,-15); 
    622624            popupClass = AutoSizeFramedCloudMaxSize; 
    623             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>maxsize</div>'  
     625            popupContentHTML = '<img src="small.jpg"></img>'; 
    624626            addMarker(ll, popupClass, popupContentHTML, false); 
    625627 
    …… 
    627629            ll = new OpenLayers.LonLat(-5,-15); 
    628630            popupClass = AutoSizeFramedCloudMaxSize; 
    629             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>maxsize<br>closebox</div>'  
     631            popupContentHTML = '<img src="small.jpg"></img>'; 
    630632            addMarker(ll, popupClass, popupContentHTML, true); 
    631633 
    …… 
    702704            var ll = new OpenLayers.LonLat(-55,-20); 
    703705            popupClass = OpenLayers.Popup.FramedCloud; 
    704             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>overflow</div>'  
     706            popupContentHTML = '<img src="small.jpg"></img>'; 
    705707            addMarker(ll, popupClass, popupContentHTML, false, true); 
    706708 
    …… 
    708710            var ll = new OpenLayers.LonLat(-50,-20); 
    709711            popupClass = OpenLayers.Popup.FramedCloud; 
    710             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>overflow<br>closebox</div>'  
     712            popupContentHTML = '<img src="small.jpg"></img>'; 
    711713            addMarker(ll, popupClass, popupContentHTML, true, true); 
    712714 
    …… 
    715717            ll = new OpenLayers.LonLat(-40,-20); 
    716718            popupClass = AutoSizeFramedCloud; 
    717             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>overflow</div>'  
     719            popupContentHTML = '<img src="small.jpg"></img>'; 
    718720            addMarker(ll, popupClass, popupContentHTML, false, true); 
    719721 
    …… 
    721723            ll = new OpenLayers.LonLat(-35,-20); 
    722724            popupClass = AutoSizeFramedCloud; 
    723             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>overflow<br>closebox</div>'  
     725            popupContentHTML = '<img src="small.jpg"></img>'; 
    724726            addMarker(ll, popupClass, popupContentHTML, true, true); 
    725727 
    …… 
    728730            ll = new OpenLayers.LonLat(-25,-20); 
    729731            popupClass = AutoSizeFramedCloudMinSize; 
    730             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>overflow<br>minsize</div>'  
     732            popupContentHTML = '<img src="small.jpg"></img>'; 
    731733            addMarker(ll, popupClass, popupContentHTML, false, true); 
    732734 
    …… 
    734736            ll = new OpenLayers.LonLat(-20,-20); 
    735737            popupClass = AutoSizeFramedCloudMinSize; 
    736             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>overflow<br>minsize<br>closebox</div>'  
     738            popupContentHTML = '<img src="small.jpg"></img>'; 
    737739            addMarker(ll, popupClass, popupContentHTML, true, true); 
    738740 
    …… 
    741743            ll = new OpenLayers.LonLat(-10,-20); 
    742744            popupClass = AutoSizeFramedCloudMaxSize; 
    743             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>overflow<br>maxsize</div>'  
     745            popupContentHTML = '<img src="small.jpg"></img>'; 
    744746            addMarker(ll, popupClass, popupContentHTML, false, true); 
    745747 
    …… 
    747749            ll = new OpenLayers.LonLat(-5,-20); 
    748750            popupClass = AutoSizeFramedCloudMaxSize; 
    749             popupContentHTML = '<div style="background-color:red; width:300px; height:200px">Popup.FramedCloud<br>autosize<br>overflow<br>maxsize<br>closebox</div>'  
     751            popupContentHTML = '<img src="small.jpg"></img>'; 
    750752            addMarker(ll, popupClass, popupContentHTML, true, true); 
    751753 
    …… 
    871873 
    872874        <!-- preloading these images so the autosize will work correctly --> 
     875        <img src="small.jpg" style="position:absolute; top:-5000px; left: -5000px"></img> 
    873876        <img src="wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img> 
    874877        <img src="widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img> 

  • sandbox/euzuro/pop/theme/default/style.css

    r6583 r6627  
    116116    overflow: hidden; 
    117117 
    118     background-color: green; 
     118    background-color: black; 
    119119}     
    120120.olControlNavToolbar {