Map Kitchen [part 4]
SideBlock() GControl object
Collapsible sidebar makes a map page more usable especially with small displays. The implementation in maps.google.com is sophisticated. The map doesn't pan when it is largened though its centerpoint shifts. Markers and infowindow don't show any flicker. No waiting for new tiles to load.
How is it made
The map is actually full sized all the time. The sidebar covers a part of it when not collapsed. Clever, but not very simple. There are some...
Technical challenges
- Controls must be moved back and forth.
- Zooming in/out must be focused to a virtual centerpoint.
- Infowindow should avoid going under the sidebar.
- Map bounds must be calculated for the smaller viewport.
- Overview map should follow the changing viewport.
I don't know the Google's solutions but I did it following way.
Controls
Placing control elements is straightforward by
GControlPosition().
Google logo was also made a
GControl().
These repositioned controls are added/removed on map.
The original controls are not switched. They rest and hide behind the expanded sidebar.
The GScaleControl was positioned ouside sidebar area.
Zooming
The virtual centerpoint of the reduced map is calculated from the pixel shift. The point is entered to
GMap2.setFocus() method. The method makes in/out zooming to happen to/from the given point. Unfortunately the method is undocumented.
Infowindow
Infowindow avoids GControl elements. The sidebar block was subclassed as a
GControl. Its constructor
new SideBlock(opts?) constructs also the [Sidebar] button.
Bounds
The
already introduced GMap2.showBounds() made the task very simple.
Overview map
This is bad one. The map of
GOverviewMapControl() has no access anymore. The undocumented
getOverview() method is gone. The only thing that would need adjustment are the two rectangles that show the viewport. Constructing an overview map from scrath is quite a big task compared to the issue.
Events
There are 'open' and 'close' GEvents on SideBlock object available. Also
SideBlock.isVisible property is provided.
Methods
show() and
hide() methods perform the same as [close] and [sidebar] buttons do.
Contents
Contents are appendChilded to the SideBlock after it is added on map. Syntax:
SideBlock.container.appendChild(dom_obj). In this example the div containing this story is appendChilded. Hopefully something more useful will usually be appended. Like a
SideBar object with categories from
Part_[3].
Blog
.