Map markers no longer showing in Bing Map

6 posts, 0 answers
  1. Kevin F
    Kevin F avatar
    53 posts
    Member since:
    Sep 2009

    Posted 27 Oct 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");
  2. Stefan
    Admin
    Stefan avatar
    1355 posts

    Posted 31 Oct 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.
  3. Kevin F
    Kevin F avatar
    53 posts
    Member since:
    Sep 2009

    Posted 01 Nov 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?
  4. Stefan
    Admin
    Stefan avatar
    1355 posts

    Posted 03 Nov 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.
  5. Kevin F
    Kevin F avatar
    53 posts
    Member since:
    Sep 2009

    Posted 03 Nov 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;
        }
  6. Stefan
    Admin
    Stefan avatar
    1355 posts

    Posted 07 Nov 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.
Back to Top