Marker Icon Misalignment

[hallahan]

I'm working on getting Maki Markers working so that we can have smaller markers as well as custom colors and icons for #31.

The Mapbox Android SDK has built in this capability, however, the Maki markers only work when the device is online, because that image asset is requested from Mapbox's API. You need an API key to be able to request it as well.

So, that is not an option for us...

The CustomMarkerTestFragment.java in the SDK demonstrates that you can alternatively specify the icon of the marker with the setMarker method instead of setIcon (confusing). This lets you use a bitmap asset instead of having to make an HTTP request.

It turns out, however, that it does not correctly align the bitmap to bottom center point that we would expect from a Marker.

Here is a point on OSM where the circle is the actual position, as sourced directly from OpenStreetMap.

We can see that the default marker is being placed correctly in the app:

Then, look what happens when we use a Maki Marker via the setMarker method:

Not good at all...

When you actually use the addMarker user interface, you can see this problem directly. Here's what you see right when you press + Add Node:

I then went in and tried a basic PNG that is 40x40 to see if I can get some insight as to how the SDK is placing the image:

It does not seem to place the bottom edge at the center point of the node. Something is wrong.

cc/ @dalekunce @mberg @bleege @jharpster

[hallahan]

By nudging the anchor, we're able to offset the bitmap to the right point.