0

I have create open layer map and set markers in map using some dynamic latitude and longitude some latitude and longitude value are same so how open spider view when click on marker

   let path = this.props.waypts;

        path.map((lat,index)=>{
            let fill = new style.Fill({color:'rgba(255,255,255,1)'}),
            stroke = new style.Stroke({color:'rgba(0,0,0,1)'}),
            style1 = [
                new style.Style({
                    image: new style.Icon(({
                        scale: .9, 
                        opacity: 1,
                        rotateWithView: false, 
                        anchor: [0.5, 1],
                        anchorXUnits: 'fraction', 
                        anchorYUnits: 'fraction',
                        src: "https://img.icons8.com/metro/40/"+(this.props.color[index]).replace( /#/g, "" )+"/marker.png"
                    })),
                    zIndex: 5
                }),
                new style.Style({
                    image: new style.Circle({
                        radius: 6, 
                        fill: fill, 
                        stroke: stroke
                    }),
                    zIndex: 4
                })
            ];

            let abc = 'feature'+[index+1];               
            abc = new Feature({
                geometry: new geom.Point(path[index])
            });
            abc.setStyle(style1);
            sourceFeatures.addFeatures([abc]);
        })

        map.getView().fit(sourceFeatures.getExtent(), map.getSize());
Veera
  • 52
  • 6
  • If you are looking for something like this [OL Earthwake Example](https://openlayers.org/en/latest/examples/earthquake-clusters.html), then you need to use a Cluster source [OL API Cluster Doc](https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html). Is that what you mean with spider view?. – cabesuon Jan 25 '20 at 17:13
  • Spider view means when i click markers which same location that time spread all markers with connected line. – Veera Jan 29 '20 at 16:57

1 Answers1

0

Have a look at ol/interaction/SelectCluster in ol-ext. On select, cluster springs apart to reveal the features in it. See example online: https://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html

enter image description here

Viglino Jean-Marc
  • 1,371
  • 8
  • 6
  • This means a "spiderfy" effect on a clustered feature cannot be done with Open Layers 6 out of the box? It needs this external library? – nerdess Jun 27 '22 at 08:58