HTML offline map with local tiles via Leaflet

问题

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.

回答1:

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>

回答2:

you should do these steps one by one

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

来源：https://stackoverflow.com/questions/43608919/html-offline-map-with-local-tiles-via-leaflet

标签

html

maps

leaflet

offline

tiles