How to manage a full vector offline map with OpenStreetMap XML In Javascript?

Question

I am trying to create an offline map with OSM data which I have in XML format in my website so it must be a javascript framework to show the map. We used MapsForge for our Android project and we could show the offline map. But the problem is we want to show a full vector map on the web and we can't find any way to do that. I tried leaflet and it didn't work out because leaflet just show parts of the map like roads and nodes and polygons but we have a lot more information on that XML file which includes all the styles for all the zoom levels and more...

I've googled a lot and couldn't find any solutions. The reason behind this is that in our country we don't have 3G internet support and people can't have internet access everywhere so the only way is that they download the vector map (due to lack of high speed internet connection it must be lightweight. So the answer is vector map.) where they have internet access and use that map on the street on their cell phones. We really want help our people in this matter.

It would really mean a lot to us if you could help us finding a way out.

Answer 1

AFAIK there is (currently) no way to provide global OSM geodata offline and render the vector data just in JS.

Yes there are (a few) frameworks that store OSM as vector offline and preapare an indexing for various tasks (rendering, searching, routing, ...), but all of them are native and usually used in native applications.

Yes there are WebGL/... vector rendering JS libs, but they usually make use of vector streaming services for getting vector tiles and don't use local storage.

IMHO it would be best to make use of an existing native solution to mobile phones and then add your custom data on top e.g. as KML/geoJSON/ ...