19

Is there a way to display a map for a given area completely offline using HTML and JavaScript? I am looking for a mobile-friendly (read Cordova-enabled) solution.

Kozuch
  • 2,272
  • 3
  • 26
  • 38

2 Answers2

43

There is an elegant solution for this problem in this blog post. I have compiled a full code example from it. Here are the steps:

1. Create map tiles

  • download Mobile Atlas Creator
  • create a new atlas with OSMdroid ZIP format
  • make map and zoom selection, add your selection to the atlas
  • click "Create atlas"
  • unzip the atlas file
  • your tiles have this format: {atlas_name}/{z}/{x}/{y}.png ({z} stands for "zoom")

2. Set up HTML and JavaScript

  • copy your atlas folder to your HTML root
  • download leaflet.js and leaflet.css and copy them to html root
  • create index.html with the code below
    • adjust starting coordinates and zoom on the line where var mymap is defined
    • change atlasName to your folder name, set your desired maxZoom

3. You are all set! Enjoy!

  • run index.html in your browser

<!DOCTYPE html> 
<html> 
 <head> 
  <title>Leaflet offline map</title>
  <link rel="stylesheet" charset="utf-8" href="leaflet.css" />
 <script type="text/javascript" charset="utf-8" src="leaflet.js"></script>
  <script>
   function onLoad() {

    var mymap = L.map('mapid').setView([50.08748, 14.42132], 16);

    L.tileLayer('atlasName/{z}/{x}/{y}.png',
    {    maxZoom: 16  }).addTo(mymap);
   }
  </script> 
 </head>
 <body onload="onLoad();"> 
  <div id="mapid" style="height: 500px;"></div>
 </body>
</html>
Kozuch
  • 2,272
  • 3
  • 26
  • 38
-2

you should do these steps one by one

  1. Download the mbtiles file of the specific area from https://openmaptiles.org/
  2. establish the Map Server by Docker
  3. implement the web pages by Leaflet.js and use the map server IP address in your codes.
nassim taghipour
  • 11
  • 1