shapeMouseEnter event on Map with Multiple GeoJSON Layers

2 posts, 0 answers
  1. Perry
    Perry avatar
    7 posts
    Member since:
    Nov 2015

    Posted 15 Jan Link to this post

    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. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 20 Jan Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top