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
Hello,
is there a way to have shape fills that are more complex than rgb-values, for example a diagonal hatch fill?
my knowledge on the map control and svgis limited. my current approach is to create a pattern via jquery when the map is created:
jQuery("map svg defs").html(''
+ '<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">'
+ ' <line x1="0" y1="0" x2="0" y2="10" style="stroke:red; stroke-opacity:0.4; stroke-width:8" />'
+ '</pattern>';
then i use the def as fill for shapes when they are created:
shape.fill("url(#diagonalHatch)");
this works fine, but i want to have opacity or color depend on other parameters, which would result in many defs.
Do you have any suggestions?