shapeMouseEnter event on Map with Multiple GeoJSON Layers

[Perry]

I'm having trouble with the shapeMouseEnter event not firing on any layer but the last one added (top layer).  I have a background layer using the openmap.org, and then I have 2 GeoJSON layers.  These layers don't overlap, one is the US counties, and the other is all the other countries of the world.  The problem is that the shapeMouseEnter only gets triggered on the layer that was added last to the map.  I thought that the shapeMouseEnter event should fire for all layers with shapes.  Is this not correct?  Here is an example of my map definition:

var colors = ['#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'];

// create the map with the markers
$("#kendoMapCounty").kendoMap({
    center: [38.891033, -95.437500],//[30.268107, -155.744821],
    zoom: 4,
    controls: {
        attribution: false,
        navigator: false
    },
    wraparound: false,
    layers: [
    {
        type: "tile",
        urlTemplate: "//#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        subdomains: ["a", "b", "c"],
        attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
    },
    {
        type: "shape",
        dataSource: {
            type: "geojson",
            transport: {
                read: "/Resources/kendoui/GeoJSON/world_countries_and_us_counties.geo.json"
            }
        }
    },
    {
        type: "shape",
        dataSource: {
            type: "geojson",
            transport: {
                read: "/Resources/kendoui/GeoJSON/tl_2010_us_county10_simplified.json"
            }
        }
    },
    ],
    shapeCreated: function (e) {
        var dataItem = e.shape.dataItem;
        var id = dataItem.properties.GEOID10;
        if (typeof id !== "undefined") {
            SL.shapesById[id] = SL.shapesById[id] || [];
            SL.shapesById[id].push(e.shape);

            var STATEFP10 = parseInt(e.shape.dataItem.properties["STATEFP10"]);
            if (STATEFP10) {
                e.shape.fill(colors[STATEFP10 % colors.length]);
                e.shape.options.set("fill.opacity", 0.0);
            }

            if (SL.selectedCounties.length > 0) {
                $.each(SL.selectedCounties, function (key, value) {
                    if (value.dataItem.properties.GEOID10 === id) {
                        e.shape.options.set("fill.opacity", 0.8);
                    }
                });
            }
        }

        id = dataItem.properties.iso_n3;
        if (typeof id !== "undefined") {
            var diss_me_id = dataItem.properties.diss_me;
            SL.shapesById[id] = SL.shapesById[id] || [];
            SL.shapesById[id].push(e.shape);

            var typeCode = e.shape.dataItem.properties["type"];
            if (typeCode === 'State') {
                var diss_me = parseInt(e.shape.dataItem.properties["diss_me"]);
                if (diss_me) {
                    e.shape.fill(colors[diss_me % colors.length]);
                    e.shape.options.set("fill.opacity", 0.0);
                }
            }
            else {
                var iso_n3 = parseInt(e.shape.dataItem.properties["iso_n3"]);
                if (iso_n3) {
                    e.shape.fill(colors[iso_n3 % colors.length]);
                    e.shape.options.set("fill.opacity", 0.0);
                }
            }

            if (SL.selectedStates.length > 0) {
                $.each(SL.selectedStates, function (key, value) {
                    if (typeCode === 'State') {
                        if (value.dataItem.properties.diss_me === diss_me_id) {
                            e.shape.options.set("fill.opacity", 0.8);
                        }
                    }
                    else {
                        if (value.dataItem.properties.iso_n3 === id) {
                            e.shape.options.set("fill.opacity", 0.8);
                        }
                    }
                });
            }
        }
    },
    markerCreated: function (e) {
        // Draw a shape (circle) instead of a marker
        e.preventDefault();
    },
    click: SL.onClick,
    reset: SL.onReset,
    pan: SL.onPan,
    panEnd: SL.onPanEnd,
    shapeClick: SL.onShapeClick,
    shapeMouseEnter: SL.onShapeMouseEnter,
    shapeMouseLeave: SL.onShapeMouseLeave,
    zoomStart: SL.onZoomStart,
    zoomEnd: SL.onZoomEnd
});

[T. Tsonev]

Hi,

Please accept my apologies for the delayed response. 

I tried a number of things to get this working but without success.
The only thing I'm sure at this point is that all shapes must be in the same <svg> element.

The Map doesn't have a concept for "merging" the drawing surfaces of separate layers.
This leaves us with one option - load all the shapes from a single GeoJSON.

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik

 

 

[Ofer]

A bit late with the response for the original poster, but if anyone else comes across this i actually was able to solve it using Tsonev's suggestion.

During the map's "OnLoad" just fetch the map layer and set its pointer-events to none:

var kendoMap = $find("<%= RadMap1.ClientID %>").get_kendoWidget();
kendoMap.layers[1].element[0].style["pointer-events"] = "none";