Map Kitchen [part 5] ZMarker

GMarker is quite a complicated object. That is why a few hundread markers are too heavy a load for poor browsers. Loading even more features on GMarker doesn't sound sensible. Well, there is some sense if the new features enhance the UI so that user doesn't have too zoom in/out that often.

Z-index switching is a way to make each marker reachable on a crowded map. It is one of the simpliest solutions to the eternal markers-too-close-together problem. The marker that is clicked and the info window was read, is thrown behind the others.

The technique was first published in Dec 2006. The code of the original test page was once again so messy that not very many people have applied the idea. Now it is written as a simple to use GMap2 method createZMarker(). We need to know the status of infowindow, that is why it is a GMap2 method.

I haven't been promoting the technique very actively because it was based on an undocumented option of GMarker. The ZIndexProcess option has been documented for a few months now but still the documentation doesn't  tell the full truth. The ZIndexProcess function is documented to be called when marker is addOverlayed and when marker's infowindow is opened. Yes, that happens but the function is called also when the infowindow is closed. That is the most valuable feature but still undocumented and maybe a bug.

Whether the infowindow is opening or closing is determined by status of GMap2.getInfoWindow().isHidden(). If the timing of that flag changes, the z-index swap starts behaving wrong way. Live page using this method should be locked to a certain api version and tested with new version always before updating. That is actually a good practice anyway.

There have been some discussion about new documented way to control z-index. If we get it, we could control z-index also by mouseover. Go and star the request if you find it useful.

Marker icon color change is independent of z-index process but it is built in createZMarker(). I find it an important feature for the journey towards better UI. It makes co-operation between sidebar and markers more efficient.

The marker icons are created by Google Charts API using MapIconMaker script. The markers are slightly transparent which looks good but harms color contrast in very crowded places.

Map Kitchen [part 4]

Sidebar of maps.google.com can be collapsed to get full map view. The way it works is impressive. The map stays static when it is widened and its actual centerpoint changes. User doesn't see the tiles loading, they are loaded already.

A few people have been asking how to make something similar. The secret of the implementation seems to be solved. The map is fullscreen all the time. Only the sidebar is swithed on and off over the map.

Copying the idea is not very simple. There are many tricky details to be solved. Most of them are solved now. See the page. 

The base and basic components for better map pages are about constructed. A page that imports and parses its data from text files, puts it on map and in collapsible interactive sidebar with category switching.

Now we can concentrate more at filtering the data and fine tuning the actual map UI.

Drag & drop sortable list

Today we have something more fascinating than a regular part of Map Kitchen series. We have a sortable list with GDraggableObject(). v0.1.

Map Kitchen [part 3]

Marker categories is the basic trick of filtering markers. Groups of markers can be switched on and off and the groups have different icons. The classic switching by sidebar checkboxes was chosen.

Shall we load each category from a file of its own or shall we have a single file with category data. We shall provide both ways. The concepts can even be mixed.

First we create a SideBar() object, then we create the needed BarCategory() objects. A category will be created if it is specified in file loading options. Also one is created if a new category name is found from files category cell.

The category checkbox switches display of category entries and its markers. Also visibility of marker image on sidebar is switched making sidebar cleaner.

See the page, play with it and see its source.

Map Kitchen [part 2]

A map page reading marker and infowindow data from a text file. It comes equipped with a 2-way interactive sidebar. That that fulfills many basic needs.

If you have a single file with not very many markers and they do not overlap, you don't need the upcoming parts of this series. Just copy the code and display your file. You can make the infowindow and sidebar look good by css.

Sidebar label and marker tooltips title are the same as infowindow header. The data cell of them is still hardcoded [2] but it is easy to find in the source code and can be changed independently to any cell in your csv line.

I suddenly noticed that [part 1] did not parse the text file with IE7. It is fixed now and it was just introducing the parseCsv() too late in the code for IE. Risk of that kind of troubles is avoided when I package the methods as a library. There are methods coming before that.

Too many markers is the most common UI issue on map pages. The following parts will show methods for filtering the markers.

Map Kitchen [part 1]

What is Map Kitchen? It is a  series of experimental pages. Also it is a JavaScript library that will contain the functions and methods used on those pages.

Where does the name come from? We have a great FM-station in Helsinki playing experimental music. One of their best DJ's took a name 'Soul Kitchen' for his program (he is a cook). So this is thanks to DJ Soppamies for inspiring me by music.

Where does the idea come from? Many people been asking me help for applying code ideas presented in 

• marker data from a text file
• sorting by nearest location
• switching z-index of a marker
• two-way interactive sidebar

I was exploring source codes of those pages and I did not understand much. No wonder that people been asking for my help. So I decided to start from scratch.

The series will use CSV text files as the data source because it been asked a lot. Still you can use any source:

• inline hardcoded
• XML/KML
• JSON
• feeds
• Spreadsheets API
• TSV

I been trying to write all the functions and methods to be programming modules for any kind of data source processing.

I already blogged a few methods how to generate CSV-formatted text files. Many of you have those files already from various sources.

When does it start? Just now, we start putting the CSV-data on maps. The first part is very simple: polyline from CSV.