What could be the reason for the sudden halt in Here Maps JS events firing upon being integrated into a .NET WebBrowser control

I've set up an interactive Here Maps map in Legacy mode, complete with a tap event listener added in the following manner:

<!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({
            // Real API key omitted for security reasons
            'apikey': 'notARealAPIKeyPleaseSubstituteForARealOne'
        });

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

        // Instantiate (and show) 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>

While everything functions smoothly in browsers like Chrome and IE11, with the ability to drag the map and see tap event details logged in the console, issues arise when this page is introduced as the URL for a .NET WebBrowser control within a WinForms project. Suddenly, both the map dragging and tap events cease to work without any error messages appearing in the console. It's almost as if there's something preventing the firing of map events within that environment.

I've attempted the registry adjustment mentioned in this post to direct the WebBrowser in the WinForms app to utilize IE11 exclusive of IE7 Compatibility Mode (and confirmed proper application through a user agent checker), yet to no avail. Running the page within the Visual Studio debugger while loaded into the WinForms app confirms it reaches the addEventListener line flawlessly. To further troubleshoot, I included a button on the page with a click event, which executed perfectly.

I'm beginning to feel stumped by the situation. Could there be an overlooked detail, or does the WebBrowser control exhibit peculiar behavior causing these events not to trigger? If so, is there a workaround available?

Answer №1

Support for Older Systems:
Includes Internet Explorer 9, 10, 11 and iOS WebView desktop Compatible with iOS 11+

If you're interested in learning more about browser support for JavaScript APIs, check out:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The event "subscriptionRemoved" is not being triggered when a password change is made on the Microsoft Graph API

Utilizing the Microsoft Graph API, I have set up subscriptions to receive notifications for calendar events through Node.js. As per the guidelines outlined in the documentation on Enhancing notification reliability for Outlook resources (preview), it speci ...

Guide to building a simple AngularJS webpage to fetch and display RESTful JSON data

I am in the process of developing a simple webpage that displays data retrieved from http://rest-service.guides.spring.io/greeting. The JSON output looks like this: {"id":2273,"content":"Hello, World!"} This is the HTML code I am using: <body ng-app ...

Modify the font style of the recommended actions buttons within the webchat interface

I am attempting to modify the font of the "suggested actions" button similar to how it is demonstrated in this reference for changing the font of the bubble text: https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md In the provided exa ...

Having trouble activating Ajax code in jquery

I have integrated the swal (SweetAlert) UI for confirmation messages in my project. In my jQuery code, I have an Ajax function to remove an item when the user clicks on "Yes, Delete It." However, for some reason, the Ajax code is not triggering as expecte ...

Differences between JSX and creating instances of component classes

Could someone please clarify the distinction between the following two statements? let instance1 = new CustomComponent(); and let instance2 = <CustomComponent /> When checking in the Chrome debugger, I see the following: for instance1 CustomComp ...

Creating a never-ending scroll with a combination of throttling and debouncing techniques

I have a list with a pager where I am attempting to implement an effect that when you request the next/previous page, the current list is automatically scrolled to the end/beginning. While backward scrolling works fine, forward scrolling often pages multip ...

AngularJS allows for the creation of 2D arrays using the $Index

Currently, I am working on a project using AngularJS that involves creating a spreadsheet from a 2D array generated by the ng-repeat function. As part of this project, I am developing a function to update the initial values of the array when users input ne ...

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

When utilizing Twitter Bootstrap, the validation classes like has-error or has-warning must be added to the wrapping form-group element to style both the input and its label. However, Knockout-Validation directly adds the class to the input element itself. ...

Warning: Invariant Violation - The specified TurboModuleRegistry.getEnforcing('RNDocumentPicker') cannot be located

I've encountered the following error in my React Native project: ERROR: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNDocumentPicker' could not be found. Verify that a module by this name is registered in the native binar ...

Is the order of state variables important in React components?

Upon executing the code below, an error "Cannot read properties of null (reading 'login')" occurs, triggered by reaching the return statement at the end. This error persists despite the presence of checks for the boolean before the return stateme ...

What is the process of encoding a string for HTML display using JavaScript?

Recently, I developed a webpage for creating blog posts. To handle the description input, I integrated CKEDITOR. However, when I save the data in my mongo database, it is stored as: '<p>How are you?</p>\r\n' Surprisingly, ...

What is the best way to ensure that an input tag within a fieldset tag is required

I am currently working on creating a sign-up page using HTML and JavaScript. However, I am facing an issue with making the input tag required in the HTML code. The following code snippet does not seem to be working as expected: <input type="email" requ ...

Tips for personalizing an angular-powered kendo notification component by adding a close button and setting a timer for automatic hiding

I am looking to enhance the angular-based kendo notification element by adding an auto-hiding feature and a close button. Here is what I have attempted so far: app-custom-toast.ts: it's a generic toast component. import { ChangeDetectorRef, Componen ...

What is the best way to retrieve an item using a composite key?

const dynamoDB = new AWS.DynamoDB.DocumentClient(); var parameters: any = {}; parameters.TableName = 'StockDailyCandles'; var primarykey = { 'symbol': 'AAPL', 'datetime': '640590008898' }; // sa ...

Autocomplete with Avatar feature in Material UI TextField

Is it possible to display an avatar in the text field of the autocomplete material-ui component when using the getOptionLabel prop, which only accepts a string? The expected UI shows a profile picture and name for each option. Can we achieve the same thi ...

Is it possible to retrieve the complete HTTP response text using Node.js from a HTTP module's .get response?

I have a straightforward web server set up: const ws = require('http'); ws.createServer( function(req,res) { console.log('request received'); res.write('Hello world'); res.end(); }) ...

A guide on how to examine the array index within a nested array

Let's consider this scenario with arrays: numbers = [[3,5],[2,4]] elements = [2,4] It seems like the array numbers contains the array elements But when we try to find the index of elements in numbers, it returns -1 Any thoughts on how to tackle th ...

Exploring the capabilities of JQuery's attributes

If I have the following div elements: <div class="hat" rel="cap"> <div class="hat" rel="pine"> <div class="hat" rel="mouse"> What is the JQuery syntax for executing a "where" condition? Here's an example: $("div.hat").remove WHER ...

"Doubling Up: The Art of Adding Elements to a Polymer

I am currently working on a to-do application using Polymer 2.0. One issue I'm facing is that when I add a note, it adds it as expected. However, when I try to add another note, it duplicates the notes in the array. I am having difficulty pinpointing ...

Does the Cors problem happen exclusively during a "put" request?

I am currently developing an Angular application that utilizes ng-resource. The backend service API is created using Asp.Net Core web api and CORS has been enabled. Here is the code snippet for service.js: .factory('D2Service', ['$resource ...