Kendo UI Map with Angular?

[Jake]

I've been trying to get the Kendo UI Map component (for jQuery) working with Kendo UI Angular.  I have followed the instructions here:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

I'm getting:

Uncaught TypeError: Cannot read property 'width' of undefined
    at init.translate (webpack-internal:///./node_modules/@progress/kendo-ui/js/drawing/kendo-drawing.js:5120)
    at init.translate (webpack-internal:///./node_modules/@progress/kendo-ui/js/drawing/surface.js:225)
    at init._translateSurface (webpack-internal:///./node_modules/@progress/kendo-ui/js/dataviz/map/layers/shape.js:276)
    at init._reset (webpack-internal:///./node_modules/@progress/kendo-ui/js/dataviz/map/layers/shape.js:162)
    at init.proxy (webpack-internal:///./node_modules/jquery/dist/jquery.js:10268)
    at init.trigger (webpack-internal:///./node_modules/@progress/kendo-ui/js/kendo.core.js:248)
    at init._reset (webpack-internal:///./node_modules/@progress/kendo-ui/js/dataviz/map/main.js:623)
    at new init (webpack-internal:///./node_modules/@progress/kendo-ui/js/dataviz/map/main.js:138)
    at HTMLDivElement.eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/kendo.core.js:3234)
    at Function.each (webpack-internal:///./node_modules/jquery/dist/jquery.js:354)

 

Has anyone gotten the Map to work in an Angular application?

 

 

 

[Jake]

I got the map to show up, was missing a closing tag for kendo-tabstrip.  However, the map will only show outside of the tabstrip, it will not show if I try to place it on a kendo-tabstrip-tab as needed.  Any thoughts?

 

 

[Svet]

Hi Jake,

We can add any content to a kendo-tabstrip-tab by using an ng-template with a kendoTabContent directive as demonstrated in the following article:
https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/

<kendo-tabstrip (tabSelect)="onTabSelect($event)">

        <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">

          <ng-template kendoTabContent>

                    any content

          </ng-template>

        </kendo-tabstrip-tab>

        <kendo-tabstrip-tab [title]="'New York City'">
...

I hope this helps. Could you provide the used markup for the TabStrip component In case further assistance is required for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Jake]

Thanks for the response.  I already figured it out, it was a missing closing tag.