Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
up vote 3 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()));

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

use OpenLayers.Control.SelectFeature with hover:

        var make_hover= function(e) {
            vector.features[x].style.fillColor = "#00b4ff"; //Your Point

        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

Your Answer


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.