Telerik Forums / Kendo UI for jQuery Forum / Map /

Map markers no longer showing in Bing Map

Kendo UI
Resources Buy Try

11 posts, 0 answers

Kevin F

61 posts

Member since:
Sep 2009

Posted 27 Oct 2017 Link to this post

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
Admin

1878 posts

Posted 31 Oct 2017 Link to this post

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
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.
Kevin F

61 posts

Member since:
Sep 2009

Posted 01 Nov 2017 in reply to Stefan Link to this post

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
Admin

1878 posts

Posted 03 Nov 2017 Link to this post

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
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.
Kevin F

61 posts

Member since:
Sep 2009

Posted 03 Nov 2017 in reply to Stefan Link to this post

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
Admin

1878 posts

Posted 07 Nov 2017 Link to this post

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.
Kevin F

61 posts

Member since:
Sep 2009

Posted 18 Jan Link to this post

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
Admin

1878 posts

Posted 22 Jan Link to this post

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
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.
Kevin F

61 posts

Member since:
Sep 2009

Posted 01 Feb in reply to Stefan Link to this post

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

61 posts

Member since:
Sep 2009

Posted 01 Feb Link to this post

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

61 posts

Member since:
Sep 2009

Posted 01 Feb in reply to Kevin F Link to this post

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

Map markers no longer showing in Bing Map

Kevin F

Stefan

Kevin F

Stefan

Kevin F

Stefan

Kevin F

Stefan

Kevin F

Kevin F

Kevin F