Rendering city maps on mobile web apps
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 (ie 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.
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.
链接地址: http://www.djcxy.com/p/79742.html上一篇: 活动相机FirefoxOS
下一篇: 在移动网络应用上呈现城市地图