All geek questions in one place

HTML offline map with local snippets via Flyer

Is there a way to display a map for a given area completely autonomously using HTML and JavaScript? I'm looking for a mobile friendly (see Cordova-enabled solution).

+8
source share
2 answers

There is an elegant solution to this blog post . I compiled a complete code example from it. Here are the steps:

1. Creation of cartographic fragments

  • download Mobile Atlas Creator
  • create a new atlas with OSMdroid ZIP format
  • make map and scale choices, add your selection to the atlas
  • " "
  • : {atlas_name}/{z}/{x}/{y}.png ({z} "" )

2. HTML JavaScript

3. ! !

  • index.html .

<!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>
Hide result
+16

  1. mbtiles https://openmaptiles.org/.
  2. Docker
  3. - Leaflet.js IP- .
0

Source: https://habr.com/ru/post/1675604/

More articles:


All Articles