Mapcial & WebView
Today was mostly attempting to render HTML in the pop-up info-bubbles for route POI’s.
We’re using Google Maps to create the route and associated Points of Interest (POI). Maps allows HTML to be entered in these POI’s which can show links, images and other HTML features.
By leveraging Google Maps, we have a ready built interface to allow users to create routes, and also immediate access to all the public maps out there.
Android has a great browser based upon the WebKit renderer and Google, in their infinite wisdom, have allowed us humble developers to use WebKit in a view, aka WebView.
With WebView, you have all the functionality of a browser in a view. Very cool.
The info-bubbles were based on work by Jeff Gilfelt and further information can be found by clicking here. The challenge was to modify this code to render a WebView snippet, rather than a TextView one.
The initial attempt worked well, with images appearing in the view and all links were clickable. Now the trouble starts with:
- Sizing 1. Pop-ups should be wrap to fit their content but now mine were all full-width.
- Sizing 2. WebView asynchronously loads images meaning that the initial size might not be big enough as images are loaded.
- Navigation. There’s no ‘default’ way of going back to the previous browser page
So, we put the coffee on the pot and fired up Google. 8 hours later the initial problems are resolved, including all the problems introduced subsequently. These included:
- Sizing 3. The view needed to resize if you click-through to a web-page larger than the one your viewing
- Sizing 4. Re-opening the WebView after browsing the larger page causes the initial view to be too large
- Navigation 2. Pressing the back-button causes the app to exit if you go too-far
- Navigation 3. Non-WebView info-bubbles should behave the same if the back button is pressed
- Animation 1. The info-bubbles can be much larger causing the top of the bubble to appear off page
- Animation 2. Having resolved Animation 1, closing the info-bubble leaves you way bove the POI and needs animating back (Grrr)
- Focus. Ahh, the joys of UI programming and trying to set focus, reminds me of my time at CSC. Focusing here was to solve the Navigation 2 problem.
Now I know why developers have trouble estimating. I hadn’t anticipated these little niggles. Thank feck for Google.
So, how does it look? Here are three images. The left one shows the route in Desktop Chrome, the centre in WALK2012 on Android and the rightmost one in a browser(*) on Android (I assume iPhone is the same).
Job well done.
You can pick up the latest Mapcial aka Walk2012 application from the original releases page.
Feel free to leave comments. Did I mention it’s alpha and buggy? 😛
Footnote (*) If you’re wondering why I’d bother with the Walk2012 application when the native browser shows the same information, then you’ve missed the point that Walk2012 (or Mapcial) shows the positions of you and other participants on that route and also allows you to ‘message’ them.