Question

I would like to give multiple polygons a different pop up window with data that I get from a database. This script already works for when there is a single polygon in the window.
This is where I take the data from the database:

var length = <?php echo count($locations); ?>;
<?php
//Tel het aantal plaatsen in de array en zet deze via json in een javascript array
for ($i=0; $i < count($locations); $i++) {
    ?>
    var counter = parseInt(<?php echo $i; ?>);
    title[counter] = <?php print json_encode($locations[$i]['Location']['title']); ?>;
    location_id[counter] = <?php print json_encode($locations[$i]['Location']['id']); ?>;
    address[counter] = <?php print json_encode($locations[$i]['Location']['address']); ?>;
    city[counter] = <?php print json_encode($locations[$i]['Location']['city']); ?>;
    coordinates[counter] = <?php print json_encode($polygon[$i]); ?>;
    <?php
}
?>

These are the functions I use to make Polygons etc. sorry for the dutch comment, but I hope someone can help me out with this

onFeatureSelect: function(feature) {
    if (title != null) {
        if (html.length > 1) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("Pop up",feature.geometry.getBounds().getCenterLonLat(),null,html[i],null, true, myLocations.onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);   
        } else {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("Pop up",feature.geometry.getBounds().getCenterLonLat(),null,html,null, true, myLocations.onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);   
        }
    }
}
/**
 * Bouw de HTML string op voor de pop up window
 **/
buildHTML: function(element) {
    html = '<table>' +
            '<tr>' +
                '<td>Locatie:</td>' +
                '<td>'+title+'</td>'+
                '<td rowspan="3" style="padding-left: 10px;">' +
                    '<a href="/locations/edit/'+location_id+'" title="Bewerken" ><div class="icon edit"></div></a><br/>' +
                    '<a href="/locations/view/'+location_id+'" title="Details" ><div class="icon view"></div></a>' +
                '</td>' +
            '</tr><tr>'+
                '<td>Adres:</td>'+
                '<td>'+address+'</td>' +
            '</tr><tr>'+
                '<td>Plaats:</td>'+
                '<td>'+city+'</td>'+
            '</tr>'+
        '</table>'; 
},
/**
 * Gooi de HTML strings in een array als het er meer zijn
 **/
buildMultipleHTML: function(element) {
    html = new Array();
    for(i=0;i < title.length; i++) {
        html[i] = '<table>' +
            '<tr>' +
                '<td>Locatie:</td>' +
                '<td>'+title[i]+'</td>'+
                '<td rowspan="3" style="padding-left: 10px;">' +
                    '<a href="/locations/edit/'+location_id[i]+'" title="Bewerken" ><div class="icon edit"></div></a><br/>' +
                    '<a href="/locations/view/'+location_id[i]+'" title="Details" ><div class="icon view"></div></a>' +
                '</td>' +
            '</tr><tr>'+
                '<td>Adres:</td>'+
                '<td>'+address[i]+'</td>' +
            '</tr><tr>'+
                '<td>Plaats:</td>'+
                '<td>'+city[i]+'</td>'+
            '</tr>'+
        '</table>';
    }
}
/**
 * Meerdere polygonen tekenen
 **/
drawMultiplePolygons: function(coordinates) {
    //Array site_points leegmaken
    site_points = new Array();
    for (j=0; j < coordinates.length; j++) {
        site_points[j] = new Array();
        for (i=0; i < coordinates[j][0].length; i++) {
            //Maak de punten aan met de OpenLayers, Geometry functie
            point = new OpenLayers.Geometry.Point(coordinates[j][1][i], coordinates[j][0][i]);
            //Zet de punten om in de projectie van openstreetmaps
            point.transform(
                new OpenLayers.Projection("EPSG:4326"),
                new OpenLayers.Projection("EPSG:900913")
            );
            //Zet de punten in een array
            site_points[j].push(point);
        }
        //Lineaire ring aanmaken met de OpenLayers functie
        linear_ring = new OpenLayers.Geometry.LinearRing(site_points[j]);
        //Polygoon aanmaken
        polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linear_ring]), null);
        //Polygoonvector maken
        myLayers.vector.addFeatures([polygonFeature]);
    }
}

Answer 1

This is the fix in the onFeatureSelect function:

var selectedFeature = myLayers.vector.selectedFeatures[0].clone();
                var identification;
                var i;
                var j;
                for (i = 0; i < tbMap.map.layers.length; i++) {
                    if (tbMap.map.layers[i].CLASS_NAME == "OpenLayers.Layer.Vector") {
                        for (j = 0; j < tbMap.map.layers[i].features.length; j++) {
                            if (selectedFeature.geometry.getBounds().bottom == tbMap.map.layers[i].features[j].geometry.bounds.bottom && selectedFeature.geometry.getBounds().top == tbMap.map.layers[i].features[j].geometry.bounds.top) {
                                identification = j;
                            } else {
                            }
                        }
                    }
                }
                popup = new OpenLayers.Popup.FramedCloud("Pop up",selectedFeature.geometry.getBounds().getCenterLonLat(),null,html[identification],null, true, tbLocations.onPopupClose);
                selectedFeature.popup = popup;
                tbMap.map.addPopup(popup);
            } else {
                var selectedFeature = myLayers.vector.selectedFeatures[0].clone();
                popup = new OpenLayers.Popup.FramedCloud("Pop up",selectedFeature.geometry.getBounds().getCenterLonLat(),null,html,null, true, tbLocations.onPopupClose);
                selectedFeature.popup = popup;
                tbMap.map.addPopup(popup);
            }