Map markers no longer showing in Bing Map in Kendo UI for jQuery

This is a migrated thread and some comments may be shown as answers.

Map markers no longer showing in Bing Map

10 Answers 29 Views

Map

This is a migrated thread and some comments may be shown as answers.

Kevin F asked on 27 Oct 2017, 08:18 PM

I just upgraded my kendoUI code to the latest release, and now my markers don't show up on the map. I copied the old kendoUI code back in and they show up just fine. Anybody else experiencing this? The tooltips still work fine when I mouse over a spot where the marker should be.

Here's my code

var markerUrlFormat = "GetMarkerData.aspx?lat={0}&lng={1}";

resultsMap = $("#resultsMap").kendoMap({

center: [44.367966, -100.336378],

zoom: 7,

layers: [

{

type: "bing",

imagerySet: "road",

key: bingMapsKey

},

{

type: "marker",

dataSource: agMapResultsDataSource,

locationField: "LocationArray",

tooltip: {

iframe: true,

content: {

url: "GetMarkerData.aspx?lat=0&lng=0"

},

requestStart: function (e) {

e.options.url =

kendo.format(markerUrlFormat, e.sender.marker.dataItem.Latitude, e.sender.marker.dataItem.Longitude);

},

autoHide: false,

width: 350,

height: 300

},

titleField: "StreetAddress"

}

]

}).data("kendoMap");

10 Answers, 1 is accepted

answered on 03 Nov 2017, 10:37 PM

It doesn't matter if I use the CDN.

It's really weird because my kendoNotification is not centered as well as the markers not showing up. I'm guessing some of the other styles in the page are conflicting with the kendo widgets.

There are no javascript errors in the console.

Would any of these be affecting the map and/or the notification?

.k-dropdown .k-dropdown-wrap {

height: 28px;

}

.k-item, .k-input {

display: block;

text-align: left;

height: 28px !important;

padding: 0 0 0 0 !important;

}

.k-icon {

width: 25px;

height: 28px;

text-align: right;

padding: 0 !important

}

#resultsMap {

border: 1px solid black;

}

#resultsMap img {

max-width: none;

}

#resultsMap .k-icon {

width: 1em;

height: 1em;

}

answered on 07 Nov 2017, 08:48 AM

Hello, Kevin,

The provided style could affect the Map and the markers, but it should not remove them the page.

The markers, do have "k-icon" class and that is why they are affected.

Still, after I added the styles, the markers just moved a few pixels, but remain visible on the page:

http://dojo.telerik.com/AlUnOz/4

Could you please remove any other custom CSS files used in the application to determine if any of them is causing the issue.

Regards,
Stefan
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 18 Jan 2018, 07:49 PM

My apologies for the delay on this. Had to work on some other things....

Anyway, I just updated the KendoUI code to the latest 2018 release and have the same issue.

I am able to get the markers to show up by adding the following CSS to the page:

.k-map .k-marker {

background-image: url(/css/kendo/Fiori/markers.png) !important;

}

Still not sure why the notification isn't centered anymore. I'm using the following for OnNotificationShow:

function OnNotificationShow(e) {

if (!$("." + e.sender._guid)[1]) {

var element = e.element.parent(),

eWidth = element.width(),

eHeight = element.height(),

wWidth = $(window).width(),

wHeight = $(window).height();

var newLeft = Math.floor(wWidth / 2 - eWidth / 2);

var newTop = Math.floor(wHeight / 2 - eHeight / 2);

e.element.parent().css({ top: newTop - 200, left: newLeft });

}

Here is what I am doing to reference the KendoUI JS/Styles. JQuery is included earlier in the page.

<link href="/css/kendo/kendo.common.min.css" rel="stylesheet" />

<link href="/css/kendo/kendo.fiori.min.css" rel="stylesheet" />

<script src="/scripts/kendo/kendo.all.min.js"></script>