Getting Kendo UI, DataViz Map, & Angular 2 To Work Together

Question

I'm using Kendo UI & Angular 2 in a project, but cannot for the life of me seem to get the map widget to work with shapefiles in Angular 2.

It looks like I have to integrate with jQuery since the map component is not listed as an Angular 2 component yet. So, I've followed the instructions outlined here. However, it still doesn't seem to work. Here's what I currently have:

exampe.module.ts

...
import "@progress/kendo-ui";
...

example-map.html

<div #kendoMap style="height: 1000px;">
</div>

example-map.component.ts:

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';

declare var kendo: any;

@Component({
  selector: 'example-map',
  templateUrl: './example-map.html'
})
export class ExampleComponent implements AfterViewInit, OnDestroy {
  @ViewChild('kendoMap')
  kendoMap: ElementRef;

  constructor () { }

  ngAfterViewInit() {
    const element = kendo.jQuery(this.kendoMap.nativeElement);
    // This line throws an error
    element.kendoMap({
        controls: {
            attribution: false,
            navigator: false,
            zoom: false
        },
        zoom: 7,
        center: [32.7767, 96.7970],
        layers: [
            {
                type: 'tile',
                zIndex: -1,
                urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
            },
            {
                type: 'shape',
                style: { fill: { opacity: 0.7 } }
                // shapefile layer data will be added here later by ajax
            }
        ],
        markers: []
    });
  }

  ngOnDestroy() { kendo.destroy(this.kendoMap.nativeElement); }
}

This was throwing an error:

TypeError: Function has non-object prototype 'undefined' in instanceof check.

To fix that, I included the version of jQuery they were using in my index.html file:

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

But now it's barfing about access 'width' off of something undefined.

ExampleComponent.html ERROR TypeError: Cannot read property 'width' of undefined
    at init.translate (http://localhost:3000/vendor.bundle.js:89908:98)
    at init.translate (http://localhost:3000/vendor.bundle.js:262525:25)
    at init._translateSurface (http://localhost:3000/vendor.bundle.js:224872:31)
    at init._reset (http://localhost:3000/vendor.bundle.js:224758:19)
    at init.proxy (http://localhost:3000/vendor.bundle.js:52589:13)
    at init.trigger (http://localhost:3000/vendor.bundle.js:4780:34)
    at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (eval at _translateSurface (http://localhost:3000/vendor.bundle.js:224869:27), <anonymous>:587:33)
    at init._reset (http://localhost:3000/vendor.bundle.js:337450:19)

Has anyone hit this before or know a great tutorial to use Kendo Maps w/ Angular 2+ ?

Answer 1

The issue with this was the order in which the component was rendering versus what was in the DOM. Moving the initialization into a jQuery block resolved the issue, like so:

ngAfterViewInit() {
    kendo.jQuery(() => {
      const element = kendo.jQuery(this.kendoMap.nativeElement);
      ...
    });
}