none
Bing maps Clustered pushpins not displayed on the map RRS feed

  • Question

  • Hi Team,

    Bing maps Clustered pushpins are not displayed on the map, this is an intermittent issue on page load.

    Please find the below code.

    function CallDeviceSearch(type) {

        if ($("#hdnDeviceTypeCd") != undefined && $("#hdnDeviceTypeCd") != null && selectedDeviceTypes == null) {
            selectedDeviceTypes = $("#hdnDeviceTypeCd")[0].defaultValue.split(',');
        }

        var DeviceViewSearchParams = {
            SearchKey: SearchKeyText,
            DeviceTypeCds: selectedDeviceTypes.join(','),
            POIId: selectedPoi,
            FilterType: type
        }

        var url = "/DeviceView/GetDeviceViewListDataTypeSearch?Ticks=" + new Date().getTime();

        var ajaxresult = CallAjax(url, DeviceViewSearchParams, false);

        DeviceData = JSON.parse(ajaxresult.Result);

        Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', { callback: clusterDeviceModuleLoaded });

       
        setTimeout(function () { ShowMapTitleBar(); }, 1000);
    }

    function clusterDeviceModuleLoaded() {
                
            //Create an infobox at the center of the map but don't show it.
            PinInfoMainmap = new Microsoft.Maps.Infobox(Mainmap.getCenter(), {
                visible: false
            });

            //Assign the infobox to a map instance.
            PinInfoMainmap.setMap(Mainmap);


            if (deviceLayer != null)
                deviceLayer.clear();

            var devicePushpins = [];
           
            for (i = 0; i < DeviceData.length; i++) {

                if (DeviceData[i].Latitude != null && DeviceData[i].Longitude != null) {
                    //var pushpinOptions = { typeName: "spriteimg" + data[i].AssetTypeCD + Alramcss, icon: '../Images/Asset/' + 'transparent_asset.png', height: 18, width: 20, anchor: new Microsoft.Maps.Point(13, 26) };

                    var pinImage = '../Images/Device/' + GetDeviceImage(DeviceData[i].DeviceTypeCd, DeviceData[i].AlertCount) + '';

                    var pushpinOptions = { icon: pinImage, height: 18, width: 20, anchor: new Microsoft.Maps.Point(12, 10) };

                    var latLon = new Microsoft.Maps.Location(DeviceData[i].Latitude, DeviceData[i].Longitude);

                    var pin = new Microsoft.Maps.Pushpin(latLon, pushpinOptions);


                    pin.Description = '<div id=' + DeviceData[i].DeviceNumber + "," + DeviceData[i].DeviceTypeCd + "," + DeviceData[i].CurrentConditionID + ' style="margin-top:-10px;font-size: xx-small;color: #666;"></div>';


                    Microsoft.Maps.Events.addHandler(pin, 'click', function (args) { MainMapdisplayInfoboxSelect(args); });
                    Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (args) { MainMapdisplayInfoboxNew(args); });
                    Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (args) { MainMaphideInfoboxNew(args); });

                    devicePushpins.push(pin);

                }
            }


            deviceLayer = new Microsoft.Maps.ClusterLayer(devicePushpins, {

                clusteredPinCallback: function (cluster) {
                    //Customize clustered pushpin.  

                    var minRadius = 8;
                    var outlineWidth = 1;
                    var fillColor = 'rgba(0, 0, 0, 1)';
                    var fillColorDefault = 'rgba(255, 255, 255, 1)';
                    var lstClusterPins = [];

                    var strPinCount = cluster.containedPushpins.length.toString();
                    var strlen = strPinCount.length > 4 ? 4 : strPinCount.length;
                    for (i = 0; i < cluster.containedPushpins.length; i++) {

                        var index1 = cluster.containedPushpins[i].Description.indexOf("id=") + 3;
                        var index2 = cluster.containedPushpins[i].Description.indexOf("style") - 1;
                        var string = cluster.containedPushpins[i].Description.substring(index1, index2)
                        var array = string.split(",");

                        var clusterItem = {
                            DeviceTypeCd: array[1],
                            ConditionId: array[2]
                        };

                        lstClusterPins.push(clusterItem);

                    }
                    var clusterSize = cluster.containedPushpins.length;
                    var radius = Math.log(clusterSize) / Math.log(10) * 3 + minRadius;

                    //fillColor = 'rgba(0, 0, 0, 1)';             

                    //Create an SVG string of two circles, one on top of the other, with the specified radius and color.
                    var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                        '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColorDefault, '"/>',
                        '<circle cx="', radius, '" cy="', radius, '" r="', radius - outlineWidth, '" fill="', fillColor, '"/>',
                        '</svg>'];
                    //Customize the clustered pushpin using the generated SVG and anchor on its center.
                    cluster.setOptions({
                        icon: svg.join(''),
                        anchor: new Microsoft.Maps.Point(radius, radius),
                        textOffset: new Microsoft.Maps.Point(0, radius - 8), //Subtract 8 to compensate for height of text.
                        anchor: new Microsoft.Maps.Point(14, 14)
                    });


                    var clusterlink = "ShowDeviceClusterPinsData('" + JSON.stringify(lstClusterPins) + "')";
                    cluster.Description = "<div style='width:100px;'><a href='#' onclick=" + clusterlink + ">Limit devices…</a></div>";

                    Microsoft.Maps.Events.addHandler(cluster, 'click', function (args) { DeviceClusterPinsDisplayInfoboxNew(args); });
                },
                gridSize: 80            
            });

            Mainmap.layers.insert(deviceLayer);
           
        }

    Here the CallDeviceSearch() function is called using document.ready() function.

    Thanks,

    Anil Pandilla

    Thursday, June 8, 2017 12:12 PM

Answers

  • Sounds like a timing issue in your code. Do you see any errors in the console? Have you tried walking through your code to look for issues? Does this occur with the experimental branch too.

    [Blog] [twitter] [LinkedIn]

    Thursday, June 8, 2017 4:23 PM
  • A couple things to check.

    you are specifying the anchor property twice when creating your cluster pin. This may be causing an issue.

    it looks like some logic is used to create a URL to pushpin icons. Double check that the URL points to an actual image.


    [Blog] [twitter] [LinkedIn]

    Friday, June 9, 2017 4:15 PM

All replies

  • Sounds like a timing issue in your code. Do you see any errors in the console? Have you tried walking through your code to look for issues? Does this occur with the experimental branch too.

    [Blog] [twitter] [LinkedIn]

    Thursday, June 8, 2017 4:23 PM
  • Errors not seen in console window(IE 11).

    This issue occurs with Release and Experimental branch.

    Thanks,

    Anil Pandilla

    Friday, June 9, 2017 7:51 AM
  • A couple things to check.

    you are specifying the anchor property twice when creating your cluster pin. This may be causing an issue.

    it looks like some logic is used to create a URL to pushpin icons. Double check that the URL points to an actual image.


    [Blog] [twitter] [LinkedIn]

    Friday, June 9, 2017 4:15 PM
  • Removed one anchor property i.e, anchor: new Microsoft.Maps.Point(14, 14).

    Pushpin icons url's looks good.

    But same intermittent issue, sometimes on page refresh half map of the map is loaded.

    Tuesday, June 13, 2017 9:50 AM