[OpenLayers-Users] Ancored Popup Autosize troubles

Mon Jan 26 20:40:10 EST 2009

Hello list.  I have my map just about where I need it but the anchored popups
are giving me a hard time.  I have tried to include the autosize command
with little luck.  Any thoughts?

Regards-WS

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>World Map</title>
    <style type="text/css">
        #map {
            width: 1000px;
            height: 600px;
            border: 1px solid black;
        }
    </style>

    <script
src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script type="text/javascript"
src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript" src="data/world_borders.js"></script>
    <script type="text/javascript">
        var map;
        var popup;

        function init(){

            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                maxResolution: 156543.0339,
                numZoomLevels: 10,

                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34)
            }; 

            map = new OpenLayers.Map('map',options);

            var gmap = new OpenLayers.Layer.Google("Google Streets", 
            {
                'sphericalMercator': true
            });

            map.addLayer(gmap);

            var colors =
["#7d0000","#be0b00","#e65100","#ff9700","#fcc900"];

            var ranges = [15,30,45,60,75]; 
            var context = {
                getColor: function(feature) {
                    for (var i = 0; i < ranges.length; i++){
                       if (feature.attributes.Act_T <= ranges[i]){
                           return colors[i];
                           //return "#99000d";
                       }
                    }
                }
            };

            var template = {
                fillColor: "${getColor}", // using context.getColor(feature)
                fillOpacity: ".75",
                strokeColor:"black",
                strokeWidth:1
            };

            var style = new OpenLayers.Style(template, {context: context});
            var styleMap = new OpenLayers.StyleMap({'default': style,
select: {fillColor: "333333"}, hover: {fillColor: "333333"}});  

            var geoJSON = new OpenLayers.Format.GeoJSON();
            var world_borders = new OpenLayers.Layer.Vector("Open Source
Activity",{styleMap:styleMap, isBaseLayer: false, 
            projection: new OpenLayers.Projection("EPSG:4326"), 
            attribution: " www.zzzzz.com zzzz "});
            world_borders.addFeatures(geoJSON.read(features));
            map.addLayer(world_borders);

            var select = new
OpenLayers.Control.SelectFeature(world_borders,{hover:true,clickFeature:createPopup,onUnselect:unSelect});
            map.addControl(select);
            select.activate();

            map.addControl(new OpenLayers.Control.MousePosition());
            var center = new OpenLayers.LonLat(0,30);

center.transform(map.displayProjection,map.getProjectionObject());
            map.setCenter(center, 2);
        	}

        	function createPopup(feature){
            if (popup != null) {
                map.removePopup(popup);
                popup.destroy();
                popup = null;
            }
            feature.lonlat = feature.geometry.getBounds().getCenterLonLat();

            if (popup == null) {

                popup = new OpenLayers.Popup.Anchored ("popup",
feature.lonlat, new OpenLayers.Size(200,200),
			 null, null, null, 
                           function () { 
                               map.removePopup( popup ); popup.destroy();
popup = null;
                           });

                var content = "<div>"+ feature.attributes.CNTRY_NAME +
"</div><br>" +
                    "<div><table>" +
                    "<tr><th align='right'>Overall Rank:</th><td> " +
feature.attributes.Act_T + "</td></tr>" +
                    "<tr><th align='right'>Government Rank:</th><td> " +
feature.attributes.Act_G + "</td></tr>" +
                    "<tr><th align='right'>Industry Rank:</th><td>" +
feature.attributes.Act_I + "</td></tr>" +
                    "<tr><th align='right'>Community Rank:</th><td> " +
feature.attributes.Act_C + " </td></tr>" +
                    "</table></div>";
                popup.setContentHTML(content);

                popup.setBackgroundColor("white");
                popup.setOpacity(1);
                popup.events.register('mousemove', popup, function (e)
{try{e.stopPropagation();}catch(e){}});
                map.addPopup(popup);

          	} else {
                map.removePopup(popup);
                popup.destroy();
                popup = null;
           	}

        	}

       	function unSelect(){
            if (popup != null) {
                map.removePopup(popup);
                popup.destroy();
                popup = null;
            }
        	}

    </script>
  </head>
  <body onload="init()">
    <center>
      <div id="map"></div>
    </center>
  </body>
</html>

any thoughts on disabling the scroll wheel would be great too!

Thanks
-- 
View this message in context: http://n2.nabble.com/Ancored-Popup-Autosize-troubles-tp2221855p2221855.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.