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

Map Shape Layer With Circle?

2 Answers 226 Views
Map
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 14 Feb 2017, 09:05 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 16 Feb 2017, 12:42 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Jason
Top achievements
Rank 1
answered on 16 Feb 2017, 11:33 PM

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! 

Tags
Map
Asked by
Jason
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Jason
Top achievements
Rank 1
Share this question
or