Map Symbol Images

[Matt]

I have a bubble layer where I'm overriding the bubble with a symbol.  Currently I'm just doing a custom circle so I can put text on top of the bubble, and have easier control of the color.

I'm actually using this method to display various types of data on the map, and for one of them I was thinking it would be better if I could put an image on the map in that location instead of drawing a circle.  I've been looking through the documentation, but haven't found a way to do this yet.

Is it possible?  It seems like it should be.

In case it's helpful, here's the symbol function I'm using on my bubble layer:

symbol: function (e) {
                    var map = $("#map").data("kendoMap");

                    var location = e.location;
                    var circleGeometry = new geom.Circle(e.center, e.dataItem.Value);

                    // Draw the circle shape
                    var circle = new draw.Circle(circleGeometry, {
                        fill: {
                            color: e.dataItem.Color,
                            opacity: 0.7
                        },
                        stroke: {
                            width: 0
                        }
                    });

                    // Draw the text
                    var text = new draw.Text(e.dataItem.Name, e.center, {
                        font: "12px sans-serif"
                    });

                    // Align it in the circle center
                    draw.align([text], circle.bbox(), "center");
                    draw.vAlign([text], circle.bbox(), "center");

                    // Associate the dataItem with the objects going into the symbol
                    circle.dataItem = e.dataItem;
                    text.dataItem = e.dataItem;
                    var symbol = new draw.Group();
                    symbol.append(circle, text);
                    symbol.dataItem = e.dataItem;

                    return symbol;
                }

[T. Tsonev]

Hello,

The Image primitive is probably what you're looking for. Let me know if I'm missing something.

Regards,
T. Tsonev
Telerik

 

 

[Matt]

I finally had time to get back to this.  That worked great.  This is my symbol function.

var rect = new geom.Rect(
                                e.center,  // Position of the top left corner
                                [e.dataItem.Value, e.dataItem.Value] // Size of the rectangle
                            );
                            var imgString = "/Images/MyImage.png";
                            var image = new draw.Image(imgString, rect);

                            return image;