none
How to bring specific/selected PushPin on top of all pushpins in bing maps V8 RRS feed

  • Question

  • Hi Team,

    Assuming there are multiple pushpins available at same geo-location.

    Below is sample code for binding all pushpins.

    Code:

    static BindTracePushpins(selectedRows: any) {
            
            PushpinsData = [];
            if (layer != null) {
                if (pinInfobox != null)
                    pinInfobox.setOptions({ visible: false });
                layer.clear();
            }
            layer = new Microsoft.Maps.Layer();
            $.each(selectedRows, function (selectedIndex, selectedValue) {
                if (selectedValue.GPSLatitude != null && selectedValue.GPSLongitude != null) {
                    var latitude = selectedValue.GPSLatitude;
                    var longitude = selectedValue.GPSLongitude;
                    
                    var imageSource = '';
                    if (selectedValue.GPSLatitude != 0 && selectedValue.GPSLongitude != 0 && ((selectedValue.GPSLockState == null || selectedValue.GPSLockState == "") || selectedValue.GPSLockState.toString().toUpperCase() != "LOCKED"))
                     imageSource =  'pushpin_gray.png';
                    else if (parseInt(selectedIndex) == 0)
                      imageSource =  'pushpin_yellow.png';
                    else if (parseInt(selectedIndex) == parseInt(selectedRows.length) - 1)
                      imageSource =  'pushpin_blue.png';
                    else if (selectedValue.EventMasterID.toString() == "57")
                      imageSource =  'pushpin_green.png';
                    else if (selectedValue.EventMasterID.toString() == "58")
                      imageSource =  'pushpin_red.png';
                    else
                      imageSource =  'pushpin_gray.png';

                    var pushpinImage = require('../../wwwroot/images/MapPushPins/'+ imageSource +'');
                    var pushpinOptions = { icon: pushpinImage, height: 31, width: 20, anchor: new Microsoft.Maps.Point(11, 8) };
                    var center = new Microsoft.Maps.Location(latitude, longitude); //reeferMap.getCenter();
                    var pushpin = new Microsoft.Maps.Pushpin(center, pushpinOptions);
                
                    /* InfoBox Code Starts */            
                    //pushpin.Description = '<div id=' + selectedValue.UnitMasterID + ' style="margin-top:-10px;font-size: xx-small;color: #666;"></div>';
                    // Create the infobox for the pushpin
                    pinInfobox = new Microsoft.Maps.Infobox(pushpin.getLocation(), {
                        visible: false
                    });
                    pinInfobox.setMap(reeferMap);
                    // Add handler for the pushpin click event.
                    Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function (args) { displayReeferInfobox(args, gridType); });
                 
                    /* InfoBox Code end     */
                    layer.add(pushpin);
                    PushpinsData.push(selectedValue);
                }
            });
            reeferMap.layers.insert(layer);
            reeferMap.setView({ zoom: 12 });
          
        }

    Below is the sample code for binding selected pushpin on top of all pushpins and infobox is getting displayed correctly, but pushpin is overlapped below the another pushpin which are at the same geo-location.

    Code:

    static DisplaySelectedPushpin(selectedRow: any) {      
                if (pinInfobox != null){
                    pinInfobox.setOptions({ visible: false });
                    pinInfobox.setMap(null);
                }

                var latitude = selectedRow.GPSLatitude;
                var longitude = selectedRow.GPSLongitude;
                var popOffset = new Microsoft.Maps.Point(-4, 160);
         
                var latLong = new Microsoft.Maps.Location(latitude, longitude);
                
                var identityCode = GenerateAlphaNumericCode(6);
                /* InfoBox Code Starts     */
                var description = '<div id=' + identityCode + ' class="tab-infobox"></div>';
                var DescElement = React.createElement(MapCallouts.PinInfoboxDescription, { selectedPin: selectedRow, divid: identityCode });
                RCUtils.RenderChildComponent(identityCode, DescElement);
                // Create the infobox for the pushpin
                pinInfobox = new Microsoft.Maps.Infobox(latLong, {
                    maxHeight: 200,
                    maxWidth: 540,
                    showPointer: true,
                    description: description,
                    offset: popOffset,
                    showCloseButton: true
                });
                reeferMap.setView({
                    center: latLong
                });

                pinInfobox.setMap(reeferMap);

            }

    Please suggest any alternative way to handle this issue. If possible please share sample code.

    Thanks,

    Anil Pandilla

    Thursday, August 30, 2018 9:27 AM

Answers

All replies

  • Hi,

    Assuming there are multiple pushpins available at same geo-location.

    Below is sample code for binding all pushpins.

    Code:

    static BindTracePushpins(selectedRows: any) {
            
            PushpinsData = [];
            if (layer != null) {
                if (pinInfobox != null)
                    pinInfobox.setOptions({ visible: false });
                layer.clear();
            }
            layer = new Microsoft.Maps.Layer();
            $.each(selectedRows, function (selectedIndex, selectedValue) {
                if (selectedValue.GPSLatitude != null && selectedValue.GPSLongitude != null) {
                    var latitude = selectedValue.GPSLatitude;
                    var longitude = selectedValue.GPSLongitude;
                    
                    var imageSource = '';
                    if (selectedValue.GPSLatitude != 0 && selectedValue.GPSLongitude != 0 && ((selectedValue.GPSLockState == null || selectedValue.GPSLockState == "") || selectedValue.GPSLockState.toString().toUpperCase() != "LOCKED"))
                     imageSource =  'pushpin_gray.png';
                    else if (parseInt(selectedIndex) == 0)
                      imageSource =  'pushpin_yellow.png';
                    else if (parseInt(selectedIndex) == parseInt(selectedRows.length) - 1)
                      imageSource =  'pushpin_blue.png';
                    else if (selectedValue.EventMasterID.toString() == "57")
                      imageSource =  'pushpin_green.png';
                    else if (selectedValue.EventMasterID.toString() == "58")
                      imageSource =  'pushpin_red.png';
                    else
                      imageSource =  'pushpin_gray.png';

                    var pushpinImage = require('../../wwwroot/images/MapPushPins/'+ imageSource +'');
                    var pushpinOptions = { icon: pushpinImage, height: 31, width: 20, anchor: new Microsoft.Maps.Point(11, 8) };
                    var center = new Microsoft.Maps.Location(latitude, longitude); //reeferMap.getCenter();
                    var pushpin = new Microsoft.Maps.Pushpin(center, pushpinOptions);
                
                    /* InfoBox Code Starts */            
                    //pushpin.Description = '<div id=' + selectedValue.UnitMasterID + ' style="margin-top:-10px;font-size: xx-small;color: #666;"></div>';
                    // Create the infobox for the pushpin
                    pinInfobox = new Microsoft.Maps.Infobox(pushpin.getLocation(), {
                        visible: false
                    });
                    pinInfobox.setMap(reeferMap);
                    // Add handler for the pushpin click event.
                    Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function (args) { displayReeferInfobox(args, gridType); });
                 
                    /* InfoBox Code end     */
                    layer.add(pushpin);
                    PushpinsData.push(selectedValue);
                }
            });
            reeferMap.layers.insert(layer);
            reeferMap.setView({ zoom: 12 });
          
        }

    Below is the sample code for binding selected pushpin on top of all pushpins and infobox is getting displayed correctly, but pushpin is overlapped below the another pushpin which are at the same geo-location.

    Code:

    static DisplaySelectedPushpin(selectedRow: any) {      
                if (pinInfobox != null){
                    pinInfobox.setOptions({ visible: false });
                    pinInfobox.setMap(null);
                }

                var latitude = selectedRow.GPSLatitude;
                var longitude = selectedRow.GPSLongitude;
                var popOffset = new Microsoft.Maps.Point(-4, 160);
         
                var latLong = new Microsoft.Maps.Location(latitude, longitude);
                
                var identityCode = GenerateAlphaNumericCode(6);
                /* InfoBox Code Starts     */
                var description = '<div id=' + identityCode + ' class="tab-infobox"></div>';
                var DescElement = React.createElement(MapCallouts.PinInfoboxDescription, { selectedPin: selectedRow, divid: identityCode });
                RCUtils.RenderChildComponent(identityCode, DescElement);
                // Create the infobox for the pushpin
                pinInfobox = new Microsoft.Maps.Infobox(latLong, {
                    maxHeight: 200,
                    maxWidth: 540,
                    showPointer: true,
                    description: description,
                    offset: popOffset,
                    showCloseButton: true
                });
                reeferMap.setView({
                    center: latLong
                });

                pinInfobox.setMap(reeferMap);

            }

    Please suggest any alternative way to handle this issue. If possible please share sample code.

    Thanks,

    Anil Pandilla

    Friday, August 31, 2018 5:23 AM
  • Thanks.

    Resolved issue by pushing Selected Pushpin at 0 index using layer object.

    layer.add(pushpin, 0);


    Monday, September 3, 2018 11:57 AM