This is a migrated thread and some comments may be shown as answers.

Map Symbol Images

2 Answers 58 Views
Map
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 26 Jun 2015, 03:32 PM

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;
                }

2 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 30 Jun 2015, 09:30 AM
Hello,

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

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matt
Top achievements
Rank 1
answered on 16 Jul 2015, 07:11 PM
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;
Tags
Map
Asked by
Matt
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Matt
Top achievements
Rank 1
Share this question
or