[GIS] How to display a popup for two points which have same longitude and latitude

openlayers-2

I have a vector layer with lots of POIs/Points. Some of the Points have same coordinates(Longitude,Latitude).

For Example:-

POINT A : {id:1,name:A,Geom:POINT(73.1545, 13.126)}

POINT B : {id:2,name:B,Geom:POINT(73.1545, 13.126)}

Current Situation:-

  1. I can only show popup with any one of the above Point's details.
  2. User can't able to see both POINTS on the map.

My Queries:-

  1. How to display popup with entire details of above two POINTS?
  2. How can we present/show these POINTS on the map?

This the select control I am using.

    var controls={};
    controls["select"] = new OpenLayers.Control.SelectFeature(LayerName,
                 {
                    multiple: false, hover: false, 
                    onSelect: onFeatureSelect, 
                    onUnselect: onFeatureUnselect}
                 );
    map.addControl(controls["select"]);
    controls["select"].activate();

On Selecting a feature below function will be called.

function onFeatureSelect(feature){
    var h = "", p=feature.attributes;
        h = "<table border='0' cellpadding='1' cellspacing='4' style='font-size:.8em;'>";
        for(var q in p){
            h += "<tr><th>"+q+"<td>:</td></th><td><p align='left'>" + p[q]+"</p></td></tr>";
        }
        h   +="</table>";
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
                    feature.geometry.getBounds().getCenterLonLat(),
                    null,
                    h,
                    null, true, onPopupClose);
        popup.backgroundColor='#FFFFFF';
        popup.autoSize=true;
        popup.maxSize=new OpenLayers.Size(500,400);
        popup.setBorder('1px');
        popup.panMapIfOutOfView=true;
    feature.popup = popup;
        map.addPopup(popup);
}

function onFeatureUnselect(feature){    
    if(feature.popup){      
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
}

Best Answer

you have to use clustering.

You just have to cluster the two same points and write some code to let your users select one of them by showing an html popup. That page shows you how to do that: http://www.freelabs.it/aggregazione-di-dati-data-clustering-con-openlayers/

It's in Italian, but you only need to copy the code. You have to change distance and threshold to fit your interest (distance:1, threshold:2, so every time there are 2 or more points with the same coordinates, it will show the clustered point).

Inside your vectorLayer initialization, add 

eventListeners:{
        'featureselected':function(evt){                
            // here call a popup that permit your users to select one of the points clustered.
            // openPop(evt.feature.attributes.id);
        },
Related Question