Re: GWT-Maps -> Is this a desired behavior?
Thanks for the answer Eric. I will try out your hints.
On 17 Aug., 16:30, Eric Ayers 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 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
> > 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.getEleme
Re: GWT-Maps -> Is this a desired behavior?
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 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
> 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",
>>
Re: GWT-Maps -> Is this a desired behavior?
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
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.ge
GWT-Maps -> Is this a desired behavior?
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");
