Hi Paul, Take a look at this demo in JavaScript: http://code.google.com/apis/maps/documentation/overlays.html#Custom_Overlays
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 2009 http://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 -~----------~----~----~----~------~----~------~--~---
