Thanks for the answer Eric. I will try out your hints.
On 17 Aug., 16:30, Eric Ayers <[email protected]> wrote:
> Hi Paul,
> Take a look at this demo in JavaScript:
>
> http://code.google.com/apis/maps/documentation/overlays.html#Custom_O...
>
> The demo code is called 'CustomOverlayDemo' in the HelloMaps API demo
>
> I think part of the problem is that your code draws into the viewport
> with pixel values - you need to work with lat-lng values for things to
> correctly drag around in the map. Also, you are re-creating the divs
> inside of redraw() - the should be created in initialize().
>
> -Eric.
>
> On Sun, Aug 16, 2009 at 4:09 PM, Paul van
>
>
>
>
>
> Hoven<[email protected]> wrote:
>
> > Okay, instead of displaying the divs like a chessboard pattern i get
> > this output on the map:
>
> >http://picasaweb.google.de/paul.van.hoven/GWTMaps#5370655848831663250
>
> > On 16 Aug., 21:35, Paul van Hoven <[email protected]>
> > wrote:
> >> I was playing with GWT-Maps to implement something for my website. My
> >> example uses the com.google.gwt.maps.client.overlay.Overlay abstract
> >> class. I want to put a couple of transparent divs over the actual map
> >> which will give the user some certain information. Anyway the purpose
> >> is not important.
>
> >> Concretly spoken: I want to overlay the map with transparent divs such
> >> that the resulting orientation of the div is similar to a chessboard
> >> pattern. But somehow it does not work although I think I made
> >> everything correct.
>
> >> Here is the class that extends
> >> com.google.gwt.maps.client.overlay.Overlay and produces (imho) the
> >> error.
>
> >> [code]
> >> public class HeatMap extends SimplePanel implements ClickHandler {
>
> >> MapWidget map;
> >> public HeatMap() {
>
> >> if( map == null ) {
> >> LatLng germany = LatLng.newInstance(51.15, 10.5);
> >> map = new MapWidget( germany, 5 );
> >> map.setSize("500px", "300px");
>
> >> DOM.setStyleAttribute( map.getElement(), "border",
> >> "#444 solid
> >> 1px");
> >> DOM.setStyleAttribute( map.getElement(), "margin",
> >> "auto");
> >> // Add some controls for the zoom level
> >> map.addControl(new LargeMapControl());
> >> map.addControl(new MapTypeControl());
>
> >> }
>
> >> VerticalPanel vPanel = new VerticalPanel();
> >> vPanel.add( map );
> >> PushButton showRectsButton = new PushButton( "Go!", this );
> >> showRectsButton.setStyleName("StandardButton");
> >> vPanel.add(showRectsButton);
> >> add( vPanel );
> >> }
>
> >> public void onClick(ClickEvent event) {
> >> map.addOverlay( new ColoredRectangle( map ) );
> >> }
>
> >> private class ColoredRectangle extends Overlay {
>
> >> MapWidget map;
> >> AbsolutePanel p1,p2,p3,p4;
> >> public ColoredRectangle( MapWidget map ) {
> >> p1 = new AbsolutePanel();
> >> p2 = new AbsolutePanel();
> >> p3 = new AbsolutePanel();
> >> p4 = new AbsolutePanel();
> >> this.map = map;
> >> }
>
> >> @Override
> >> protected Overlay copy() {
> >> return new ColoredRectangle( map );
> >> }
>
> >> @Override
> >> protected void initialize(MapWidget map) {
> >> p1.add( new Label("1") );
> >> map.getPane( MapPaneType.MAP_PANE).add(p1);
> >> p2.add( new Label("2") );
> >> map.getPane( MapPaneType.MAP_PANE).add(p2);
> >> p3.add( new Label("3") );
> >> map.getPane( MapPaneType.MAP_PANE).add(p3);
> >> p4.add( new Label("4") );
> >> map.getPane( MapPaneType.MAP_PANE).add(p4);
> >> }
>
> >> @Override
> >> protected void redraw(boolean force) {
> >> if( !force )
> >> return;
>
> >> //p1 is placed at the top leftern side
> >> DOM.setStyleAttribute( p1.getElement(),
> >> "backgroundColor", "grey");
> >> DOM.setStyleAttribute( p1.getElement(), "width",
> >> 250+"px" );
> >> DOM.setStyleAttribute( p1.getElement(), "height",
> >> 150+"px" );
> >> int left = 0;
> >> int top = 0;
> >> DOM.setStyleAttribute( p1.getElement(), "left",
> >> left+"px" );
> >> DOM.setStyleAttribute( p1.getElement(), "top",
> >> top+"px" );
>
> >> //p2 is placed right beside of p2
> >> DOM.setStyleAttribute( p2.getElement(),
> >> "backgroundColor",
> >> "orange");
> >> DOM.setStyleAttribute( p2.getElement(), "width",
> >> 250+"px" );
> >> DOM.setStyleAttribute( p2.getElement(), "height",
> >> 150+"px" );
> >> left = 250;
> >> top = 0;
> >> DOM.setStyleAttribute( p2.getElement(), "left",
> >> left+"px" );
> >> DOM.setStyleAttribute( p2.getElement(), "top",
> >> top+"px" );
>
> >> //p3 should be placed under p1
> >> DOM.setStyleAttribute( p3.getElement(),
> >> "backgroundColor", "red");
> >> DOM.setStyleAttribute( p3.getElement(), "width",
> >> 250+"px" );
> >> DOM.setStyleAttribute( p3.getElement(), "height",
> >> 150+"px" );
> >> left = 0;
> >> top = 150;
> >> DOM.setStyleAttribute( p3.getElement(), "left",
> >> left+"px" );
> >> DOM.setStyleAttribute( p3.getElement(), "top",
> >> top+"px" );
>
> >> //and p4 under p2
> >> DOM.setStyleAttribute( p4.getElement(),
> >> "backgroundColor",
> >> "yellow");
> >> DOM.setStyleAttribute( p4.getElement(), "width",
> >> 250+"px" );
> >> DOM.setStyleAttribute( p4.getElement(), "height",
> >> 150+"px" );
> >> left = 250;
> >> top = 150;
> >> DOM.setStyleAttribute( p4.getElement(), "left",
> >> left+"px" );
> >> DOM.setStyleAttribute( p4.getElement(), "top",
> >> top+"px" );
> >> }
>
> >> @Override
> >> protected void remove() {
> >> map.removeOverlay( this );
> >> }
> >> }
>
> >> }
>
> >> [/code]
>
> >> Please let me know if I made something wrong or if this is a bug.
>
> --
> Google Code Jam 2009http://code.google.com/codejam
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
