Telerik Forums
Kendo UI for jQuery Forum
0 answers
45 views

I've implemented a map that draws features from a geoJSON and I colour the features based on the values read from a separate JSON file, inside

shapeCreated


For testing purpouse, I need to read the features from the map to check that the correct colours have been assigned to each of the features.

How can I read data back from the map? Mind you, from the map, not from the geoJSON, i.e.: after the style of shapeCreated has been assigned

Pierpaolo
Top achievements
Rank 1
 asked on 08 Nov 2023
2 answers
87 views

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.

Brad
Top achievements
Rank 1
Iron
 updated answer on 19 Oct 2022
1 answer
48 views

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

Thank's  marc.

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 19 Oct 2022
1 answer
397 views

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")
}
}

Georgi Denchev
Telerik team
 answered on 15 Dec 2021
1 answer
87 views

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 ?

Angel Petrov
Telerik team
 answered on 13 Jul 2021
1 answer
76 views

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]}]);

 

       
Nikolay
Telerik team
 answered on 18 Jun 2021
1 answer
281 views

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>

Ivan Danchev
Telerik team
 answered on 14 Jun 2021
1 answer
96 views

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

Regards

Neli
Telerik team
 answered on 14 Jun 2021
0 answers
58 views
I've been attempting to implement the Kendo UI (for jQuery) map control. Tiles are not rendered from either OpenStreetMap or VirtualEarth (the Bing option). I've tried both. First with my own logic, and then by copying and pasting your own example code (https://demos.telerik.com/aspnet-mvc/map/bubble-layer?_ga=2.88536155.1774956126.1621871162-136915403.1611250038) into my page. If I use developer tools, I can see that the .png tiles are indeed downloaded, but they aren't rendered in the browser. I've attached a screencap of your page example rendered and what the same code renders locally.

I came across this post (https://feedback.telerik.com/winforms/1448367-radmap-openstreetmap-provider-does-not-follow-the-latest-openstreetmap-tile-usage-policy-requiring-useragent-header) and though it pertains to WinForms and WPF, thought it likely that the issue in the Kendo UI library maybe related.

I've tried both http and https as well as localhost environment and a public web server to no avail. The version I'm running is 2020.2.513. I lean towards thinking it's something that's been corrected but not in the version we're running.

I'd appreciate any insight you can offer or ideas!
Charlie
Top achievements
Rank 1
 asked on 27 May 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?