Menu
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.
225
Leaflet: improve caching of map tiles, so they can be used offline.
Using the leaflet, we can render the map into an HTML element and we can set the marker on the map. Leaflet works efficiently across all major desktop and mobile platforms.
Leaflet doesn't support vector tiles by default. For basemaps, it is recommended to use it with traditional raster tiles (Mercator XYZ). Such tiles can be generated on demand for any of the GL styles with the open-source server software called TileServer GL.
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
2. Set up HTML and JavaScript
3. You are all set! Enjoy!
<!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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With