This is a migrated thread and some comments may be shown as answers.

shapeMouseEnter event on Map with Multiple GeoJSON Layers

2 Answers 90 Views
Map
This is a migrated thread and some comments may be shown as answers.
Perry
Top achievements
Rank 1
Perry asked on 15 Jan 2016, 04:54 PM

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
});

2 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 20 Jan 2016, 02:00 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ofer
Top achievements
Rank 1
answered on 25 Aug 2019, 11:26 AM

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";
Tags
Map
Asked by
Perry
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Ofer
Top achievements
Rank 1
Share this question
or