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
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
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
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)
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.
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?
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
});
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