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}

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", 
                    null, true, onPopupClose);
        popup.maxSize=new OpenLayers.Size(500,400);
    feature.popup = popup;

function onFeatureUnselect(feature){    
        feature.popup = null;

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

            // here call a popup that permit your users to select one of the points clustered.
            // openPop(evt.feature.attributes.id);

With Leaflet, you can use the spiderfy plugin. this will show the two points separately on clicking.

demo: http://jawj.github.io/OverlappingMarkerSpiderfier-Leaflet/demo.html

code: https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet

  • 1
    Thanks for the replay... But I am asking on openlayers.. – Mohammed shafeek Jan 29 '14 at 4:02
  • well, in openlayers, you will have to use cluster, and on clicking on cluster, they will have to spread out. – neogeomat Jan 29 '14 at 4:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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