Menu
My code:
<!DOCTYPE html>
<html>
<head>
<title>OpenTTD Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1600px; height: 900px"></div>
<script>
var tile_url = 'http://dev.ruun.nl/zelf/openttd/tiles/map_{x}_{y}.png';
var map = L.map('map', {
maxZoom: 20,
minZoom: 20,
crs: L.CRS.Simple
}).setView([0, 0], 20);
//65409x32839
var southWest = map.unproject([0, 32839], map.getMaxZoom());
var northEast = map.unproject([65409, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
L.tileLayer(tile_url, {
attribution: 'Map data © Ieuan\'s OpenTTD World',
continuousWorld: true,
tileSize: 256
}).addTo(map);
</script>
</body>
</html>
For some reason my tiles aren't loading, map is just showing grey. They're not being downloaded by browser and I'm not getting any error messages
The tiles are 256x256 parts of a 65409x32839 screenshot
URL to view is http://dev.ruun.nl/zelf/openttd/
854
You have to explicitly specify that your Tile Layer maxZoom option is 20, otherwise you get the default value of 18, which prevents your tiles from being called at your only zoom (20).
Demo: http://plnkr.co/edit/0654usix33JJ5HJ4EQT4?p=preview
147
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
