Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    smartgwt and GWT maps API

    (sorry for the repost - I had put this in the wrong forum)

    I'm using the GWT Map libraries to embed a google map or earth component into a GWT/smartgwt application. Everything mostly works so far, but with one exception.

    When I am using the earth plugin map type (using a plugin into Firefox, etc) and I use SC to create an error dialog or message dialog, everything hangs. I'm guessing that the SC dialog is underneath the earth plugin and is just stuck waiting for someone to press an OK/Cancel button.

    Any ideas how to deal with pop-ups/dialogs while using a plugin such as earth in the application? Is there some trick for placing the dialogs somewhere where they can be viewed/dismissed?

    #2
    What does the google earth plugin use? It it flash, js/dhtml or something else? SmartGWT already users pretty high zIndexes for its components but try examining / tweaking the zIndexes using firebug to get to the root of the issue.

    Sanjiv

    Comment


      #3
      I believe it is its own native plugin (for firefox, chrome, IE, and Safari - I'm using firefox). I'm sure it has something to do with the plugin as when I set the map type to one of the "normal" google maps types, I have no problem with the SmartGWT dialogs.

      Can one even overlay js/canvas's over a native plugin like g-earth (or flash) in a browser? I've never tried to so I just presumed not. If correct, is there a way for me to control where to place the SC dialogs such that they don't overlay the plugin? In particular, by setting a rectangle bounding area instead of centering in the entire parent canvas.

      Comment


        #4
        Apparently, the problem exists on Firefox. It appears to be working on Safari. I haven't tried IE. So something about Firefox is defeating any special shim functions under smartgwt widgets (I read in a separate forum post that smartgwt was using shims to overlay native plugins).

        Comment


          #5
          Hello, I am initating devs that will merge Google earth API and smartGWT.

          I'd like to have an app with several panels in the layout, one containing the google earth (GE).
          To simplify, imagine 2 panels, 1 with a smart GWT table (localizable items) and the other with GE (same items localized).

          I want to sync the view so that the user selects a row, the earth rolls to the item.

          What's the best way to do that?

          * a panel with GE (HTML panel?)
          * a panel with a wrapper of GE I have to write?
          * a GWT MAP wrapper? knowing that the latest version V3 does not support earth type
          * a div?
          * other?

          thank"s
          Last edited by dao; 16 Nov 2010, 02:43.

          Comment


            #6
            You can use one of SmartGWT's HTML containers (HTMLFlow) and place the Google Earth plugin HTML in there. You will then need to write some JSNI code to interact with the plugin as records are selected and so forth.

            If you'd prefer to have this built for you and a Google Earth component integrated into the framework, consider Feature Sponsorship as a way to get this done.

            Comment


              #7
              hello, thank's for the tip.

              I tried to include the google map wrapper into a smartGWT canvas. this wrapper can be found here: http://code.google.com/p/gwt-google-apis/

              It works fine using the showcase item (GWT integration). However, when I switch to the earth view, it seems that some mouse events are not forwarded to the earth window.

              In the example (below), when I right click, mouse wheel, everything's fine. But the left click is KO.
              If I comment
              Code:
              map.setCurrentMapType(MapType.getEarthMap());
              the pan works fine clicking left.
              any clue?

              Code:
              package com.test.client;
              
              
                
              import com.google.gwt.core.client.EntryPoint;
              import com.google.gwt.core.client.JavaScriptObject;
              import com.google.gwt.maps.client.InfoWindowContent;
              import com.google.gwt.maps.client.MapType;
              import com.google.gwt.maps.client.MapWidget;
              import com.google.gwt.maps.client.Maps;
              import com.google.gwt.maps.client.control.LargeMapControl;
              import com.google.gwt.maps.client.event.EarthInstanceHandler;
              import com.google.gwt.maps.client.geom.LatLng;
              import com.google.gwt.maps.client.overlay.Marker;
              import com.google.gwt.user.client.Timer;
              import com.google.gwt.user.client.Window;
              import com.google.gwt.user.client.ui.VerticalPanel;
              import com.smartgwt.client.widgets.Canvas;
                
              public class GwtShowcaseSample implements EntryPoint {  
                
                  public void onModuleLoad() {  
                  	   /*
                  	    * Asynchronously loads the Maps API.
                  	    *
                  	    * The first parameter should be a valid Maps API Key to deploy this
                  	    * application on a public server, but a blank key will work for an
                  	    * application served from localhost.
                  	   */
                  	   Maps.loadMapsApi("your key", "2", false, new Runnable() {
                  	      public void run() {
                  	    	  Canvas c = new Canvas();
                  	    	  c.setWidth100();
                  	    	  c.setHeight100();
                  	    	  c.addChild(createMap());
                  	    	  c.draw();
                  	      }
                  	    });
              
                  }  
                  
                  private VerticalPanel createMap() {
              	    // Open a map centered on Cawker City, KS USA
              	    LatLng cawkerCity = LatLng.newInstance(39.509, -98.434);
              	
              	    final MapWidget map = new MapWidget(cawkerCity, 2);
              	    map.setSize("100%", "100%");
              	    // Add some controls for the zoom level
              	    map.addControl(new LargeMapControl());
              	
              	    // Add a marker
              	    map.addOverlay(new Marker(cawkerCity));
              	
              	    // Add an info window to highlight a point of interest
              	    map.getInfoWindow().open(map.getCenter(),
              	        new InfoWindowContent("World's Largest Ball of Sisal Twine"));
              	    
              	    map.addMapType(MapType.getEarthMap());
              	    map.setCurrentMapType(MapType.getEarthMap());
              	    map.getEarthInstance(new EarthInstanceHandler() {
              
              	        public void onEarthInstance(EarthInstanceEvent event) {
              	          final JavaScriptObject earth = event.getEarthInstance();
              	          if (earth == null) {
              	            Window.alert("Failed to init earth plugin");
              	          } else {}
              	        }
              	      });
                      VerticalPanel vPanel2 = new VerticalPanel();  
                      vPanel2.setSpacing(15);  
                      vPanel2.setHeight("500px");
                      vPanel2.setWidth("800px");
                      
                      vPanel2.add(map);
              	    
              	    return vPanel2;
                  }
                
              }

              Comment


                #8
                hello again,

                I just replaced
                Code:
                Canvas c = new Canvas();
                c.setWidth100();
                c.setHeight100();
                c.addChild(createMap());
                c.draw();
                with

                Code:
                RootLayoutPanel.get().add(createMap());
                and it works perfectly right now. It was the lonely smartGWT object. The others are pure GWT. seems to be a smartGWT issue, isn't it?

                or I did not catch how to use the canvas object... help!

                thank's

                Comment


                  #9
                  hello, still working on that:
                  I tried today on windows XP, and it is OK. It has failed on MacOSX snow leopard in safari...

                  so it works fine on firefox and chrome under XP.

                  Comment


                    #10
                    Our experience is...a bad one.

                    After many days of frustrating debugging and analysis by several developers it turned out that IE(9) totally messed up tabbing after Google Maps was displayed once. We took great care that tabbing through the application forms always placed the focus in the expected field.
                    After a page with Google Maps was shown at least once you could tab from one field to the next and IE would place the focus in the address bar. In some cases it would even get stuck moving the focus back to the document (i.e. it would cycle only through its own widgets).
                    None of the other browsers we tested showed this behavior. To rule out that our Google Maps integration code is borked we integrated both http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-maps-3.8.0-pre1.zip and https://github.com/branflake2267/GWT-Maps-V3-Api (individually) and got the same results.
                    A first primitive prototype indicates that the issue is gone if Google Maps is integrated through an iframe that is embedded into the GWT app.

                    Comment

                    Working...
                    X