Currently mapbox-gl v0.30.0 and v0.31.0 won't display the map in Firefox if the canvas is larger than 2048px in width or height (common on screens with resolution of 2K or higher). The problem was introduced by mapbox/mapbox-gl-js#3841, in mapbox/mapbox-gl-js#3915 the issue with Firefox was discovered and in mapbox/mapbox-gl-js#3986 the fix was released. So until v0.32.0 is released (which will incorporate the fix), I suggest reverting back to v0.29.0, which works fine with Firefox on large screens.
31 lines
1.1 KiB
HTML
31 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8 />
|
|
<title>OSM Liberty</title>
|
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
|
|
|
<style>
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
#github-button { position: absolute; top: 15px; left: 15px; z-index: 1000; }
|
|
</style>
|
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
|
|
</head>
|
|
<body>
|
|
<iframe id="github-button" src="https://ghbtns.com/github-btn.html?user=lukasmartinelli&repo=osm-liberty&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
|
<div id='map'></div>
|
|
<script>
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'http://osm-liberty.lukasmartinelli.ch/style.json',
|
|
center: [8.538961,47.372476],
|
|
zoom: 5,
|
|
hash: true
|
|
});
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
</script>
|
|
</body>
|
|
</html>
|