[Solved] shapeCreated Event not firing for Internet Explorer 11

[Perry]

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

[T. Tsonev]

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

 

 

[Perry]

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!!!

[Perry]

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.

[T. Tsonev]

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

 

 

[Perry]

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.

[T. Tsonev]

Hi,

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

Regards,
T. Tsonev
Telerik