We help IT Professionals succeed at work.

managing events in  the webrowser control

270 Views
Last Modified: 2017-05-16
I have an app that uses to webbrowser control to show pontos with GPS coordinates along with data from the database. It is functioning OK using the bing maps.

But now in need to trap events such as pressing a pushpin, or dragging it, or rightclick and show som data in the database, so I would need to be able to trap those events and return the codes to my app. And I also need to return come information such as the new gps coordinates after pushpin drag.

I just don't know how to do it.


my javascripot current code is in the attached file, which already contains (after the main code, the type of code I need to include




Can anyone help?
map02.html
Comment
Watch Question

Jim Dettman (EE MVE)President / Owner
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017

Commented:
Normally this is not within Access's or the web browser controls capabilities.

But I know of one person that has hooked up the web browser control to java Script and could react to events.   I'll see if I can't get him to drop in and explain how.

Jim.
Gee! Thanks a lot. I guess that one way could be having the javascript writing to a local file with the event code and the data, and have the access reading the file every second or so.  I would have to drop the idea of pushpin drag (too many events to manage, but its doable). But I really don't know how to write a file on javascript..
Jim Dettman (EE MVE)President / Owner
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017

Commented:
I heard back from Jack Leach at dymeng.com, a fellow MVP.   He's a little tied up right now, but told me how to find that demo.

 Before we head down that path though, I want to make sure I understand the problem fully.

 Normally with the web browser control, you can navigate to a page and read the changes in the URL, and that's really about it.  The control only supports a couple of properties and methods.

 So if in the process of the user dropping a push pin the URL changes, then you can react to it and that is all you would need.

 What Jack did though is he came up with a method to hook-up VBA to Java Script, and if I remember from his demo correctly (it's been a couple years since I saw it), you could call methods in JS and also have VBA react to events raised in JS.

 But after thinking about this further based on some work I've done in this area, I'm not sure we need to go that far now.

 So the question is; does the URL change when you drop a push-pin or carry out other actions that you wish to react too?

Jim.
Hi Jim -

The basis of my code was provided by Microsoft at http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#pushpinLabels+JS  let me try to be clearer:

1. My database is populated with geographic data points and by using an html page (containing a version of the code) on my site, I am able to, using the web browser control. present it in a really convenient manner as you may see on the figure below.

2. But, i a very good manner, Bing  traps all events performing very useful functions.

3. However, as the client saw it functioning, immediately asked for more (not much, really important):
.   3.1 asked to right-click on a datapoint and open a form with all data point data (the form is ready but may only be accessed thought other forms)
   3.2 asked me to provide contour lines (that is really mor difficult, as I do not have resources for that and I am able to replace for a better analysis: but clicking on a point (or right-clicking) I will be able to provide him with a expectation of any chosen parameter Z value at that specific geo coordinate
3.3 asked my to provide a drag & drop of a point so he could correct the coordinates of points.

for this, ideally, I would need to have those events programmed in javascript, following microsoft published code,  and work accordingly.

for instance, a double-click on a mark would be sent back to ms/access and I would go on from that point.

So, answering back: the url does not change - it is always the same code (I am attaching it)

thanks for caring

joao

 
Screen-Shot-2017-05-08-at-13.25.21.pngmap02.html
President / Owner
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Hi Jim -

I reckon that the url really does not change and I am really open to change over to google (I actually started with google and went to a dead  end, nothing was work and saaaaaadly went back to BING - but then I have found the site I have mentioned you (http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#pushpinLabels+JS  ) where I have found all those almost ready to use examples (on the pin we even have the title /subtitle and a box where I put the key data on the data point).

So if I may have some help and be sure that would get similar functionality to the one I have described, (I am able to pay a little from my personal pocket) I would eagerly migrate back to google maps as this is mainstream mashup.

Right now I have only 2 places (very, very similar) on my code invoking bing. And those two places can be reduced to 1 with a small bit of coding so it could be an easy path.

joao
Jim Dettman (EE MVE)President / Owner
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017

Commented:
Sorry for the delay in responding....been pretty busy.

 I'm thinking you should stick with Bing Maps and either:

1. Use HTML

2. Or go with Jack's method.


  I think #1 is the best choice.   To make sure I'm understanding what is in the SDK though, you need to try a test.  Paste the following into Notepad and save it as TEST.HTM:

<!DOCTYPE html>
<html>
    <head>
        <title>loadMapAsyncHTML</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    </head>
    <body>
        <div id='printoutPanel'></div>
       
        <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        <script type='text/javascript'>
                var map;
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key'
                    });
                }
               
           
        </script>
        <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
    </body>
</html>

  Make sure you stick in your Bing Credentials in the middle of that.   Now in your app, set the web browser control's URL to C:\<path>\TEST.HTM and see if it loads the map.

 If it does, then you can use the HTML tab in the SDK to get the HTML for whatever operations you need to perform without resorting to any real tricks or work a rounds.

Jim.
will do in a moment !
thanks
joao
It does show the map, yes. but then what? I reckon that I need now to convert the javascript function to an html function with the same arguments so it will display the same stuff.

but then what happens in the ms/access vba? how to I handle the events?

My current code, in the page is:

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>pushpinLabelsHTML</title>
            <script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario" async defer></script>
            <script type="text/javascript">
                  var map;

                  function loadMapScenario() {
                        var options = { credentials: "AtmgIDsskKTlLBNr_LUOcdlK9ZFu3ZPBCdN_o5OSIh01ShsuR4mmzZAuD3PvGyaQ", zoom:18 };
                        map = new Microsoft.Maps.Map(document.getElementById("myMap"), options);
                  }

                  function addPushpin(strLatGPS, strLgtGPS, strLetraPushPin, strTitulo, strSubTitulo, strInfoTitle, strInfoContent) {

                        var center = new Microsoft.Maps.Location(strLatGPS*1, strLgtGPS*1);
                        var pin = new Microsoft.Maps.Pushpin(center, {text: strLetraPushPin, title: strTitulo, subTitle: strSubTitulo});
                        map.setView({center:center});        
                        addInfobox(strInfoTitle, strInfoContent);
                        map.entities.push(pin);      

                        function addInfobox(infoTitle, infoContent) {
                              var infobox = new Microsoft.Maps.Infobox(center, { title: infoTitle, description: infoContent, visible: false });
                              infobox.setMap(map);
                              Microsoft.Maps.Events.addHandler(pin, 'click', function () {
                                    infobox.setOptions({ visible: true });
                              });
                        }

                  }
      
            </script>
      </head>
      <body>             
            <div id="myMap" style="width: 100vw; height: 100vh;"></div>
      </body>
</html>


is it possible to have this addInfobox function in html? how do I invoke it?

thanks for help
joao
Jim Dettman (EE MVE)President / Owner
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017

Commented:
Joao,

  Wanted to let you know that I have not forgotten about this, just have gotten very busy.   I tried to get back to this all day yesterday, but was unable to do so.   May not be able to today either, but I should be able to find some time over the weekend if not.

  I will add at this point that I don't have an answer for what you want to do and I don't think switching to Google will give you the functionality that you need.

  So this is something I will need to figure out.  Normally there is no tie between VBA and JS events and I don't know if Jack's technique will work in the web browser control.

Jim.
Hi Jim - really thanks for the help.

And I really do appreciate it.

However, the reality is that I am using the wrong tool and using it really in the border line. Of course, if one does not have a dog, may hunt with a cat; but I am pretty sure that the outcome will be really lesser.

Of course, I am keen on switching to google - it looks really promising. But I do also need to quit ms/access - and not because of this. In the end, the future looks that I really need to leave desktop and move to web-based apps (eg. html5/javascript) so thats's what I will do.

From a quick test I looks that the best development environment will be netbeans - if you can recommend any other one, even paid, I'll sure test it.

So, in the end, I'll modify a bit the interface, dispensing the "clicks" and finalise the software.

Then will migrate "back to the future"

and thanks again - I'll close the question and award the points

joao
great HELP!
Jim Dettman (EE MVE)President / Owner
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017

Commented:
OK, got back to this for a bit and found that Jack actually wrote up a very nice piece on all this:

http://www.dymeng.com/techblog/browseembed-html5javascript-for-your-access-projects/

http://www.dymeng.com/browseembed/bemb-quickstart-guide/

 I've gone through it and it looks like it would do the job, but I have not tried it yet.   Given your comment above, I want to make sure you haven't already moved on.

 I do apologize that this question dragged out so long.  I wish I could have stayed on top of it more.   The question was very interesting and something I wanted to explore with you.

 For the moment, I'll put it off into my interesting project pile, unless you come back and say that you want to continue.

Jim.
I am really interested in pursuing this option. it as a fastest way! (and better) - and I'll migrate later on. I'll check the links and open a related question so you may be awarded additional points
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.