none
Bing Maps on IE 11 browser, The mouse click event is only working when we have compatibility mode on. RRS feed

  • Question

  • I have tried out the code in this article in ASP.Net web forms with c#  and javascript.

    I am using Ajax to call the C# from Javascript and load the data from database.

    I have used following article to show the pushpins and there infoboxes.

    http://blogs.msdn.com/b/rbrundritt/archive/2013/11/08/multiple-pushpins-and-infoboxes-in-bing-maps-v7.aspx?CommentPosted=true#commentmessage

    My code works great on IE 11 , when I have compatibility mode on,

    but when compatibility mode is off, the mouse click event is not being received by the Javascript function.

    Is this expected behavior of bing maps, Are there any workarounds for this problem?


    Thanks
    Nate

    Wednesday, January 21, 2015 10:40 PM

Answers


  • The pointer events in the SVG standard are implemented slightly differently in IE 11, chrome and firefox with respect to previous versions.

    I had to  set the container div with pointer-events:none, to receive the mouse events.


    <div class="divRow" style="pointer-events: none;">
                        <div id="MapHolder" style="width:900px; height:540px;display:block; margin-left:5px;top:2px; ">
                        </div>
                    </div>



    Wednesday, February 4, 2015 6:22 PM

All replies

  • Take a look at this blog post and see if it resolves your issue: https://rbrundritt.wordpress.com/2014/03/07/fix-ie11-mouse-events-in-bing-maps-v7/

    http://rbrundritt.wordpress.com

    Thursday, January 22, 2015 12:08 AM
  • Thank you Ricky. 

    After adding 

      .MicrosoftMapDrawing, .MapPushpinBase
        {
        pointer-events: auto !important;
        }

    to the main css class, it  is showing a message saying

    validation CSS 3 auto is not a valid value for the pointer-events

    It was not working with out the compatibility view

    Best regards

    Nate

    Thursday, January 22, 2015 3:51 PM
  • Hi Ricky, I have tried using Chrome and I see the same issue. The mouse events are not being captured. 

    Here is my code

    <%@ Page Title="" Language="C#" MasterPageFile="~/Maps.Master" AutoEventWireup="true" CodeBehind="BingMaps.aspx.cs" Inherits="MyMaps.secure.BingMaps" %>
    ....
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server" >
      
        <asp:ScriptManager ID="ScriptManager" runat="server"
           EnablePageMethods="true" />
       <div id="MapHolder" style="; width:1000px; height:800px; " />
    
        <asp:Literal ID="Literal1" runat="server">
              </asp:Literal>
    </asp:Content>
    
    
    <asp:Content ID="Content3" ContentPlaceHolderID="ScriptSection" runat="server">
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
        </script>
        <script type="text/javascript" >
            var map = null, infobox, dataLayer;
            $(document).ready(function () {
                GetMap();
    
            });
            function GetMap() {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("MapHolder"),
                           { credentials: "lincensekey", zoom: 2 });
                
                dataLayer = new Microsoft.Maps.EntityCollection();
                map.entities.push(dataLayer);
    
                var infoboxLayer = new Microsoft.Maps.EntityCollection();
                map.entities.push(infoboxLayer);
    
                infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
                infoboxLayer.push(infobox);
                PageMethods.GetLocations(RequestCompletedCallback, RequestFailedCallback);
                
            }
    
            function AddData(MapPoints) {
               
                
                for (var i = 0, len = MapPoints.length; i < len; ++i)
                {
                    var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(MapPoints[i].lat),parseFloat(MapPoints[i].lon))
                        , {
                                icon: MapPoints[i].group,
                                height: 50, width: 60, text: MapPoints[i].city
                            });
                    pushpin.Title = MapPoints[i].name;
                    pushpin.description = MapPoints[i].desc;
                    Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
                    dataLayer.push(pushpin);
                }
            }
    
            function displayInfobox(e) {
                if (e.targetType == 'pushpin') {
                    infobox.setLocation(e.target.getLocation());
                    infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.description });
                }
            }
    
            function RequestCompletedCallback(result) {
                result = eval(result);
                AddData(result);
            }
    
            function RequestFailedCallback(error) {
                var stackTrace = error.get_stackTrace();
                var message = error.get_message();
                var statusCode = error.get_statusCode();
                var exceptionType = error.get_exceptionType();
                var timedout = error.get_timedOut();
    
                alert("Stack Trace: " + stackTrace + "<br/>" +
                    "Service Error: " + message + "<br/>" +
                    "Status Code: " + statusCode + "<br/>" +
                    "Exception Type: " + exceptionType + "<br/>" +
                    "Timedout: " + timedout);
            }
    

    Thursday, January 22, 2015 4:05 PM
  • This sounds odd. Normally the map control doesn't even load when in compatibility view as it emulates IE5. Are you sure you are in compatibility view?

    Does your page have the following metatag specified:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


    http://rbrundritt.wordpress.com

    Thursday, January 22, 2015 6:27 PM
  • This is from my master page

    ===========================================

      <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE-edge" />
            <meta name="viewport" content="width=device-width, intial-scale=1" />
            <meta name="description" content="Maps page" />
            <meta name="author" content="Nate" />

    ==============================================

    following is extract from HTML source of the page.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="ctl00_masterHead"><meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE-edge" />

    <meta name="viewport" content="width=device-width, intial-scale=1" />

    <meta name="description" content="Maps page" />

    <meta name="author" content="Nate" /> <!-- Boot strap core css file--> <link href="/bundles/BootstrapCss?v=TY9G6K_DGoaDhhopbcZQuFB0C-c09BXqiGsl0hs5aPc1" rel="stylesheet"/> <script src="/bundles/jQueryScripts?v=PpXIgPd-acH7ub_nX3SUf07eV6xpQFK5tLZT2-wF-rk1"></script> <link rel="stylesheet" href="../css/main.css" /><link rel="stylesheet" media="(max-width: 1680px)" href="../css/main1680x1050.css" /><link rel="stylesheet" href="../css/jquery-ui1.11.2.css" /> <title> </title></head>


    • Edited by SPTQs Thursday, January 22, 2015 6:48 PM added comments
    Thursday, January 22, 2015 6:44 PM
  • Odd. I can't reproduce this. Even without that CSS I mentioned it works fine. Try using the developer tools in IE to see if there is something overlaid on top of the pushpin that might be preventing the click from reaching it, like an hidden div or something.

    http://rbrundritt.wordpress.com

    Thursday, January 22, 2015 9:52 PM
  • Thanks Ricky for your suggestions,

    I went to IE developer tools and did not see any hidden div overlaying the map.

    I also tried to raising the Z order of the map to 500, PushPin to 501 and Infobox to 502 with no success on IE 11.


    In the IE 11 developer tools, when I simulate it for IE 10 or IE9, the mouse click events work like charm.

    Something with IE 11 and bingmaps on windows 7 running from visual Studio 2013 integrated environment with .Net 4.5 is blocking the mouse click event on bingmaps.

    The doubleclick on Map works fine and it zooms into the map.

    Any ideas on what could possibly be wrong?

    Thanks and best regards

    Nate


    Friday, January 23, 2015 3:32 PM
  • Can you try the source code that in the blog to see if the issue happens with that too? Trying to narrow down where the issue could be.

    Code that's in this post: http://blogs.msdn.com/b/rbrundritt/archive/2013/11/08/multiple-pushpins-and-infoboxes-in-bing-maps-v7.aspx


    http://rbrundritt.wordpress.com

    Friday, January 23, 2015 4:26 PM
  • Ricky

    I have used that blogpost to get my maps works in the first place. That blog post is acknowledged in the question I posted. following is the extract

    =====================

    I have used following article to show the pushpins and there infoboxes.

    http://blogs.msdn.com/b/rbrundritt/archive/2013/11/08/multiple-pushpins-and-infoboxes-in-bing-maps-v7.aspx?CommentPosted=true#commentmessage

    ===========================

    The blog was well written and has been quite helpful in refining my code.

    The blog post does not help in  addressing this IE 11 issue.

    when you get the bingmaps working on IE11, what is the environment you are using?

    thanks

    Best Regards

    Nate

    Friday, January 23, 2015 4:36 PM
  • I was asking you to try the code in that blog post as is in IE11 to see if you can reproduce the issue with it. Using the code in that blog post works fine in all browsers. There is something else causing your issue but we need to verify that you can't reproduce the issue with the original code on it's own.

    http://rbrundritt.wordpress.com

    Monday, January 26, 2015 7:25 PM
  • Sorry I misunderstood. I will try it and let you know.

    Thanks

    Nate

    Monday, January 26, 2015 7:44 PM

  • The pointer events in the SVG standard are implemented slightly differently in IE 11, chrome and firefox with respect to previous versions.

    I had to  set the container div with pointer-events:none, to receive the mouse events.


    <div class="divRow" style="pointer-events: none;">
                        <div id="MapHolder" style="width:900px; height:540px;display:block; margin-left:5px;top:2px; ">
                        </div>
                    </div>



    Wednesday, February 4, 2015 6:22 PM
  • I did some more work on it and nailed it down to following 

    We see the problem with mouse events on IE 11, 

    only if the Map holding div is within the <asp:Content tag.

    If it is outside the <asp:Content tag, it works fine.


    Thursday, February 12, 2015 2:56 PM