Why do Here Maps JS events stop firing when loaded into a .NET WebBrowser control?

Question

I have an interactive Here Maps map running in Legacy mode, with a tap event listener added, like so:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
    <div>
        <div style="width: 640px; height: 480px" id="mapContainer"></div>
    </div>

    <script type="text/javascript">
        // Initialize the platform object
        var platform = new H.service.Platform({
            // We use a real API key but it's not included here for obvious reasons
            'apikey': 'notARealAPIKeyPleaseSubstituteForARealOne'
        });

        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();

        // Instantiate (and display) a map object
        // Using raster maptype and P2D for compatibility with IE11
        var map = new H.Map(
            document.getElementById('mapContainer'),
            maptypes.raster.normal.map,
            {
                zoom: 12,
                center: { lat: -33.81, lng: 150.78 },
                pixelRatio: window.devicePixelRatio || 1,
                engineType: H.map.render.RenderEngine.EngineType.P2D
            });

        // Add a default UI to the map
        var ui = H.ui.UI.createDefault(map, maptypes);
        // Make the map draggable
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

        // Add a listener for the 'tap' event on the map
        map.addEventListener("tap",
            function (evt) {
                console.log("Map tapped!", evt)
            });
    </script>
</body>
</html>

This works all well and fine in browsers like Chrome and IE11, with the map being draggable and tap event details being logged to the console. However, as soon as this page is added as the URL for a .NET WebBrowser control in a WinForms project, the map dragging and tap events suddenly stop working, with no errors being logged to the console. It's almost as if something there is preventing the map events from firing for some reason.

I've already tried the registry hack detailed in this post to force the WebBrowser in the WinForms app to use IE11 without IE7 Compatibility Mode (and verified this was applied properly with a user agent checker), to no avail. I've also tried running the page as it's loaded into the WinForms app in the Visual Studio debugger, and it's definitely hitting the addEventListener line with no problems. The last thing I tried was adding a button to the page with a click event, and this works fine too.

I feel like I'm running out of options here. Is there something I'm overlooking, or is there some weird behaviour in WebBrowser controls that would prevent these events from firing? If so, is there a way around it?

Attach the JavaScript+Script+WebKit debuggers and the JavaScript Console to the Form where you added your WebBrowser Control and see what script throws (missing `IndexedDB` support, probably). — Jimi, Jun 17 '20 at 07:30
Yeah, that's probably the second thing I tried, opening up the form on its lonesome, attaching a script debugger to it through Visual Studio and reloading the page. It loaded with no fuss and no errors, so I don't have a clue what would be blocking the events. There's nothing on the page that uses IndexedDB to my knowledge, unless HERE uses it in the background or something. — Hoppeduppeanut, Jun 17 '20 at 23:30
Not the Script Debugger, the JavaScript Debugger AND the Script Debugger AND the WebKit Debugger. Select these 3. The latter will give you some more info. — Jimi, Jun 18 '20 at 05:44
You didn't say whether IE11 **can** use that tool. If it doesn't, the WebBrowser Control is of course out of the picture. Use another. You could also test WebView2 for WinForms, it's kind of working now. — Jimi, Jun 18 '20 at 05:50
Oh that's the thing, it does work in IE11 with no issue (hence why I say "This works all well and fine in browsers like Chrome and IE11"). Having said that I must've been blind when I was looking at things to attach to, because I didn't see the WebKit debugger until just now. I'll give that a shot and see if that gives anything else. — Hoppeduppeanut, Jun 18 '20 at 06:15
There exist two versions of IE 11: the one originally installed in Windows 7 machines and a newer version, installed in Windows 10 machines. The latter is slightly different and supports WebKit functions better. I doubt the WebBrowser Control has an emulation mode for that (there's no emulation mode that can be selected). You may want to test whether it works in a Windows 7 machine installation. Anyway, you have other options. — Jimi, Jun 18 '20 at 06:33

score 0 · Answer 1 · answered Jun 24 '20 at 06:23

Legacy support1:
Internet Explorer 9, 10, 11 iOS WebView desktop iOS 11+

To know more about the browser support for JS APIs, please refer : https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/why-use.html

Why do Here Maps JS events stop firing when loaded into a .NET WebBrowser control?

1 Answers1