We have a Telerik Map object on a view, and the map displays several markers which is working perfectly. Each marker has a tooltip configured to "LoadContentFromAjax", so when the user hovers over the marker (for the first time), the API is queried and the correct data is returned.

The problem is that the Markers Tooltip data is only loaded the first time the user hovers over the icon after the page loads. once that first hover has occurred, the existing data is displayed until the page is reloaded.

I have attempted to refresh the data using the marker tooltips "Show" event, but so far i have had no luck.

This is my onShow event that is called anytime the Marker is hovered over

function tooltip_OnShow(e) {
    console.log(e);
    e.sender.marker.dataItem.refresh();
}

the "e.sender.marker.dataItem.refresh()" just throws an exception. I have tried several different iterations, with no luck so far.

Hi,  What about kml/kmz support for Kendo Maps?

Thank's  marc.

Hello,

we are drawing a kind of graph on top of the map. We are currently trying to draw some text as well and we have gotten it to work kind of.
At the end I am going to include a small script to show how we are doing it right now and also show what the problem is.
We not only need to draw these things but they need to be clickable too. currently we use geojson with an id that allows us to reference the data behind a geojson point.

with the text we are cheating a bit because we interscept and prevent the default shape from being created and append it's dataItem to our new shape which makes it clickable. the problem is it isnt cleaned up well and it will be drawn over if the data changes. in the worst case if the location changes the new shape will be drawn in the new location but the previously drawn ones in the old location are not cleaned up.

Would be lovely if anyone has a tip on how to do in a nice way.

if you execute the fillowing code you will see the text is drawn on top of the previous text while you cannot see the same effect with the native Geojson Lines

function Guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
} 
function rand() {
    return Math.random()*360 - 180;
}
function onMarkerClick(e) {
    console.log(e);
}
function createMap() {
    var datasrc = new kendo.data.DataSource({
        type: "geojson",
        data: []
    });
    var datasrc1 = new kendo.data.DataSource({
        type: "geojson",
        data: []
    });
    var map = $("#map").kendoMap({
        center: [0, 0],
        zoom: 12,
        layers: [{
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
        },
        {
            type: "shape",
            dataSource: datasrc,
        },{
            type: "shape",
            dataSource: datasrc1,
        }],
        markerClick: onMarkerClick,
        markerCreated: onMarkerCreated,
        shapeCreated: onShapeCreated,
    }).data("kendoMap");

    let arr = [];
    let arr1 = [];
    
    for (var i = 0; i < 20; i++) {
        arr.push({type: "Feature", id: Guid(), geometry: {type: "Point", coordinates: [0,0-i*0.005]}})
        datasrc.data(arr)
    }


    for (var i = 0; i < 30; i++) {
        arr1.push({type: "Feature", id: Guid(), geometry: {type: "LineString", coordinates: [[-5,0.08 - i * 0.002], [5,0.08- i * 0.002]]}})
        datasrc1.data(arr1)
    }
}

$(document).ready(createMap);

function onMarkerCreated(e) {
e.preventDefault()
}
function onShapeCreated(e) {
if (e.shape.dataItem.geometry.type == "Point") {
    console.log("creating shape")
    var bbox = e.shape.bbox();
    var center = bbox.center()
    var label = new kendo.drawing.Text("Lorem Ipsum");
    var labelCenter = label.bbox().center()
    label.position([
        center.x - labelCenter.x,
        center.y - labelCenter.y
    ])
    label.dataItem = e.shape.dataItem;
    e.layer.surface.draw(label);
    e.preventDefault();
} else {
    console.log("creating line")
}
}

I created a kendo map and i'm using a openstreetmap, I also created a layer shape polygon with my coordinates but when I zoom, my shape disappears and I don't know why.

Maybe it is because my shape is not very large (about 1hectare).

I tried with more coordinates (about 100) but it is the same thing.

Should i change the map or just kendo can't zoom on little shape ?

This is my map with zoom 13 :

And with zoom 14, my shape disappears.

My code :

<script>
    $("#map").kendoMap({
   
             center: [48.471504, - 2.457585],
                zoom: 13,
                layers: [{
                    type: "tile",
                   urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"]
                }, {
                    extent: [
                        48.499924, - 2.459692,
                        48.45, -2.479
                    ],
                    minZoom: 11,
                    type: "shape",
                    style: {
                        fill: {
                            opacity: 0
                        },
                        stroke: {
                            color: "red",
                            width: 2
                        }
                    },
                    dataSource: {
                        type: "geojson",
                        data: [{
                            "type": "Polygon",
                            "coordinates": [[ listCoordinates                        
                            ]]
                        }]
                    }
                }]
            });
</script>

How can i zoom and see my shape ?

Hi,

When the map is zoom out to world map, continents are duplicated on screen (attached).  However the marker only display ones and does not replicate itself on the map. 

Is there a way to display the marker on duplicated continents?  Thanks!

Here's the code that I have:

$("#map").kendoMap({
      zoom: 1,
      layers: [{
        type: "tile",
        urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        subdomains: ["a", "b", "c"],
        attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
      }]
    });

    var map = $("#map").data("kendoMap");
    map.markers.add([{ location: [33.7580, -118.2762]}]);

Hi,

I am using Kendo MVC Map to display transaction data. With the reference of https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/link-marker-to-location, I am able to draw a path between markers, but I want to show an arrow on the path of map. Below is the code I am using to display map,

<div id="transactionMap">
    @(Html.Kendo().Map()
.Name("map")
.Center(43.76398900, -79.54862200)
.Zoom(15)
.Layers(layers =>
{
    layers.Add()
        .Type(MapLayerType.Tile)
        .UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
        .Subdomains("a", "b", "c")
        .Attribution("&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>." +
                     "Tiles courtesy of <a href='https://www.opencyclemap.org/'>Andy Allan</a>")
        .ZIndex(0);

    layers.Add()
        .Style(style => style.Fill(fill => fill.Opacity(0.2)))
        .Type(MapLayerType.Shape)
        .ZIndex(1);

    layers.Add()
        .Type(MapLayerType.Marker)
        .DataSource(dataSource => dataSource
              .Read(read => read.Action("Transaction_Read", "TestReports").Data("TripLogMarkerParam").Type(HttpVerbs.Get))
        )
        .LocationField("LatLng")
        .TitleField("Name")
        
        .ZIndex(2);


})
.Events(e=>e.Reset("onResetMap")   
       ))
</div>

<script src="@Url.Content("~/Content/dataviz/map/js/chroma.min.js")"></script>
<script>
    var geom = kendo.geometry;
    var draw = kendo.drawing;
            
    function TripLogMarkerParam() {

        return {
            tripId: @ViewBag.tripId,
            fromTripLogId: @ViewBag.fromTripLogId,
            toTripLogId: @ViewBag.ToTripLogId
        };

    }

    function onResetMap(e) {
        var map = e.sender;
        var markers = map.layers[2].items;

        for (var i = 0; i < markers.length - 1; i++) {

            linkMarker(map, markers[i], markers[i + 1]);
        }

    }

   
    function linkMarker(map, marker, nextMarker) {
        var dataFrom = map.locationToView(marker.location());
        var nextDataFrom = map.locationToView(nextMarker.location());

        var shapeLayer = map.layers[1];
        var line = new kendo.dataviz.drawing.Path({
            stroke: {
                color: "#FF0000",
                width: 2,
                lineCap: "round"
            }
            
        });
        line.moveTo(dataFrom).lineTo(nextDataFrom);          
        shapeLayer.surface.draw(line);
    }
</script>

Is it possible to synchronize Map and Grid components with a shared datasource ? and have you an example somewhere ?

Regards

Hey,

Wondering if it is possible to feed in a dataset, that would produce a heat map based on the values per state (or region) on the map of the USA.

I have read a few forums but have not found any solutions.

If you can let me know if this is possible and if there is any documentation I could follow that would be brilliant. 

Attached is what I want the outcome to look like.

Shane

Hi,

I have some doubts about coordinates.

How to get pixel cordinates of a lat, lng point?

I tried locationToView and locationToLayer without success ..

Here a script example: