Question

I’ve plotted features onto the map from a geojson returned by GeoDjango. I now want to display a list of these features individually. If one is clicked, the map will center in on that particular point and show a popup with some details. A good example would be GoogleMaps, where on the side you have a list of places and clicking on any one of them will show a popup in the map corresponding to that particular place.

This post suggested that one should create an eventListener, so I have tried this but to no avail: Link

I’m not sure how to tie these components together. The below code doesn’t do anything once a link is clicked. The href is also confusing because it checks my view for a url pattern, so I threw in a void(0) to avoid that.

<div id="place-list"></div>
<div id="map"></div>

// ... code that reads a geoJSON and outputs features
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(vectorLayer);
vectorLayer.addFeatures(features);

// Build the clickable list of features
var list = "";
for (var i=0, len=features.length; i  len; i++) {
        // This does not work?
        list = list + "<a href=\"javascript:void(0);\""+"onclick=\"selectFeature("+i+");\">"+features[i].attributes["address"]+"</a><br/>";
}

    $("#place-list").append(list);  

    var info;
    function selectFeature(i) {
        feature = features[i];
        info = new OpenLayers.Control.SelectFeature(
            vectorLayer, 
            {
                eventListeners: {
                    getfeaturesinfo: function(event) {
                        map.addPopup(new OpenLayers.Popup.FramedCloud(
                            feature.id,
                            feature.lonlat,
                            null,
                            event.text,
                            null,
                            true
                        ));
                    }
                }
            }
        );

    }
    map.addControl(info);
    info.activate();

Answer 1

I was able to figure out my problem. I had to create an OpenLayers.Control.Panel which held my links, then add that to my map. For each of the feature objects, I created and linked an eventlistener to each with its id.

And here’s a great example of how that’s done: OpenLayers Eventhandler example!