I am using leaflet to display maps on web site.
I have a known region and known path on that region that I display.
But now I have a requirement to allow viewing that map offline.
My question is do I need to create native app for mobile and in web view display map to do this or this is somehow possible by using JavaScript?
I am using mapbox for map.
For displaying OpenStreetMap offline you will either need pre-rendered raster images (tiles) which you will create beforehand, or you have to put raw or pre-processed data onto your device and render you map during runtime.
The first option requires more space on the device for storing the tiles, but displaying them will be faster. And there is already lots of rendering software available for creating the tiles.
The second option requires more processing power on the device to render the map and you will need some application which does the rendering on the device, but the resulting map data can be a lot smaller compared to the pre-rendered tiles.
Skim through the OSM wiki which has various information about mobile software. I suggest to take a look at already existing solutions in order to get an idea about the various possibilities.
You can do this with Javascript and Mapbox/Leaflet.
For iOS at least you can package your javascript app for mobile with a tool like PhoneGap.
The bigger question in my mind is whether you map relies on a mapping/tile service for your base maps (or your overlays).
If that is the case, then the answer gets a little more complicated. (You could potentially package a few zoom levels of tiles with your app, but that either limits the amount of zooming or the amount of panning that a user will be able to do).
If, on the other hand, you are not using a web mapping service for any of your layers (maybe all your layers are Vector/GeoJSON), then creating an offline map will be just as easy as creating any other offline app.
Related
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.
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.
I have an HTML (phonegap) application that uses Google Maps API to display a map with markers. I want this app to be used offline. I know that Google Maps tiles can't be used offline (because of its license). However, what I want to do is use the map interface without the tiles.
When online -> tiles and markers displayed.
When offline -> only markers displayed.
However, the js loading of Google maps is complex, and I haven't managed to cache it.
Thanks.
Caching google maps javascript is not allowed, that's because their payment system is based on how many times their javascript API are loaded by the users. One page refresh is equal to one google maps API call, and depending what kind of contract you made you just lost -1 from the total amount of API requests you have purchased.
How is Google Maps API for Business usage tracked and reported?
A single load of the Google Maps JavaScript API into a page. The
JavaScript API is reloaded every time a page that uses the API is
reloaded. User interactions with the map (eg. panning, zooming,
changing map types) do not generate more page views. Note however that
a page view is generated if the API is loaded into the page even if
the API is not then used to display a map.
See https://developers.google.com/maps/documentation/business/faq#pageview
You could, of course contact google and try to ask some tailored business solution for your needs. I am not 100% sure what kind of things they offer if you contact them directly. But although, your request is somewhat impossible to fill since those UI generation codes also resides inside that google maps API javascript which you need.
So I would suggest that if you only need google maps interface when offline, take a moment and implement something similar with HTML/CSS/ (and some JS).. markers you could draw on canvas or use normal img's and positioning. If you need to implement dragging and zooming - it would be little bit more difficult but not impossible with canvas or some other techniques. But that being said it would just be easier to keep app online, we all have internet :) ? Making 1on1 matching dummy offline UI against google maps would be really painful process, when we consider the fact that google maps UI also changes overtime, like in their upcoming versions.
You could use OpenStreetMaps instead, it can be used offline: http://wiki.openstreetmap.org/wiki/Offline_Openstreetmap
I'm using the OpenLayers Javascript library to provide a map view for my web app. This may be deployed in an environment where no external Internet access is possible. So ideally I need a full set of map tiles, pre-populated on a local web server. I'm assuming this is going to be a lot of data though.
Until now I've been using TileCache to fetch and store map tiles locally on disk. This is ok, but obviously only fetches tiles for the areas I explore on the map. Plus, this solution won't work for the said deployment environments if the relevant tiles for the target area aren't already in the local disk cache.
I don't really have a good idea of just how much data a full tile set would amount to, so is this idea completely impractical? Where would I obtain the tile set?
I want to use the Google Maps v3 api to generate an interactive Google Map interface that uses custom tiles for a map from a video game. The app needs to be able to zoom-in out and display the proper tiles for each zoom level as well.
I'm looking for some resources or a tutorial on how to accomplish this. The Google Maps v3 API appears to only discuss using custom tiles that lay on top of the normal Google Maps tiles. That wouldn't make sense in my application since my map is for a fictional world and wouldn't line up with anything in the real world maps. Perhaps I'm just not seeing what I need in the API guide...
Check out the ImageMapType class in the reference. There's a nifty example showing Moon tiles.
One of my favourite applications is The Internet map, the developer wrote a pretty sweet article on how it was developed.
You need to either cut up your custom game map image into the appropriate file/directory structure that makes integration into Maps API easy (here's an example using Photoshop and some example HTML/JS code). Or use a more friendly tool like TileMill, but this expects data in a standard spatial data format and you probably don't have your game map stored in such a format. If you can go that route, they also provide a Node.js-based server called TileServe that makes integration a cinch.
If you are expecting a boatload of traffic, then maybe look at Google Maps Engine to host your custom game map image directly in Google's infrastructure.
when i went through the source code of the google maps page i've realized that the whole map is formed by small tiles of images. But how does the javascript identifies the roads on the google maps to show the way from ourlocation to destination??
I couldn't tell you HOW it works, it is a very complex application but all the work is done on the server and the reason the page shows the map as images is purely down to the limited ways in which a browser can display content.
Google have several layers with information about streets, roads, etc... when you use google maps only show a "graphical representation" of their data in bitmap format, but they need a "vectorial" layer that we don't see it.
Calculate routing is a very complex infraestructure problem in GIS server, for example, with Geoserver and PostGIS you can use Dijkstra Routing with Pgdijkstra.
It's very complex question, for a short answer.