Providing city maps in mobile web applications

Question

I am writing a mobile application using open web technologies, primarily focusing on the recently appeared Firefox OS, but I plan to support any mobile device using a web browser. The application relates to public transport, currently in my city, but with the possibility of spreading to other areas. I want to provide users with graphical information about where the stations are for public transport lines, provide the shortest routing information from station A to station B, track vehicle positions using the city’s public API, etc.

Since this application is for Firefox, I use HTML5 / CSS3 for presentation and Javascript for logic and keep these files local, thereby never requiring Internet access for the application to work. However, the problem I am facing is to display city maps (with possible overlays on top, for example, highlighted roads and stations). I want the application not to depend on an Internet connection for work, because I believe that it is sometimes used during transportation and in public, where there is no possibility of a constant WiFi connection, and users should rely on their carrier-operator data connection, which can be costly and distract potential users.

So far, I have only managed to find Kothic-JS (uses HTML5 canvas) that can display OpenStreetMap data from stand-alone files, but its performance bothers me because it stutters in my Firefox OS simulator, even with a lot of processing power available on my desktop computer. I can only imagine what horror it can cause on low-end mobile devices equipped with FxOS - I'm afraid that the application will not be used. Other libraries (such as OpenLayers) tend to load all tiles created on the server, as far as I could see.

Can city maps be displayed on mobile devices using HTML5 and Javascript? How do I approach this problem? Map files can be converted to SVG using smart XSLTs and possibly pre-split into SVG tiles, cropped if necessary, but the size of these fragments can never be selected correctly due to the large number of zoom levels that can be used (t If tiles at zoom level 5 occupy the device’s screen, at zoom level 2 they occupy only small pieces, and I finish drawing about 30 tiles to fill the screen). Is there any other way to do this besides accessing online services? I know that there are large libraries for rendering on the client side, but none of them can be used from Javascript.

Answer 1

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

As for offline support, you can find several blog posts about how to cache tiles for offline use with the Leaflet - you must associate these tiles with your application (if it is intended only to display local information) or implement some kind of caching algorithm, if you cannot link these assets.