Map Symbol Images

3 posts, 1 answers
  1. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 26 Jun 2015 Link to this post

    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.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,, {
                            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;

  2. Answer
    T. Tsonev
    T. Tsonev avatar
    2760 posts

    Posted 30 Jun 2015 Link to this post


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

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Matt
    Matt avatar
    38 posts
    Member since:
    Nov 2014

    Posted 16 Jul 2015 in reply to T. Tsonev Link to this post

    I finally had time to get back to this.  That worked great.  This is my symbol function.
    var rect = new geom.Rect(
                          ,  // 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;
Back to Top