4

I am writing a mobile app using open web technologies, primarily targeting the newly-emerging Firefox OS, but planning to support any mobile device with a web browser. The app concerns means of public transport, currently in my city, but with an ability to extend to other areas as well. I want to provide users graphical info on where are the stations for public transport lines, to provide shortest routing information from station A to station B, track vehicle positions using the city's public API and so forth.

Since it is a Firefox OS app, I'm using HTML5/CSS3 for presentation and Javascript for the logic, and keep these files local, thereby never requiring Internet access for the app to work. However, the problem I am facing is rendering city maps (with possible overlays on top, for example highlighted roads and stations). I want to keep the app not depending on an Internet connection to work since I suppose it is sometimes going to be used during transport and in public, where there is no possibility of a persistent WiFi connection and users have to rely on their carrier-provider data connection, which can prove costly and divert potential users.

So far I've been able to find only Kothic-JS (uses an HTML5 canvas) that can render OpenStreetMap data from offline files, but its performance worries me as it stutters in my Firefox OS simulator, even with plenty of computing power available on my desktop computer. I can only imagine what horror would it cause on low-end mobile devices equipped with FxOS—I fear the app would not be usable. Other libraries (such as OpenLayers) tend to all download server-generated tiles, as far as I was able to see.

Is rendering city maps on mobile devices using HTML5 and Javascript feasible? How should I approach this problem? The map files can be transformed to SVG using clever XSLTs and maybe pre-split into SVG tiles, clipping where necessary, but the size of these tiles can never be chosen the right way because of plenty of zoom levels that can be used (i.e. if tiles on zoom level 5 occupy the device screen, on zoom level 2 they occupy only small pieces of it and I end up drawing on the order of 30 tiles to fill the screen). Is there any other way to do this besides turning to online services? I am aware there are great libraries for client-side map rendering, but none of these can be used from within Javascript.

geomaster
  • 489
  • 5
  • 9
  • What app did you write? –  Jan 26 '14 at 12:54
  • http://marketplace.firefox.com/app/beoprevoz. It's of very local character to the city I live in, Belgrade. The databases and city-specific data are kept from the code, though, so adapting it to another location would be straightforward if one has the data. – geomaster Feb 06 '14 at 20:54

1 Answers1

2

you should try Leaflet JS - it's a great open source mapping library for javascript, with handheld/touch support. I've used it in my project and it works great on Firefox OS.

As for the offline support you may find several blog posts about how to cache tiles for offline use with Leaflet - you should be bundling these tiles with your app (if it is only meant to display local information) or implementing some kind of caching algorithm if you can't bundle these assets.

Flaki
  • 578
  • 2
  • 6
  • Thank you. I was mostly focusing on rendering the vector-based data on the client but it seems like pre-rendering tiles was the way to go! – geomaster Aug 06 '13 at 13:59
  • I was thinking about an offline map for FFOS and tiling doesn't make sense if you want to store a map of a whole country on the device. The only way to go is to render from raw data. I'm still looking for a way to render it like kothic does. – naugtur Jun 19 '14 at 15:06