Map markers no longer showing in Bing Map

[Kevin F]

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

[Stefan]

Hello, Kevin,

Thank you for the provided code.

I made an example with Bing map, remote markers and they are shown as expected:

http://dojo.telerik.com/AlUnOz

If possible, please provide a fully runnable example or modify the Dojo and I will gladly assist further.

Regards,
Stefan
Progress Telerik

[Kevin F]

I'm using the Fiori theme and it looks like the reference to markers.png has been removed from the latest CSS file for that theme.  If I use an older version of that CSS file they show up fine.  Did the markers CSS get moved to a different file I need to include?

[Stefan]

Hello, Kevin,

I updated the example with the Fiori theme and the markers were still visible:

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

Could you please check, if the issue occurs with the CDN version or with a local version of the CSS.

Also, check if there are any JavaScript errors in the console.

Regards,
Stefan
Progress Telerik

[Kevin F]

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

[Stefan]

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

[Kevin F]

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>

 

[Stefan]

Hello, Kevin,

Thank you for the provided code.

After inspecting it I noticed that the common.min.css is added instead of the common-fiori.min.css. Please add the relevant common file for the theme and advise if the same issue still occurs:

https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-files

I hope this can help resolve the issue on your end.

Regards,
Stefan
Progress Telerik

[Kevin F]

I changed it to use the common-fiori CSS.  It messed with the spinners on the numeric controls and the markers still don't show up on the map.

I changed it to use the default theme and everything looks fine.  Spinners are in the right place, right size, and all the map markers show up.  What's so different about the 2?

[Kevin F]

Forget that last post - my apologies.  with the latest release no matter which theme I choose the markers don't show up.  I'm going to open up a support ticket and send you the public URL where this is happening.  Perhaps you can identify the style elements which are preventing things from displaying correctly.

 

[Kevin F]

After much more digging I found the issue.  There was a deeply hidden style selector causing problems.  Thanks for your help on this.