One of our most thorough testers lives in Belgium and has run more files through PitStopper than anyone. Recently they sent us a file with a note: "this is just for fun, a toy! :-)"
It was the Eiffel Tower. A few days later, the tower got a searchlight.
Neither will help you find a water tap. But together they show two things about map icons that most route apps keep hidden.
Where does an icon sit?
On a map, a stop is a single point, but its icon is a small picture. Something has to decide which part of the picture sits exactly on that point. This is called the icon's anchor.
Picture the icon divided into a grid of nine squares, like a noughts and crosses board. The anchor can be any one of those squares. Whichever square you pick is the part of the picture that touches the point on the map.
Most icons use one of the two highlighted squares:
- A pin is anchored at the bottom centre, so the tip of the pin touches the spot and the pin stands above it.
- A round symbol, like a café cup or a Garmin flag, is anchored in the middle, so the picture sits centred over the spot.
Choosing the wrong one moves every icon slightly away from where it should be. On a busy street, that can put the café icon over the shop next door.
A .gpz file (a GPX zipped up with its icons) can set the anchor for each stop, using any of the nine squares. The picture at the top of this post is a test of all of them. It has nine stops on exactly the same spot at the top of the tower. One arrow uses the middle square; the other eight each use a different edge or corner square. Because each arrow is attached to the point from a different side, they spread out around it like a star. An app that ignores the anchors would draw all nine on top of each other. PitStopper draws the star.
Here is the whole file behind the picture at the top of this post. All nine stops have exactly the same position. Each one names its picture in <sym> (Arrow 1.png to Arrow 8.png, each pointing a different way, and Waypoint.png, the dot, all in the same zip) and picks its square in <anchor>. The comments say which square:
<gpx version="1.1" xmlns="http://www.topografix.com/GPX/1/1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<!-- bottom centre -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 1</sym><extensions><xsi:gpx><anchor>hsbc</anchor></xsi:gpx></extensions>
</wpt>
<!-- bottom left -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 2</sym><extensions><xsi:gpx><anchor>hsbl</anchor></xsi:gpx></extensions>
</wpt>
<!-- middle left -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 3</sym><extensions><xsi:gpx><anchor>hscl</anchor></xsi:gpx></extensions>
</wpt>
<!-- top left -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 4</sym><extensions><xsi:gpx><anchor>hstl</anchor></xsi:gpx></extensions>
</wpt>
<!-- top centre -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 5</sym><extensions><xsi:gpx><anchor>hstc</anchor></xsi:gpx></extensions>
</wpt>
<!-- top right -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 6</sym><extensions><xsi:gpx><anchor>hstr</anchor></xsi:gpx></extensions>
</wpt>
<!-- middle right -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 7</sym><extensions><xsi:gpx><anchor>hscr</anchor></xsi:gpx></extensions>
</wpt>
<!-- bottom right -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Arrow 8</sym><extensions><xsi:gpx><anchor>hsbr</anchor></xsi:gpx></extensions>
</wpt>
<!-- the middle: the dot at the centre -->
<wpt lat="48.8582602" lon="2.2944990">
<sym>Waypoint</sym><extensions><xsi:gpx><anchor>hscc</anchor></xsi:gpx></extensions>
</wpt>
</gpx>
The code is short for the square: hs and then the row (t top, c middle, b bottom) and the column (l left, c centre, r right). So hsbc is bottom centre, hscc the middle and hstl top left.
The test also led us to change one default. If a file doesn't set an anchor, we used to assume bottom centre, as for a pin. But almost every icon that comes inside a file, such as Garmin's symbols, Cruiser's or a picture someone has snapped, is drawn to sit centred. So PitStopper now places those icons in the middle, unless the file says otherwise.
Then the searchlight
The real Eiffel Tower has a searchlight on top that sweeps the Paris sky every night. So the test file got one too, in three formats:
- an animated GIF: 68 KB
- an animated PNG: 9.5 KB
- an SVG that animates itself: under 2.5 KB
Here they are, playing in this page just as they would on the map:
In the file, each searchlight is an ordinary stop. Its <sym> gives the name of its picture, and the picture travels inside the .gpz with that name plus its file extension. So the stop with <sym>searchlight_flash</sym> is drawn with searchlight_flash.svg. (Each stop also has <anchor>hscc</anchor>, the middle square, left out here to keep it short.)
<gpx version="1.1" xmlns="http://www.topografix.com/GPX/1/1">
<wpt lat="48.8587" lon="2.2943">
<name>Searchlight - SVG</name>
<sym>searchlight</sym>
</wpt>
<wpt lat="48.85845" lon="2.2951">
<name>Searchlight - SVG with flash</name>
<sym>searchlight_flash</sym>
</wpt>
<wpt lat="48.85782" lon="2.2947">
<name>Searchlight - animated PNG</name>
<sym>searchlight_apng</sym>
</wpt>
<wpt lat="48.85808" lon="2.2939">
<name>Searchlight - GIF</name>
<sym>searchlight_gif</sym>
</wpt>
</gpx>
And this is what is inside the .gpz, with the stop that uses each picture:
eiffel-searchlights.gpz
eiffel-searchlights.gpx the stops above
searchlight.svg <sym>searchlight</sym>
searchlight_flash.svg <sym>searchlight_flash</sym>
searchlight_apng.png <sym>searchlight_apng</sym>
searchlight_gif.gif <sym>searchlight_gif</sym>
Why such a difference in size? A GIF stores every frame as a separate picture. An SVG just describes the beam once and says "turn this every five seconds". So the SVG is about thirty times smaller, and stays sharp at any size.
What PitStopper does with them
That is the PitStopper map, zoomed in on the tower. Three of the beams turn. The one on the left, standing still, is the GIF.
It didn't start out that way. When our tester first tried it, the searchlight turned nicely in the import window, then sat still on the map. The import window showed the file's own picture. The map showed a copy we had made of it, and that copy kept only the first frame.
That's fixed. Now:
- An animated PNG or SVG in a
.gpzplays on the map. Export the route as a.gpzand it goes back out unchanged. - An animated GIF comes in as a still picture of its first frame. Given the sizes above, we doubt anyone will miss it.
- The GPX Inspector spots animated icons in a
.gpzor.kmz. It plays them, and labels each one with what it is and what PitStopper will do with it.
Does any other app play them?
We don't know. We haven't found another route planner or navigation app that animates a stop's icon, and nothing in the file formats asks them to.
A .gpz is just a zip of pictures. What an app does with them is up to the app. Most will probably show the first frame, which is a perfectly good searchlight with the power off. Google Earth only takes PNG icons from a .kmz, so there the beam stands still too.
If your app does play them, please tell us which one. And if you can think of a real use for a moving icon on a route (a lighthouse, a level crossing, a ferry that only runs on the hour), we'd like to hear that too.
Try it yourself
Both files open straight in PitStopper. When it asks, choose to keep the file's own icons.
- Nine icons on one spot: the arrows fanning out from the top of the tower. (Download the .gpz)
- Four searchlights: one on each leg of the tower, as an SVG, an SVG with a flash, an animated PNG and a GIF. (Download the .gpz)
You can also open them in your own route app, or drop them on the GPX Inspector to see what's inside.
For now, the Eiffel Tower has its searchlight. On one map, at least.
