@progress/kendo-charts 1.27.1-dev.202302230852 → 1.28.0-dev.202302240817

package/dist/es/map/layers/marker.js

@@ -9,21 +9,23 @@ import {
 
 import { Layer } from './layer';
 import { Location } from '../location';
-
 import {
     proxy,
     on,
     off,
     toHyphens,
-    toPixels
+    toPixels,
+    convertToHtml
 } from '../utils';
+import TemplateService from '../../services/template-service';
 
 var CLICK = "click";
 var MOUSE_ENTER = "mouseenter";
 var MOUSE_LEAVE = "mouseleave";
 
 var extend = Object.assign;
-var MARKER_CLASS = ".k-marker";
+var MARKER_CLASS_NAME = "k-marker";
+var MARKER_CLASS = "." + MARKER_CLASS_NAME;
 
 export var MarkerLayer = (function (Layer) {
     function MarkerLayer(map, options) {
@@ -153,11 +155,9 @@ export var MarkerLayer = (function (Layer) {
     };
 
     MarkerLayer.prototype._markerClick = function _markerClick (e) {
-        var marker = e.target._kendoNode;
+        var marker = e.currentTarget._kendoNode;
 
         var args = {
-            // marker: $(e.target).data('kendoMarker'),
-            // marker: e.target.getAttribute("data-kendoMarker"),
             layer: this,
             layerIndex: this._layerIndex(),
             marker: marker,
@@ -198,7 +198,8 @@ setDefaultOptions(MarkerLayer, {
     zIndex: 1000,
     autoBind: true,
     locationField: 'location',
-    titleField: 'title'
+    titleField: 'title',
+    template: ""
 });
 
 export var Marker = (function (Class) {
@@ -276,9 +277,17 @@ export var Marker = (function (Class) {
         if (!this.element) {
             var options = this.options;
             var layer = this.layer;
-
             var element = document.createElement('span');
-            addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            addClass(element, MARKER_CLASS_NAME);
+
+            if (this.options.template) {
+                var templateFn = this._compileTemplate(this.options.template);
+                var templateHtml = templateFn(this.dataItem);
+                var templateElement = convertToHtml(templateHtml);
+                element.appendChild(templateElement);
+            } else {
+                addClass(element, 'k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            }
 
             if (options.title) {
                 element.setAttribute("title", options.title);
@@ -337,6 +346,13 @@ export var Marker = (function (Class) {
         return args;
     };
 
+    Marker.prototype._compileTemplate = function _compileTemplate (template) {
+        return TemplateService.compile(template, {
+            paramName: "dataItem",
+            useWithBlock: false
+        });
+    };
+
     Marker.create = function create (arg, defaults) {
         if (arg instanceof Marker) {
             return arg;

package/dist/es/map/map.js

@@ -60,13 +60,13 @@ import {
 import {
     removeChildren,
     setDefaultEvents,
-    toHyphens,
     proxy,
     now,
     on,
     off,
     getSupportedFeatures,
-    convertToHtml
+    convertToHtml,
+    renderPos
 } from './utils';
 
 import {
@@ -100,20 +100,6 @@ var layersMap = {
 };
 layersMap[MARKER] = MarkerLayer;
 
-function renderPos(pos) {
-    var result = [];
-
-    if (pos) {
-        var parts = toHyphens(pos).split("-");
-
-        for (var i = 0; i < parts.length; i++) {
-            result.push("k-pos-" + parts[i]);
-        }
-    }
-
-    return result.join(" ");
-}
-
 var Map = (function (Observable) {
     function Map(element, options, themeOptions, context) {
         if ( options === void 0 ) options = {};

package/dist/es/map/utils.js

@@ -445,4 +445,18 @@ export var now = function () {
 
 export var noop = function () {};
 
+export var renderPos = function (pos) {
+    var result = [];
+
+    if (pos) {
+        var parts = toHyphens(pos).split("-");
+
+        for (var i = 0; i < parts.length; i++) {
+            result.push("k-pos-" + parts[i]);
+        }
+    }
+
+    return result.join(" ");
+};
+
 /* eslint-enable arrow-body-style */

package/dist/es/services/template-service.js

@@ -10,8 +10,8 @@ TemplateService.register = function register (userImplementation) {
     current = userImplementation;
 };
 
-TemplateService.compile = function compile (template) {
-    return current.compile(template);
+TemplateService.compile = function compile (template, options) {
+    return current.compile(template, options);
 };
 
 export default TemplateService;

package/dist/es2015/map/layers/marker.js

@@ -9,21 +9,23 @@ import {
 
 import { Layer } from './layer';
 import { Location } from '../location';
-
 import {
     proxy,
     on,
     off,
     toHyphens,
-    toPixels
+    toPixels,
+    convertToHtml
 } from '../utils';
+import TemplateService from '../../services/template-service';
 
 const CLICK = "click";
 const MOUSE_ENTER = "mouseenter";
 const MOUSE_LEAVE = "mouseleave";
 
 const extend = Object.assign;
-const MARKER_CLASS = ".k-marker";
+const MARKER_CLASS_NAME = "k-marker";
+const MARKER_CLASS = "." + MARKER_CLASS_NAME;
 
 export class MarkerLayer extends Layer {
     constructor(map, options) {
@@ -141,11 +143,9 @@ export class MarkerLayer extends Layer {
     }
 
     _markerClick(e) {
-        const marker = e.target._kendoNode;
+        const marker = e.currentTarget._kendoNode;
 
         let args = {
-            // marker: $(e.target).data('kendoMarker'),
-            // marker: e.target.getAttribute("data-kendoMarker"),
             layer: this,
             layerIndex: this._layerIndex(),
             marker: marker,
@@ -184,7 +184,8 @@ setDefaultOptions(MarkerLayer, {
     zIndex: 1000,
     autoBind: true,
     locationField: 'location',
-    titleField: 'title'
+    titleField: 'title',
+    template: ""
 });
 
 export class Marker extends Class {
@@ -258,9 +259,17 @@ export class Marker extends Class {
         if (!this.element) {
             let options = this.options;
             let layer = this.layer;
-
-            const element = document.createElement('span');
-            addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            let element = document.createElement('span');
+            addClass(element, MARKER_CLASS_NAME);
+
+            if (this.options.template) {
+                const templateFn = this._compileTemplate(this.options.template);
+                const templateHtml = templateFn(this.dataItem);
+                const templateElement = convertToHtml(templateHtml);
+                element.appendChild(templateElement);
+            } else {
+                addClass(element, 'k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            }
 
             if (options.title) {
                 element.setAttribute("title", options.title);
@@ -319,6 +328,13 @@ export class Marker extends Class {
         return args;
     }
 
+    _compileTemplate(template) {
+        return TemplateService.compile(template, {
+            paramName: "dataItem",
+            useWithBlock: false
+        });
+    }
+
     static create(arg, defaults) {
         if (arg instanceof Marker) {
             return arg;

package/dist/es2015/map/map.js

@@ -60,13 +60,13 @@ import {
 import {
     removeChildren,
     setDefaultEvents,
-    toHyphens,
     proxy,
     now,
     on,
     off,
     getSupportedFeatures,
-    convertToHtml
+    convertToHtml,
+    renderPos
 } from './utils';
 
 import {
@@ -100,20 +100,6 @@ const layersMap = {
     [MARKER]: MarkerLayer
 };
 
-function renderPos(pos) {
-    let result = [];
-
-    if (pos) {
-        let parts = toHyphens(pos).split("-");
-
-        for (let i = 0; i < parts.length; i++) {
-            result.push("k-pos-" + parts[i]);
-        }
-    }
-
-    return result.join(" ");
-}
-
 class Map extends Observable {
     constructor(element, options = {}, themeOptions = {}, context = {}) {
         super();

package/dist/es2015/map/utils.js

@@ -445,4 +445,18 @@ export const now = () => {
 
 export const noop = () => {};
 
+export const renderPos = (pos) => {
+    let result = [];
+
+    if (pos) {
+        let parts = toHyphens(pos).split("-");
+
+        for (let i = 0; i < parts.length; i++) {
+            result.push("k-pos-" + parts[i]);
+        }
+    }
+
+    return result.join(" ");
+};
+
 /* eslint-enable arrow-body-style */

package/dist/es2015/services/template-service.js

@@ -9,8 +9,8 @@ class TemplateService {
         current = userImplementation;
     }
 
-    static compile(template) {
-        return current.compile(template);
+    static compile(template, options) {
+        return current.compile(template, options);
     }
 }