Telerik Forums
Kendo UI for jQuery Forum
1 answer
91 views

Hi,

We have the Open Street Map example working, but in the documentation, it says...

"Displaying raster maps from popular online providers such as OpenStreetMap, OpenWeatherMap, ArcGIS, and so on." 

Does Telerik or anyone else have any working examples of using the Kendo UI Map control with different providers. Either ArcGIS or any other service?

Much appreciated,

George

Tsvetomir
Telerik team
 answered on 28 Aug 2020
6 answers
30 views

I'm forced to upgrade jQuery to 3.4.1 because of security implications, and now I get an error working with a bubble layer.  Using jQuery 1.12.4 the error does not occur.

KendoUI 2020.1.114 is listed as compatible with 3.4.1.  I am using 2020.1.406 so I just assumed it is compatible.  This is part of a MVC application. 

I've attached the stack trace from the debugger console.  Any help is greatly appreciated since I am forbidden to use any earlier versions of jQuery.

Thanks!

 

Kevin

 

 

Georgi
Telerik team
 answered on 14 May 2020
5 answers
120 views

In drag and drop markers method viewToLocation does not position the point in the right place, there is always an offset. Very little zoom point comes to be positioned in another country.

Here we can see an example of this problem http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/drag-and-drop-markers

Georgi
Telerik team
 answered on 12 May 2020
1 answer
274 views

When creating Pins on the Telerik UI Map, (https://demos.telerik.com/kendo-ui/map/remote-markers), how can we make sure that multiple pins that happen to have the same coordinates, will show up and not be "covered", so that only the very last one drawn get shown?

 

Does Telerik pin has a similar feature to show multiple clusters of pin, with something like this? (https://developers.google.com/maps/documentation/android-sdk/images/utility-markercluster.png)

Georgi
Telerik team
 answered on 17 Apr 2020
1 answer
623 views

I am trying to export my openStreetMap to a PDF but the background (the map) doesn't show up. I see a bunch of errors in the console that are similar to:

Access to XMLHttpRequest at 'https://www.toolserver.org/tiles/bw-mapnik/4/4/6.png' from origin 'https://localhost:44342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have no control over toolserver.org so I can't tell them to add Access-Control-Allow-Origin to their header. Is there a workaround? I'm open to using another map template that offers a black and white map if anyone knows of one that won't give me the cors error. 

Alex Hajigeorgieva
Telerik team
 answered on 04 Dec 2019
5 answers
201 views
Hello,

I was just wondering if there is a way to make the map always show the same extent, regardless
of the size of the <div> element containing it?

Something like an auto zoom function so the map always shows the same area?

Best regards 
Viktor Tachev
Telerik team
 answered on 08 Nov 2019
3 answers
288 views
I have a map with functions defined for the Click and MarkerClick events. If the marker is clicked, i do not want to execute the map click as well.  I tried using the stopPropagation() method but it's apparently not defined for the object passed to the event handler  function.  How can I do this with these events?
Peter Milchev
Telerik team
 answered on 17 Oct 2019
2 answers
82 views

Hello,

Look example: https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/drag-and-drop-markers

This sample work in Chrome, but it don't work in IE11.

How can i use it in IE11?

Konstantin
Top achievements
Rank 1
 answered on 17 Sep 2019
2 answers
165 views

I'm having trouble with the shapeMouseEnter event not firing on any layer but the last one added (top layer).  I have a background layer using the openmap.org, and then I have 2 GeoJSON layers.  These layers don't overlap, one is the US counties, and the other is all the other countries of the world.  The problem is that the shapeMouseEnter only gets triggered on the layer that was added last to the map.  I thought that the shapeMouseEnter event should fire for all layers with shapes.  Is this not correct?  Here is an example of my map definition:

var colors = ['#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'];
 
// create the map with the markers
$("#kendoMapCounty").kendoMap({
    center: [38.891033, -95.437500],//[30.268107, -155.744821],
    zoom: 4,
    controls: {
        attribution: false,
        navigator: false
    },
    wraparound: false,
    layers: [
    {
        type: "tile",
        urlTemplate: "//#= 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: {
            type: "geojson",
            transport: {
                read: "/Resources/kendoui/GeoJSON/world_countries_and_us_counties.geo.json"
            }
        }
    },
    {
        type: "shape",
        dataSource: {
            type: "geojson",
            transport: {
                read: "/Resources/kendoui/GeoJSON/tl_2010_us_county10_simplified.json"
            }
        }
    },
    ],
    shapeCreated: function (e) {
        var dataItem = e.shape.dataItem;
        var id = dataItem.properties.GEOID10;
        if (typeof id !== "undefined") {
            SL.shapesById[id] = SL.shapesById[id] || [];
            SL.shapesById[id].push(e.shape);
 
            var STATEFP10 = parseInt(e.shape.dataItem.properties["STATEFP10"]);
            if (STATEFP10) {
                e.shape.fill(colors[STATEFP10 % colors.length]);
                e.shape.options.set("fill.opacity", 0.0);
            }
 
            if (SL.selectedCounties.length > 0) {
                $.each(SL.selectedCounties, function (key, value) {
                    if (value.dataItem.properties.GEOID10 === id) {
                        e.shape.options.set("fill.opacity", 0.8);
                    }
                });
            }
        }
 
        id = dataItem.properties.iso_n3;
        if (typeof id !== "undefined") {
            var diss_me_id = dataItem.properties.diss_me;
            SL.shapesById[id] = SL.shapesById[id] || [];
            SL.shapesById[id].push(e.shape);
 
            var typeCode = e.shape.dataItem.properties["type"];
            if (typeCode === 'State') {
                var diss_me = parseInt(e.shape.dataItem.properties["diss_me"]);
                if (diss_me) {
                    e.shape.fill(colors[diss_me % colors.length]);
                    e.shape.options.set("fill.opacity", 0.0);
                }
            }
            else {
                var iso_n3 = parseInt(e.shape.dataItem.properties["iso_n3"]);
                if (iso_n3) {
                    e.shape.fill(colors[iso_n3 % colors.length]);
                    e.shape.options.set("fill.opacity", 0.0);
                }
            }
 
            if (SL.selectedStates.length > 0) {
                $.each(SL.selectedStates, function (key, value) {
                    if (typeCode === 'State') {
                        if (value.dataItem.properties.diss_me === diss_me_id) {
                            e.shape.options.set("fill.opacity", 0.8);
                        }
                    }
                    else {
                        if (value.dataItem.properties.iso_n3 === id) {
                            e.shape.options.set("fill.opacity", 0.8);
                        }
                    }
                });
            }
        }
    },
    markerCreated: function (e) {
        // Draw a shape (circle) instead of a marker
        e.preventDefault();
    },
    click: SL.onClick,
    reset: SL.onReset,
    pan: SL.onPan,
    panEnd: SL.onPanEnd,
    shapeClick: SL.onShapeClick,
    shapeMouseEnter: SL.onShapeMouseEnter,
    shapeMouseLeave: SL.onShapeMouseLeave,
    zoomStart: SL.onZoomStart,
    zoomEnd: SL.onZoomEnd
});

Ofer
Top achievements
Rank 1
 answered on 25 Aug 2019
6 answers
302 views

Hello Everyone,

I am facing problem in implementing the kendo alert functionality.

In my page I am using kendo grid which is working perfectly. But when I am trying to use kendo alert, javascript error comes "kendo.alert is not a function". Below is a part of the code.

kendo.ui.progress($('#myGridDiv'), true);
            $.ajax({
                url: '<%=ResolveUrl("~/ReportDataService.asmx/GetReportData") %>',
                data: "{'Office':'" + Office + "','Team':'" + Team + "','Client':'" + Client + "','FileNo':'" + FileNo + "','BillNo':'" + BillNo + "'}",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.d.length > 0) {
                        var grid = $('#myGridDiv').getKendoGrid();
                        grid.dataSource.data(data.d);
                        grid.refresh();
                    }
                    else {
                        kendo.alert('No results found. Displaying last searched results.');     //--> Error comes from here. If no record is found for the grid.
                    }
                    kendo.ui.progress($('#myGridDiv'), false);
                },
                error: function (error) {
                    alert("Error: " + JSON.stringify(error));
                    kendo.ui.progress($('#myGridDiv'), false);
                }
            });

The scripts that I am using are

<link rel="stylesheet" href="Styles/kendo.common.min.css" />
    <link rel="stylesheet" href="Styles/kendo.default.min.css" />
    <link rel="stylesheet" href="Styles/kendo.default.mobile.min.css" />
<script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/jszip.min.js"></script>
    <script src="Scripts/kendo.all.min.js"></script>

Can somebody please help.

Thanks & Regards

Viktor Tachev
Telerik team
 answered on 20 Aug 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?