none
pushpin with custom html-content - no click event RRS feed

  • Question

  • Hello i have a Problem with a custom HTML puspin and the missing click Event. I know the several Workarounds (i used my own css class with 'pointer-events: all;', used jQuery with '    $('#dPV_Map_1').ready(function () {
            jQuery('#dPV_Map_1').find('.MapPushpinBase').click(
        function () {
            alert('Click event is fired');
        }
      )});

    My Problem, i use Server side clustering and send Pins and Cluster in one result set. On Client i clear the entity collection for the Cluster Points and the one for the Pins and create the pushpins. The 'Clusterpushpin' is a bar Chart and the Count of Points in the Cluster.

        PV_MAP_1.entities.remove(PV_Layer_temp);
        PV_MAP_1.entities.remove(PV_Layer_temp_cluster);
        PV_Layer_temp.clear();
        PV_Layer_temp_cluster.clear();
        for (i; i < Anz; i++) {
            var Lokation = new Microsoft.Maps.Location(Erg[i].Lat, Erg[i].Lon);
            var Wert0 = parseInt(Erg[i].AnzT0);
            var Wert1 = parseInt(Erg[i].AnzT1);
            var Wert2 = parseInt(Erg[i].AnzT2);
            
            var Summe = Wert0 + Wert1 + Wert2;
            var pushpinOptions = null;
            if (Erg[i].ID.length == 0) {  // this is a cluster pin
                var faktor = 38.0 / Summe;

                var breite0 = Math.round(faktor * Wert0);
                var breite1 = Math.round(faktor * Wert1);
                var breite2 = Math.round(faktor * Wert2);

                s_Titel = "Résumé:";
                s_Desc = "Toits de grande superficie: " + Wert0 + ", très bonne orientation: " + Wert1 + ", bonne orientation: " + Wert2;
                pushpinOptions = { icon: "Pictures/Icons/Blue/symbol_blank.png",
                    text: Summe.toString(),
                    zIndex: 500,
                    //typeName: "pushpinStyle",
                    //anchor: new Microsoft.Maps.Point(18, 18),
                    width: 44, height: 38, htmlContent: "<div id='cluster' style='; width:42px; border:1px solid black; height:auto; background:grey;'><div style='; float:left; width:" + breite0 +
                    "px; height:14px; background-color:#0000FF; border-right:1px solid black; border-bottom:1px solid black'></div><div style='; float:left; width:" + breite1 +
                    "px; height:14px; background-color:#00FF00; border-right:1px solid black; border-bottom:1px solid black'></div><div style='; float:left; width:" + breite2 +
                    "px; height:14px; background-color:#FF9200; border-right:1px solid black;border-bottom:1px solid black; '></div><div id='clusterbody' style='; float:left; width:100%; height:auto; font:Arial; font-size:12px; font-weight:bold; text-align:center; background:grey;'>" +
                    Summe.toString() + "</div></div>"
                };
                var pin_cluster = new Microsoft.Maps.Pushpin(Lokation, pushpinOptions);
                pin_cluster.title = s_Titel;
                pin_cluster.description = s_Desc;
                Microsoft.Maps.Events.addHandler(pin_cluster, 'click', displayEventInfo);
                PV_Layer_temp_cluster.push(pin_cluster);
            }
            else {
                s_Titel = "Toit: ";
                s_Desc = "ID: " + Erg[i].ID.toString();
                if (Erg[i].Typ == 0)
                    pushpinOptions = { icon: "Pictures/Icons/Blue/symbol_blank_klein.png", width: 16, height: 19};
                else if (Erg[i].Typ == 1)
                    pushpinOptions = { icon: "Pictures/Icons/Orange/symbol_blank_klein.png", width: 16, height: 19 };
                else if (Erg[i].Typ == 2)
                    pushpinOptions = { icon: "Pictures/Icons/Green/symbol_blank_klein.png", width: 16, height: 19 };
                var pin = new Microsoft.Maps.Pushpin(Lokation, pushpinOptions);
                pin.title = s_Titel;
                pin.description = s_Desc;
                Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo);
                PV_Layer_temp.push(pin);

            }
        }

        PV_MAP_1.entities.push(PV_Layer_temp);
        PV_MAP_1.entities.push(PV_Layer_temp_cluster);
        if (event_Handler == null)
            event_Handler = Microsoft.Maps.Events.addThrottledHandler(PV_MAP_1, 'viewchangeend', Lade_Punkte, 1500);

        $('#dPV_Map_1').ready(function () {
            jQuery('#dPV_Map_1').find('.MapPushpinBase').click(
        function () {
            alert('Click event is fired');
        }
      )});

    If i click on the 'Cluster-Pin' nothing happens, if i click on the Pin, my jQuery click fires first, then the Infobox open (so the jQuery function seems to work). But why is my Cluster-Pin' not handle the click Event??

    Any idea??

    Thanks

    Patric

    Sunday, September 15, 2013 1:59 PM

Answers

  • Hello,

    I found a part solution for my Problem. It seems the Themes make the Trouble! If i load the map without Bing-Maps-Themes, the click-event fires and the Infobox opens.

    But on IE 10 the Infobox opens behind my HTML-Pushpins!! I changed the zIndex for the Infobox, the entity collection and the pushpins, no result. But it works great in other Browsers??

    Anyone an idea??

    Thanks

    Patric

    • Marked as answer by Pagehl Wednesday, September 25, 2013 2:36 PM
    Wednesday, September 25, 2013 2:36 PM