shapeCreated Event not firing for Internet Explorer 11

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

    Posted 29 Jan Link to this post

    I have a Kendo UI map working great in Chrome, Firefox, and Safari, but not Internet Explorer 11.  There are 3 layers being loaded: a "tile" layer from opencyclemap for the background images, a "shape" layer via geoJSON file of the world countries, and a "marker" layer.  The strange thing is that the "tile" layer and the "marker" layer load fine, but the geoJSON "shape" layer never loads, and the "shapeCreated" event never fires.  This event fires fine on other browsers.  Is there something I can look for in order to debug what I've messed up on in the Kendo UI framework?  I just tested the example maps you have in the same IE browsers and the geoJSON maps work fine, so I'm thinking it's something that I'm doing wrong with the loaded data?

     This is the same file/map as a previous post but a different problem.

    001.var colors = ['#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'];
    002. 
    003.// create the map with the markers
    004.$("#kendoMapCounty").kendoMap({
    005.    center: [38.891033, -95.437500],//[30.268107, -155.744821],
    006.    zoom: 4,
    007.    controls: {
    008.        attribution: false,
    009.        navigator: false
    010.    },
    011.    wraparound: false,
    012.    layers: [
    013.        {
    014.            type: "tile",
    015.            urlTemplate: "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
    016.            subdomains: ["a", "b", "c"],
    017.            attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
    018.            "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
    019.        },
    020.        {
    021.            type: "shape",
    022.            dataSource: {
    023.                type: "geojson",
    024.                transport: {
    025.                    read: "/Resources/kendoui/GeoJSON/countries_and_counties.geo.json"
    026.                }
    027.            }
    028.        },
    029.        {
    030.            type: "marker",
    031.            dataSource: SL.kendoMapMarkers,
    032.            locationField: "latlng",
    033.            titleField: "name"
    034.        },
    035.    ],
    036.    shapeCreated: function (e) {
    037.        var dataItem = e.shape.dataItem;
    038.        var id = dataItem.properties.GEOID10;
    039.        if (typeof id !== "undefined") {
    040.            SL.shapesById[id] = SL.shapesById[id] || [];
    041.            SL.shapesById[id].push(e.shape);
    042. 
    043.            var STATEFP10 = parseInt(e.shape.dataItem.properties["STATEFP10"]);
    044.            if (STATEFP10) {
    045.                e.shape.fill(colors[STATEFP10 % colors.length]);
    046.                e.shape.options.set("fill.opacity", 0.0);
    047.            }
    048. 
    049.            if (SL.selectedLocationIDs.length > 0) {
    050.                $.each(SL.selectedLocationIDs, function (key, mapId) {
    051.                    if (mapId === id.toString()) {
    052.                        e.shape.options.set("fill.opacity", 0.8);
    053.                        SL.selectedCounties.push(e.shape);
    054.                    }
    055.                });
    056.            }
    057.        }
    058. 
    059.        id = dataItem.properties.iso_a3;
    060.        if (typeof id !== "undefined") {
    061.            var diss_me_id = dataItem.properties.diss_me;
    062.            SL.shapesById[id] = SL.shapesById[id] || [];
    063.            SL.shapesById[id].push(e.shape);
    064. 
    065.            var typeCode = e.shape.dataItem.properties["type"];
    066.            if (typeCode === 'State') {
    067.                var diss_me = parseInt(e.shape.dataItem.properties["diss_me"]);
    068.                if (diss_me) {
    069.                    e.shape.fill(colors[diss_me % colors.length]);
    070.                    e.shape.options.set("fill.opacity", 0.0);
    071.                }
    072.            }
    073.            else {
    074.                var iso_n3 = parseInt(e.shape.dataItem.properties["iso_n3"]);
    075.                if (iso_n3) {
    076.                    e.shape.fill(colors[iso_n3 % colors.length]);
    077.                    e.shape.options.set("fill.opacity", 0.0);
    078.                }
    079.            }
    080. 
    081.            if (SL.selectedLocationIDs.length > 0) {
    082.                $.each(SL.selectedLocationIDs, function (key, mapId) {
    083.                    if (typeCode === 'State') {
    084.                        if (mapId === diss_me_id.toString()) {
    085.                            e.shape.options.set("fill.opacity", 0.8);
    086.                            SL.selectedCounties.push(e.shape);
    087.                        }
    088.                    }
    089.                    else {
    090.                        //var DBCode = SL.getDBCodeFromMapId(mapId);
    091.                        if (mapId === id) {
    092.                            e.shape.options.set("fill.opacity", 0.8);
    093.                            SL.selectedCounties.push(e.shape);
    094.                        }
    095.                    }
    096.                });
    097.            }
    098.        }
    099.    },
    100.    click: SL.onClick,
    101.    reset: SL.onReset,
    102.    pan: SL.onPan,
    103.    panEnd: SL.onPanEnd,
    104.    shapeClick: SL.onShapeClick,
    105.    shapeMouseEnter: SL.onShapeMouseEnter,
    106.    shapeMouseLeave: SL.onShapeMouseLeave,
    107.    zoomStart: SL.onZoomStart,
    108.    zoomEnd: SL.onZoomEnd
    109.});

  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 03 Feb Link to this post

    Hi,

    Please accept my apologies for the delayed response.

    This was a baffling issue indeed, but turned out to be caused by a problem in the encoding of the JSON file.
    Convert the file to UTF-8 and you should be all set.

    I did this locally, but the conversion was not correct as I don't know the original encoding.

    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
  4. Perry
    Perry avatar
    7 posts
    Member since:
    Nov 2015

    Posted 03 Feb in reply to T. Tsonev Link to this post

    Thank you soo much!!!  When using QGIS software to merge the goeJSON file, I did notice that the encoding was set to "SYSTEM".  I changed it to UTF using MapShaper.org and exported and it works great now.  Thanks again!!!
  5. Perry
    Perry avatar
    7 posts
    Member since:
    Nov 2015

    Posted 03 Feb in reply to Perry Link to this post

    Sorry, wanted to clarify mytypos in my last reply.  I encoded using UTF8 (by entering "encoding=uft8") into the extra parameters of the mapshaper.org export function.  I could have just saved it from the QGIS program that way, but I use mapshaper to simplify the map to reduce it's file size.
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 05 Feb Link to this post

    Hello,

    MapShaper seems pretty cool, I wasn't aware of it. I'll include it in the docs along with info regarding the encoding.

    Thanks!

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Perry
    Perry avatar
    7 posts
    Member since:
    Nov 2015

    Posted 05 Feb in reply to T. Tsonev Link to this post

    I've included some info on how to find maps, merge map files, and shrink the file size using QGIS and Map Shaper on my blog:

    http://technicallyitstechnical.blogspot.com/2016/02/qgis-find-maps-first-thing-you-need-to.html

    Maybe this will help someone else.

  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 09 Feb Link to this post

    Hi,

    Cool, thanks! I've updated our Telerik points as a small token of gratitude.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready