[OpenLayers-Users] One Popup situation resolved, New troubles w/ panmapifoutofview

Wed Feb 4 13:11:31 EST 2009

Hello group.  Thanks for all of the help so far.  I now have the popups
autosizing in the correct locations, but i can not get the panmap to work
with the popups.  I would like the map to refocus so the popup can be seen. 
You can see that i have the command in my code, but it isn't working.  Any
thoughts?

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Title here</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)
            }; 

// init the map w/options
            map = new OpenLayers.Map('map',options);

// load the google base maps
            var gmap = new OpenLayers.Layer.Google("Google Streets", 
            {'sphericalMercator': true});

            map.addLayer(gmap);

// define the style
            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"}});  

// create the json layer and add features to it
            var geoJSON = new OpenLayers.Format.GeoJSON();
            var world_borders = new
OpenLayers.Layer.Vector("test",{styleMap:styleMap, isBaseLayer: false, 
            projection: new OpenLayers.Projection("EPSG:4326"), 
            attribution: " www.x.com x "});
            world_borders.addFeatures(geoJSON.read(features));
            map.addLayer(world_borders);

// define controls
            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);
        	}

//creates popup window
        	function createPopup(feature){

         feature.lonlat = feature.geometry.getBounds().getCenterLonLat();

            if (popup == null) {

                 popup = new OpenLayers.Popup ("popup", feature.lonlat, new
OpenLayers.Size(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'>1:</th><td> " +
feature.attributes.Act_T + "</td></tr>" +
                    "<tr><th align='right'>2:</th><td> " +
feature.attributes.Act_G + "</td></tr>" +
                    "<tr><th align='right'>3:</th><td>" +
feature.attributes.Act_I + "</td></tr>" +
                    "<tr><th align='right'>4:</th><td> " +
feature.attributes.Act_C + " </td></tr>" +
                    "</table></div>";

                popup.setContentHTML(content);
		popup.setBackgroundColor("white");
                popup.setOpacity(.95);
                map.addPopup(popup);	
		popup.autoSize(true);
		popup.panMapIfOutOfView(true); 
          	} 

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

// remove popup - set to 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>

-- 
View this message in context: http://n2.nabble.com/One-Popup-situation-resolved%2C-New-troubles-w--panmapifoutofview-tp2270359p2270359.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.