Bibin
Bibin

Reputation: 225

Kendo Map API add label to the path

I am using Kendo map API and I am able to draw path between two locations.

I need a label on the path, I was able to bring the label kendo.drawing.Text and kendo.drawing.Group.

But not able to position it correctly.

Can anyone suggest how should I proceed.

I want some thing similar to Google map API Polyline with label with Kendo Map

I need data.TripCount somewhere center or near to each data path

Code:

var geom = kendo.geometry;
var draw = kendo.drawing;

$("#map").kendoMap({
  center: [41.397, 69.644],
  zoom: 4,
  layers: [{
    type: "tile",
    urlTemplate: "http://tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
    subdomains: ["a", "b", "c"],
    attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
  }, {
    type: "shape",
    dataSource: {
      type: "geojson",
      transport: {
        read: "http://output.jsbin.com/zuguhajiye.js"
      }
    }
  }, {
    type: "marker",
    dataSource: {
      data: [{
        location: [60.0000, 90.0000],
        title: "Foo",
        pointTo: [26.8333, 30.3333],
        tripCount: 2
      }, {
        location: [29.672811, 56.00091],
        title: "Foo",
        pointTo: [40.139477, 79.434243],
        tripCount: 10
      }],
      locationField: "location",
      titleField: "title"
    }
  }],
  reset: function(e) {
    var map = e.sender;
    var markers = map.layers[2].items;

    for (var i = 0; i < markers.length; i++) {
      linkMarker(map, markers[i]);
    }
  }
});

function linkMarker(map, marker) {
  var data = marker.dataItem;
  if (data.pointTo) {
    var from = map.locationToView(marker.location());
    var to = map.locationToView(data.pointTo);
    var shapeLayer = map.layers[1];
    var line = new kendo.dataviz.drawing.Path({
      stroke: {
        color: "#FF0000",
        width: 4,
        lineCap: "round"
      }
    });
    line.moveTo(from).lineTo(to);

    var text = new draw.Text(
      data.tripCount,
      new geom.Point(to, to), {
        font: "bold 15px Arial"
      }
    );

    // Place all the shapes in a group
    var group = new draw.Group();
    group.append(line, text);

    // Translate the group
    group.transform(
      geom.transform().translate(to, to)
    );

    shapeLayer.surface.draw(group);
  }
}

Upvotes: 0

Views: 875

Answers (0)

Related Questions