I did try both. If I could have figured it out, I wouldn't have asked again on this board. As you are well aware, the documentation is lacking for openlayers.
For me, this whole experience has been very trial and error... mostly error. I am very close to having this project done and I have learned a lot along the way. My career field is in GIS, not programming, and I am trying to break out of the proprietary mold. I am by no means an OL expert but I feel that I can tout the value of openlayers and other OS products to my GIS peers. This forum has been of enormous value an I hope that someone can help me out. here is the html.... <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&v=2&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("Open Source Activity",{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.panMapIfOutOfView=true; popup.setContentHTML(content); popup.setBackgroundColor("white"); popup.setOpacity(.95); map.addPopup(popup); popup.autoSize(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-tp2270359p2275217.html Sent from the OpenLayers Users mailing list archive at Nabble.com. _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users