Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Any suggestions on how to highlight a point on mouse over a line, I've read points from a javascript array, lines are drawn by using them and I want to highlight some points in that array by moving the mouse pointer through the line and near to that point. However, i'm stuck on actually how to get started with this.
This image contains the lines:

Any guidance and help is appreciated..!

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

At the time of line creation, I would loop through the vertices of the line, cloning the vertices and creating points out of them. Then I would style the point features to respond to your highlighting.

This should make it a lot easier.

Update per comment:

Here is a working demo.

enter image description here

The key here is creating point features from the line vertices:

var arrPoints = lineFeature.geometry.getVertices();
var arrPointFeatures = [];
for (var x in arrPoints) {
    arrPointFeatures.push(new OpenLayers.Feature.Vector(arrPoints[x].clone()));
}
pointLayer.addFeatures(arrPointFeatures);

Update #2 per comment:

If you don't want the default points to be seen initially, define the default render intent and set strokeColor: 'Transparent' & fillColor: 'Transparent'. You cannot use display:'none' because the point will not render.

Here is the NEW DEMO

enter image description here

var pointLayer = new OpenLayers.Layer.Vector("Points", {
    styleMap: new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            strokeColor: 'Transparent',
            fillColor: 'Transparent',
            pointRadius: 6
        }),
        "temporary": new OpenLayers.Style({
            strokeColor: '#0000cc',
            fillColor: '#0000cc',
            strokeOpacity: .8,
            strokeWidth: 1,
            fillOpacity: .3,
            cursor: "default",
            pointRadius: 6
        })
    })
});
share|improve this answer
    
can you please give some example, so that i can refer it. –  bios Aug 17 '12 at 3:51
    
@bios Please see my update. –  CaptDragon Aug 17 '12 at 14:12
    
Is it possible to hide all these points and show that only mouse over it. –  bios Aug 18 '12 at 4:18
    
@bios Please see my Update #2. –  CaptDragon Aug 20 '12 at 13:36
    
Thanks for your help. –  bios Aug 21 '12 at 3:53
add comment

use OpenLayers.Control.SelectFeature with hover:

        var make_hover= function(e) {
            console.log(e.feature.id);
            vector.features[x].style.fillColor = "#00b4ff"; //Your Point
            vectorLayer.redraw();
        };

        var highlightCtrl = new OpenLayers.Control.SelectFeature(vectorLayer, {
            hover: true,
            highlightOnly: true,               
            eventListeners: {
                beforefeaturehighlighted: another_Function,
                featurehighlighted: make_hover,
                featureunhighlighted: another_Function
            }
        });

i hope it helps you....

share|improve this answer
    
Is there anyway to add different colors on start and end coordinates in a kml –  bios Aug 16 '12 at 13:55
    
or is it possible to display kml coordinates as a point feature along with the actual kml path –  bios Aug 16 '12 at 14:07
    
check out this - openlayers kml with external styles here –  Aragon Aug 16 '12 at 14:11
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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