Monday, December 07, 2009

Sidebar with makeMarker() v3

Wouldn't that be convenient if makeMarker(options) would construct a sidebar entry as well. See it here.

A separate SidebarItem() constructor was written. It creates a button element and appends that to a div with id="sidebar" by default. makeMarker() calls the constructor if you have set an option property {sidebarItem: "My label"}

The basic button element needs some CSS cure. You can also style individual sidebar items by setting different CSS class names for them. {sidebarItemClassName: "important_item"}

The events are set to work bidirectionally.
  • click on sidebar -> click on marker
  • select on sidebar -> click on marker (select by [Tab])
  • click on marker -> focus on sidebar
  • mouseover on sidebar -> mouseover on marker
  • mouseout on sidebar -> mouseout on marker
One of the reasons why I selected a button element was that it is 'focusable' and 'selectable'. You can open an info window by stepping the focus to a sidebar item by [Tab] or [Shift]+[Tab] and select the item by [Enter] or [Space] (some browsers). That is called accessibility.

Also you can use :hover and :focus CSS pseudoselectors. (:focus does not work with IE)

SidebarItem() instance has methods addIn() and remove(). We need addIn() to decide where to add the item. That helps to implement the categories.


purlut said...

Very nice,
It should be more feasable when the sidebar own a scrollbar when it is longer than the screenheigth.
Another whisable thing is to obtain a setup who fills the available screen. Thus a the left a eventually scrollable sidebar and the map filling the righter part.
I tried it with parameters, but it doesn't work. I loses the map.
Someone know how to do it ?

Esa said...

I will prepare an example soonest.

Esa said...

Fullscreen example is now online

It is based on absolute positioning and setting all the four position attributes: top, right, bottom and left.

purlut said...

Is not working in IE
Works fine under FF

Esa said...

Sorry, I forgot

html, body {height:100%;}

Fixed now.

purlut said...

I tried your code and in FF it works fine. However, in IE it doesn't ...
Here is the code

(download please because it is not accepted)
http://www; and rename it to test1.html


Esa said...

IE7 and IE8 seem to be doctype dependent and IE6 doesn't support 'right' and 'bottom' dimensioning at all.

I ended up using separate CSS for IE wrapped in conditional comments.

The example page is updated now.

Albert said...

Can you tell me how I can remove the content of the sidebar?

I'm refreshing the content of the map without any problem (removing all the markers) and reloading them again. But the sidebar is another story for me.


deanf7 said...


makeMarker has saved me a ton of time. I've modified it some for my needs, but it looks like it adds each item to the DOM independently. I've tried and failed so far to collect the DOM fragments and append them when the loop is finished. Have you thought about using a similiar approach?

Marc said...


I'm using this code and it works perfectly! I just have an issue: is there any way to change sidebar buttons to links? It would be easier to style with CSS...

Thank you! :)

caro said...

How would you organise your marker and categorized your sidebar e.g. almost like an accordion menu where marker 1, 2 and 3 will go under sidebar heading/button one and marker 4,5 will go under sidebar button/heading two. etc.

rayo said...

I am looking to adapt your v2 -

- have you updated this format to v3 - I very much like the format with the categories on the left - centered map and the information (novel) on the right - a very attractive format.