none
Custom HTML pushpins in Firefox not positioned correctly.

    Question

  • I've created an app where I use several custom HTML pushpins. Each one of these pushpins has a click event that will call setView on the map to center the map on the selected pin. This works perfectly in all browsers except for Firefox (testing version 22.0).

    In Firefox, after the setView animation completes and the map is centered on the pushpin, the pushpin is then offset horizontally, vertically or both by a certain amount of pixels. The amount seems to correspond with amount of pixels the map has moved. If you then drag the map manually with the mouse, upon releasing the mouse button, the pushpin snaps back to its proper place. I've checked the top and left position values of the MapPushpinBase anchor tag in compared it with other browsers and the values differ.

    Unfortunately, I cannot post a live example because the product has not yet been publicly released. But see below for the code I'm using.

    this.clickHandlers.push(Microsoft.Maps.Events.addHandler(node, 'click', function (e) {
        var element = $(e.target._htmlContent);
        self.nodeHitboxHandler(element);
    }));

    Within the nodeHitboxHandler function, the only piece of Bing Map code is this:

    this.map.setView({
        center: new Microsoft.Maps.Location(panStart.latitude, panStart.longitude),
        zoom: this.zoom,
        mapTypeId: Microsoft.Maps.MapTypeId[self.mapTypeId]
    });

    Thanks in advance for any help.

    Thursday, July 11, 2013 5:40 PM

Answers

All replies

  • This has been discussed in a number of other threads already. Take a look at this one for a possible solution: http://social.msdn.microsoft.com/Forums/en-US/ef4b7ef1-d53e-4385-9e58-775c6a028ebe/bing-maps-custom-html-pushpin-not-firing-any-infobox-event

    http://rbrundritt.wordpress.com

    Friday, July 12, 2013 12:36 PM
  • Thanks for your response, Ricky.

    I took a look at that thread and I don't believe that solution can help me. I'm not using an infobox and I'm not having any problems registering events or handing them. My problem occurs after calling the setView function on the map where the pushpin that the user clicks on to inital the setView method are being offset from their initial position. Also, there are no problems with calling setView either; the map pans to location specific in the parameters. 

    I should also note that the custom HTML and CSS that I've added to the pushpin are rending perfectly across all browsers and no problems with that content occur when this issue occurs. The only change is on the actual pushpin anchor tag in Firefox (the ones with the class "MapPushpinBase"). The tag has CSS values for top and left that are inconsistent with other browsers after the setView animation is complete. When you manually click and drag the map with the mouse, the offset pushpins snap back to their correct locations.

    I apologize for not being able to post a link to my application due to the sensitive nature of the project. If there are any other threads you think are relevant (I've searched myself and could not find any) I'd like to take a look at those as well.

    Thanks again for you time.

    Friday, July 12, 2013 2:26 PM
  • In order to make things clearer, I've created a simple example that demonstrates the problem. You can see it here: http://ginof.com/tests/bing/

    In Firefox, try clicking on the different pushpins and watch the behaviour of the pushpin you've just clicked on after the map finishes panning to its new location. The map works fine in all browsers except Firefox.

    Thanks again for any help.

    Friday, July 12, 2013 6:52 PM
  • Hey Ricky,

    Here's a simple example that demonstrates the problem in Firefox: http://ginof.com/tests/bing/

    Thanks.

    Friday, July 12, 2013 6:53 PM
  • Also, for convenience, here's the complete JavaScript code for the example I posted:

    $(document).ready(function () {
        var map = null,
            initialCoordinates = {latitude: 40.71435, longitude: -74.00597},
            initialPoint = new Microsoft.Maps.Location(initialCoordinates.latitude, initialCoordinates.longitude),
            range = {
                top: 3,
                right: 5,
                bottom: 0.01,
                left: 5
            },
            mapOptions = {
                credentials:"BING-MAPS-API-KEY",
                disableKeyboardInput: true,
                disableZooming: true,
                enableClickableLogo: false,
                enableSearchLogo: false,
                showBreadcrumb: false,
                showDashboard: false,
                showMapTypeSelector: false,
                showScalebar: false,
                inertiaIntensity: 0.5,
                mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
                labelOverlay: Microsoft.Maps.LabelOverlay.hidden,
                center: initialPoint,
                zoom: 14
            };
    
        function GetMap() {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
    
            // Create nodes
            map.entities.clear();
            var pushpinOptions,
                pushpin,
                nodeCoordinates;
    
            for (var i = 0; i < 5; i++) {
                pushpinOptions = {width: null, height: null, htmlContent: '<div id="node' + i + '" class="node">' + i + '. Custom HTML</div>'}; 
                nodeCoordinates = {latitude: initialCoordinates.latitude + i * 0.005, longitude: initialCoordinates.longitude + i * 0.005};
                pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(nodeCoordinates.latitude, nodeCoordinates.longitude), pushpinOptions);
                pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click',
                    (function () {
                        var nodeId = i,
                            homeCoordinates = nodeCoordinates;
                        return function () {
                            console.log("node " + nodeId + " clicked.");
                            map.setView({center: new Microsoft.Maps.Location(homeCoordinates.latitude, homeCoordinates.longitude)});
                        }
                    })()
                );
                map.entities.push(pushpin);
            }
        }
    
        GetMap();
    });




    • Edited by d640k Friday, July 12, 2013 7:22 PM Typo.
    Friday, July 12, 2013 7:21 PM
  • That is a very strange issue. I've never seen it before and it looks to be a bug in Firefox and how it renders. I'll pass this on to our development team to see if there is any kind of workaround they can put together. I tested this on over 12 different browsers and it was only the latest version of Firefox that seemed to have this issue.

    http://rbrundritt.wordpress.com

    Monday, July 15, 2013 10:03 AM