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..!


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
| 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

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....

| 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 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.