Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm still sort of new to openlayers, but I've been able to set up a map which reads in a KML, loops through the different regions contained therein, and draws those polygons on a vector layer overtop of an OSM layer. This all works fine until I try to add a control. All I want to do is trigger an function when the polygon is clicked. For testing purposes, right now I'm just trying to trigger an alert.
The applicable pieces of my code are below:

function onFeatureSelect(feature){
    alert("boom");
}

function onFeatureUnselect(feature){
    alert("unBoom");
}
var selectControl;
map = new OpenLayers.Map(divName, {
    controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Attribution()],
    projection: googProj,
    units: 'm',
    maxResolution: 156543.0399,
    numZoomLevels: 10
});
var layerOSM = new OpenLayers.Layer.OSM();
map.addLayer(layerOSM);
var layerVector = new OpenLayers.Layer.Vector("KML Regions");

$.each(rPoly, function(){  //Looping through the data
    var feature_polygon = new OpenLayers.Feature.Vector( //We'll make a polygon from a linear ring object, which consists of points
new OpenLayers.Geometry.Polygon(new OpenLayers.Geometry.LinearRing(this)), {
        "rName": thisR
    }, {
        'fillColor': thisC,
        'strokeWidth': borderWidth,
        'strokeColor': borderColor,
        'fillOpacity': thisO
    });
    layerVector.addFeatures([feature_polygon]);
});

map.addLayer(layerVector);
selectControl = new OpenLayers.Control.SelectFeature(layerVector, {
    onSelect: onFeatureSelect,
    onUnselect: onFeatureUnselect
});
selectControl.activate();
map.addControl(selectControl);

Please remember that everything renders fine, I just can't get a function to fire when a polygon is clicked. Any help would be GREATLY appreciated. I'm getting pretty frustrated since this should be something fairly easy to do. Thanks.

UPDATE

When I try using getLeyersByName to get the "KML Regions" layer, it comes back empty. How is this possible since all of the polygons are visible? Could this be part of the issue?

UPDATE OF SHAME

What it actually turned out to be is that I had the loop creating the features on the layer running from a function and then I'd pass the fully rendered layer back. This was causing an error. So, in trying to simplify the code for the question, it seems like I fixed it if I would just paste it back in. The code would have died anyway due to the calls being out of sorts, so I marked that answer as solving the problem. Thanks everyone.

share|improve this question
    
Please provide the complete source such as the origin of rPoly when it gets read from KML. –  CaptDragon Jan 9 '12 at 14:39
add comment

2 Answers

up vote 2 down vote accepted

Switch last 2 statements. Add to map first, then activate.

share|improve this answer
    
Hmm. Didn't work. And actually when i try to throw an alert after I add the control, it doesn't fire. –  Munzilla Jan 8 '12 at 13:42
    
When I try using getLeyersByName to get the KML Regions layers, it comes back empty. How is this possible since all of the polygons are visible? –  Munzilla Jan 8 '12 at 13:44
2  
Your code looks fine and as I can see you provide only part of your application. Could you share link to your live example? Try to add fetures to layer manually instead parsing KML, for example: layerVector.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(10, 2)), new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(20, -10))]); Does onselect fires in this case? –  drnextgis Jan 8 '12 at 16:28
add comment

See this DEMO.

I've recreated your code in the DEMO and it works fine. Without the complete source it's hard to tell what is causing your problem. Your code was throwing an error and was easily fixed by doing what Vadim mentioned: "switch last 2 statements".

I have a feeling it has something to do with the source of rPoly(reading from KML). Because that's the only thing you left out and i had to supplement with a simple WKT read.

If you fire an alert and it's not showing it's because you're getting an error before then. Track it down with firebug or many alerts. like:

alert("here1");
...code...
alert("here2");
...code...
alert("here3");
...code...
alert("here4");
...code...
alert("here5");
...code...

Here's the complete source:

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <link rel="stylesheet" href="js/OpenLayers/theme/default/style.css" type="text/css" /> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
    <title>selectFeature Control</title> 
    <script src="js/OpenLayers/OpenLayers.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript">

        var map;

        function init() {

            var googProj = new OpenLayers.Projection("EPSG:4326");

            map = new OpenLayers.Map("map", {
                controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Attribution()],
                projection: googProj,
                units: 'm',
                maxResolution: 156543.0399,
                numZoomLevels: 10
            });
            var layerOSM = new OpenLayers.Layer.OSM();
            map.addLayer(layerOSM);

            map.setCenter(new OpenLayers.LonLat(0, 0), 0);



            function onFeatureSelect(feature) {
                alert("boom");
            }

            function onFeatureUnselect(feature) {
                alert("unBoom");
            }
            var selectControl;

            var format = new OpenLayers.Format.WKT({
                'internalProjection': map.baseLayer.projection,
                'externalProjection': googProj
            });

            var firstFeature = format.read("POLYGON((-97.734375 50.2734375, -101.953125 27.7734375, 103.359375 27.0703125, 104.765625 52.3828125, -97.734375 50.2734375))");
            var secondFeature = format.read("POLYGON((-102.65625 5.2734375, -109.6875 -42.5390625, 97.03125 -39.7265625, 99.140625 6.6796875, -102.65625 5.2734375))");


            var layerVector = new OpenLayers.Layer.Vector("KML Regions");

            layerVector.addFeatures([firstFeature, secondFeature]);

            map.addLayer(layerVector);

            selectControl = new OpenLayers.Control.SelectFeature(layerVector, {
                onSelect: onFeatureSelect,
                onUnselect: onFeatureUnselect
            });

            map.addControl(selectControl);

            selectControl.activate();


        }



    </script> 
  </head> 
  <body onload="init()"> 


<div id="map" class="smallmap"></div> 


  </body> 
</html> 
share|improve this answer
    
What it actually turned out to be is that I had the loop creating the features on the layer running from a function and then I'd pass the fully rendered layer back in. This was causing an error. So, in trying to simplify the code for the question, it seems like I fixed it if I would just paste it back in :-/ Not my greatest moment... –  Munzilla Jan 9 '12 at 17:28
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.