Lets start first with some screenshots on samples of this posting.
I am an everyday runner for many years now, and the left sample is the more complex one of all my abroad runnning..
On the right you can see my "garden office" as a simple entry example on how to make use of Google Maps API by XSLT.
Now some more screenshots by zooming into the complex example.
As can be seen we have default markers (business travel) as well as handcrafted icons for family travel, indicating who did the travel.
And we display selected Google gmaps-pedometer.com
running routes, integrated into Google Maps via the KmlLayer.
Further the lower left sample shows that even a single running round can be split into run+ferry+run.
These are the topics of the rest of this posting:
- Accessing Google Maps API by XSLT
- Overcoming Firefox XSLT problems with asynchronous Google Maps API
- DataPower considerations
Topic "Exporting gmap-pedometer.com
routes in KML format (gpxs2kml.xsl)" will be subject of another posting.
This is how (simple) it can be done:
The steps are:
- in initialize function, create Map with specifying zoom level (maximal), center and mapType
- create an "invisible" marker (1x1 size image of transparent color) because an InfoWindow does need a marker
- create the InfoWindow with its (HTML) content for display
- open the InfoWindow and create "invisble" Marker
- in body, call initialize() and provide the map canvas for display of the map.
OK, that is easy -- so why think on XML here?
This is the (small) my_garden_office.xml
I came up with:
Lets forget about the 2nd line for now, it will be discussed in next section.
The 1st line just tells which stylesheet does the transformation.
One of them is allowing to distribute the HTML InfoWindow content over several lines (will be handled by mode="oneline" templates).
The other features are:
- simple map creation
- anonymous or named Markers, with optional icon attribute
- InfoWindow with optional click handler on specified Marker
- KmlLayer for integration of Keyhole Markup Language (KML) files into Google Maps
This is the whole, less than 100 lines, stylesheet Map.xsl
Here is the more elaborate example, with KmlLayer, for completeness (open, and do "View Page Source" in your browser):http://stamm-wilbrandt.de/my_Running_abroad.xml
Overcoming Firefox XSLT problems with asynchronous Google Maps API
I found out that the mentioned solution worked fine for 4 of the BIG5 browsers (Chrome, IE, Opera, Safari), but not for Firefox.
Luckily I got an explanation immediately (in above thread):
First I thought on giving up and use Map.xsl offline (by eg. xsltproc) to generate a new HTML file for publish when XML changes.
But then I remembered myself on a browser switch I used for another posting long ago.
While Firefox takes the last xml-stylesheet Processing Instruction (PI) of an input document, the other browsers take the first.
And this is what the 2nd xml-sylesheet PI does in above
So what do we want to do for Fireffox?
We just want to fallback to that solution.
That means to deploy for a given .xml file the generated (by eg. xsltproc) .html file in addition.
And have just stylesheet redirect.ff.xsl
do the redirect to the associated .html file -- that's all:
Last, but not least, let's talk on what DataPower can do here.
In addition, DataPower can do the KML file generation, dynamically and cache the associated base files.
So whenever you need -- or now want -- to visualize data using Google Maps API (free for private use) in a DataPower scenario,
now you have the tools to build on/modify,