locked
Bing Maps v7 EntityCollection not creating pushpins in DOM RRS feed

  • Question

  • I'm making a web app based in the Bing Maps AJAX v7 API. First, I'm adding a group of pushpins to an EntityCollection, with the map in zoom state 7, using this code:

    PinPrefix='pinFS'
    TotCnt++;
    var PinPos = new Microsoft.Maps.Location(Lat, Lng);
    pin = new Microsoft.Maps.Pushpin(PinPos, { text: Id, typeName: pinPrefix + TotCnt, icon: image,  width: 32, textOffset: offset });
    LayerFDS.push(pin);
    $('.' + pinPrefix + TotCnt).data('Stat', Stat);
    $('.' + pinPrefix + TotCnt).data('Phon', Phon);
    $('.' + pinPrefix + TotCnt).data('Fax', Fax);

    If I run the same code, but with the zoom state 18, the pushpins are created in the EntityCollection, but NOT in the DOM. If I try to extract the value for 'Fax' (using var XX=$('.' + pinPrefix + TotCnt).data('Fax') ) returns 'undefined'. When the zoom returns to 7, the actual pushping is created in the DOM, but I need to store those values inside the loop that creates the pushpins. Any ideas? Any obscure option to create the pushpins in the EntityCollecion and the DOM at the same time regardless the zoom state?


    Bernardo Salazar

    Tuesday, June 10, 2014 3:22 PM

Answers

  • If the pin is not in view it is likely not being rendered in the DOM. This is by design. If the map didn't do this we would be lucky to be able to load 100 pushpins on the map before it becomes slow, instead we can put a few thousand on. The proper way to connect data to a pushpin is to add a property to the pushpin class like "metadata" and the store your data in that property as an object. For example pin.metadata = { myval : 7}

    You could also add an id property to the pushpin and then later loop through the entity collection and search for the id value. Here is a code sample: http://rbrundritt.wordpress.com/2012/04/02/get-entity-by-property-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    Tuesday, June 10, 2014 4:24 PM
  • I taken the second approach (loop through all the entity). I attached a function to map "viewchangedend" event. In the function, first I check if the pushpin.toString="[Pushpin]", then I check if pushpin.getLocation is contained in the map.getBounds. If is inside the visible viewport, then I check for $('.pushpin').data('fax'), if returns undefined, I assign all the values needed, if returns anything different from 'undefined', I continue with the next pushpin. I know isn't the most efficient way, but is working so far. Thanks though Ricky

    Code, just in case anyone needs a reference.

    Microsoft.Maps.Events.addHandler(map, 'viewchangeend', checkPinValues);
    
    
    ...
    
    function checkPinValues() {
        var LocationRectViewPort = map.getBounds();
        var pushPin, pushPinLocation, DataName;
    
        if (ArrayFacility.length > 0 && LayerFacilities.getVisible() == true) {
            for (var i = 0; i < LayerFacilities.getLength() ; i++) {
                pushPin = LayerFacilities.get(i);
                if (pushPin.toString() == "[Pushpin]") {
                    pushPinLocation = pushPin.getLocation();
                    if (LocationRectViewPort.contains(pushPinLocation)) {
                        DataName = pushPin.getTypeName();
                        if ($('.' + DataName).data('Type') == undefined) {
                            for (var j = 0; j < ArrayFacility.length; j++) {
                                if (ArrayFacility[j] == DataName) {  //Assign values here// ; };
                                        j = j + 5;
                            };
                        };
                    };
                };
            };
        };
    };
    
    


    Bernardo Salazar

    Thursday, June 12, 2014 1:52 PM

All replies

  • If the pin is not in view it is likely not being rendered in the DOM. This is by design. If the map didn't do this we would be lucky to be able to load 100 pushpins on the map before it becomes slow, instead we can put a few thousand on. The proper way to connect data to a pushpin is to add a property to the pushpin class like "metadata" and the store your data in that property as an object. For example pin.metadata = { myval : 7}

    You could also add an id property to the pushpin and then later loop through the entity collection and search for the id value. Here is a code sample: http://rbrundritt.wordpress.com/2012/04/02/get-entity-by-property-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    Tuesday, June 10, 2014 4:24 PM
  • I taken the second approach (loop through all the entity). I attached a function to map "viewchangedend" event. In the function, first I check if the pushpin.toString="[Pushpin]", then I check if pushpin.getLocation is contained in the map.getBounds. If is inside the visible viewport, then I check for $('.pushpin').data('fax'), if returns undefined, I assign all the values needed, if returns anything different from 'undefined', I continue with the next pushpin. I know isn't the most efficient way, but is working so far. Thanks though Ricky

    Code, just in case anyone needs a reference.

    Microsoft.Maps.Events.addHandler(map, 'viewchangeend', checkPinValues);
    
    
    ...
    
    function checkPinValues() {
        var LocationRectViewPort = map.getBounds();
        var pushPin, pushPinLocation, DataName;
    
        if (ArrayFacility.length > 0 && LayerFacilities.getVisible() == true) {
            for (var i = 0; i < LayerFacilities.getLength() ; i++) {
                pushPin = LayerFacilities.get(i);
                if (pushPin.toString() == "[Pushpin]") {
                    pushPinLocation = pushPin.getLocation();
                    if (LocationRectViewPort.contains(pushPinLocation)) {
                        DataName = pushPin.getTypeName();
                        if ($('.' + DataName).data('Type') == undefined) {
                            for (var j = 0; j < ArrayFacility.length; j++) {
                                if (ArrayFacility[j] == DataName) {  //Assign values here// ; };
                                        j = j + 5;
                            };
                        };
                    };
                };
            };
        };
    };
    
    


    Bernardo Salazar

    Thursday, June 12, 2014 1:52 PM