Map Shape Layer With Circle?

3 posts, 1 answers
  1. Jason
    Jason avatar
    8 posts
    Member since:
    Nov 2015

    Posted 14 Feb 2017 Link to this post

    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.
  3. Answer
    Stefan
    Admin
    Stefan avatar
    3009 posts

    Posted 16 Feb 2017 Link to this post

    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 visualization (charts) and form elements.
  5. Jason
    Jason avatar
    8 posts
    Member since:
    Nov 2015

    Posted 16 Feb 2017 in reply to Stefan Link to this post

    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! 

Back to Top