在移动网络应用程序上渲染城市地图

我正在使用开放网络技术编写一个移动应用程序，主要针对新兴的Firefox操作系统，但计划支持任何带有网络浏览器的移动设备。该应用程序涉及公共交通工具，目前在我所在的城市，但也可以扩展到其他地区。我想为用户提供公共交通线路车站的图形信息，提供从A站到B站的最短路线信息，使用城市公共API跟踪车辆位置等。

由于它是一个Firefox操作系统应用程序，我使用HTML5/CSS3进行演示，使用Javascript进行逻辑，并将这些文件保存在本地，从而使应用程序不需要访问互联网即可工作。然而，我面临的问题是绘制城市地图（顶部可能有覆盖层，例如高亮显示的道路和车站）。我想让这款应用程序不依赖互联网连接，因为我想它有时会在交通和公共场合使用，因为在公共场合，不可能有持续的WiFi连接，用户必须依赖运营商提供商的数据连接，这可能会导致成本高昂，并转移潜在用户的注意力。

到目前为止，我只能找到Kothic JS（使用HTML5画布），它可以从离线文件中渲染OpenStreetMap数据，但它的性能让我担心，因为它在我的Firefox操作系统模拟器中断断续续，即使我的台式机上有足够的计算能力。我只能想象它会在配备FxOS的低端移动设备上引起什么样的恐慌——我担心这个应用程序将无法使用。据我所知，其他库（如OpenLayers）倾向于全部下载服务器生成的tile。

使用HTML5和Javascript在移动设备上绘制城市地图可行吗？我应该如何处理这个问题？可以使用巧妙的XSLT将地图文件转换为SVG，并可能预拆分为SVG瓦片、在必要时进行剪裁，但是这些瓦片的大小永远不能以正确的方式选择，因为可以使用大量的缩放级别（即，如果在缩放级别5上的瓦片占据设备屏幕，在缩放级别2上，它们只占据设备屏幕的一小部分，并且我最终以30个瓦片的顺序绘制来填充屏幕）。除了转向在线服务，还有其他方法可以做到这一点吗？我知道有一些很棒的库可以用于客户端地图渲染，但这些库都不能在Javascript中使用。