HTML offline map with local tiles via Leaflet

寵の児 提交于 2020-12-28 03:16:41

问题


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

  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.


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!