mouse drag on kml features with OpenLayers

Question

Link: http://www1.qhoach.com/

When you drag, this map is panned... But if you drag on KML features (icon with circle), nothing happens

Answer 1

First of all,in your application there are four level of maps including the vector layer you mentioned with circle icons in your question.

   0: "Đường Sá"         ||---> Overlay Tiles
   1: "Vệ Tinh"          ||---> Overlay Tiles
   2: "TMS Overlay"      ||---> Markers ~ Icons
   3: "KML"              ||---> Vector 

Analysis: Starting with zero to last one,only vector seems to be the last one,others stays as overlay tiles.In order to come this problem we have to focus on marker layer,namely features (icons).
As you have seen on map,click event for map has been triggered when you try to drag the map around.You can't drag because event registration is working for marker layer first not for the map.That means in order to drag the map,moving mouse(drag) after click must follow.Since you're trying this on vector layer,there is no chance to pass the event to overlay layers.

Solution:
I propose you two ways to achieve this bug-type problem.

Let this be the long way
There is a control in OpenLayers known as SelectFeature inherited from Handler.Feature.This control generally allows vector feature from a given layer on click on hover.Which means this handler can respond to mouse event related to any drawn features.Only callbacks are associated with features,needing one of them click.Now all we have to do is to fall click event back to as we pan for overlay tiles.

var selectFeat = new OpenLayers.Control.SelectFeature(
                     vector, {toggle: true, clickout:false});
    selectFeat.handlers['feature'].stopDown = false;
    selectFeat.handlers['feature'].stopUp = false;
    map.addControl(selectFeat);//instance of map
    selectFeat.activate();

Once this control is activated you have to ensure your layers to pass events through another layer.To do that,simply

layer.events.fallThrough = true;//both for vector and marker layers

After all these actions we made so far,one last thing left to do: That's switching the order of markers and kml layer.
And this should be the easiest way
That's z-index on layers.You can check in above sequence of layers that the layer which has highest id has also highest z-index.

layer.setZIndex(...any number...);

In addition to this solution,easy way allows only you to drag through map,when all sudden clicking features of icons may lost without long way,so it's your choice to leave them behind.

Answer 2

Mouse events do not want to propagate through an svg Vector overlay to layers underneath.

The solution above demands all marker HTML layers have higher zindex than all Vector SVG layers.

The following CSS provides a potential/partial work-around, propagating events through the svg element, but only where there is no vector elements within the svg overlay:

/** Hack so mouse events propagate(bubble) through svg elements, but not the 
images within svg */ 
.olLayerDiv svg {
    pointer-events: none;
}

.olLayerDiv svg * {
    pointer-events: auto;
}

Combine the above CSS while adding fallThrough:true to all OpenLayers events objects within maps, layers, and controls.

// map events
var map = new OpenLayers.Map(div, { fallThrough:true } );

// layer events
var lvec = new OpenLayers.Layer.Vector( .... );
lvec.events.fallThrough = true
map.addLayers([lvec])

// all map controls
var ctrl = new OpenLayers.Control.SelectFeature( lvec, {... 
     fallThrough: true, autoActivate:true });
map.addControl( ctrl )