title: Getting Kendo UI, DataViz Map, & Angular 2 To Work Together
body: <p>I'm using Kendo UI &amp; 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. </p>
  
  <p>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 <a href="https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/" rel="nofollow noreferrer">here</a>. However, it still doesn't seem to work. Here's what I currently have:</p>
  
  <p><strong>exampe.module.ts</strong></p>
  
  <pre><code>...
  import "@progress/kendo-ui";
  ...
  </code></pre>
  
  <p><strong>example-map.html</strong></p>
  
  <pre><code>&lt;div #kendoMap style="height: 1000px;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>example-map.component.ts:</strong></p>
  
  <pre><code>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); }
  }
  </code></pre>
  
  <p>This was throwing an error: </p>
  
  <p><code>TypeError: Function has non-object prototype 'undefined' in instanceof check</code>.  </p>
  
  <p>To fix that, I included the version of jQuery they were using in my index.html file:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But now it's barfing about access 'width' off of something undefined.  </p>
  
  <pre><code>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), &lt;anonymous&gt;:587:33)
      at init._reset (http://localhost:3000/vendor.bundle.js:337450:19)
  </code></pre>
  
  <p>Has anyone hit this before or know a great tutorial to use Kendo Maps w/ Angular 2+ ?</p>