Map Shape Layer With Circle?

[Jason]

Hello, I'm trying to use Kendo UI Map to display a radius with a circle. In other words, drop a pin/marker on a map, and show a circle marking a 100 mile/km radius around it. All I am able to find is documentation on adding a polygon shape to a shape layer, but nothing on circles. I tried using a bubble layer, but the bubble stays the same size when you zoom in, so I can't use that. Any thoughts on this would be very helpful.

 

Thanks! -Jason

[Stefan]

Hello Jason,

This can be achieved only via custom implementation as it is not supported out of the box.

I can suggest checking the following example demonstrating similar implementation. The example is using line instead of a circle, but this is a custom visual and a circle can be drawn instead of this line:

http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/custom-bubble-layer-symbols 

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress

[Jason]

This is exactly what I was looking for. I was able to modify it to return the correct circle size for my radius

{
    type: "bubble",
    dataSource: {
        transport: {
            read: function (e) {
                e.success(markers);
            }
        }
    },
    locationField: "latlng",
    valueField: "radius",
    symbol: function (e) {
        var map = $("#map").data("kendoMap");

        // Bubble location
        var location = e.location;

        //Convert miles to km
        var KMs = Math.round((dropPinRadius * 1.6093) * 10) / 10

        // Find location x kms west center
        var l1 = location.destination(KMs * 1000, 270);

        // View (screen) coordinates for the locations
        var p1 = map.locationToView(l1);

        // Find radius in pixels
        var radius = e.center.x - p1.x;

        // Create the circle
        var circleGeometry = new kendo.geometry.Circle(e.center, radius);
        var circle = new kendo.drawing.Circle(circleGeometry, { stroke: { width: 0 } });

        circle.dataItem = e.dataItem;
        return circle;
    }
}

Thanks!