Menu
I'm using Mapbox GL JS version 0.32. Is there a way to export the map to a high-res PNG or PDF?
Obviously, I can just screenshot, but it would be nice if there was a more formal way.
I found this repo, but it looks old and isn't clear how it works.
I tried using the preserveDrawingBuffer option:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
minZoom: 4,
maxZoom: 14,
center: [-2.0, 53.3],
preserveDrawingBuffer: true
});
console.log(map.getCanvas().toDataURL());
This outputs a long data URL in the console, but copying and pasting it into a base64 converter just seems to produce an empty image.
UPDATE: This is my new code, in full:
mapboxgl.accessToken = 'pk.eyXXX';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
minZoom: 4,
maxZoom: 14,
center: [-2.0, 53.3],
preserveDrawingBuffer: true
});
var dpi = 300;
Object.defineProperty(window, 'devicePixelRatio', {
get: function() {return dpi / 96}
});
map.on('load', function () {
var content = map.getCanvas().toDataURL();
console.log(content)
});
The output to the console is this: http://pastebin.com/raw/KhyJkJWJ
476
Mapbox Studio Click Print to toggle the print panel open and closed. Position your map and specify Print export settings in the print panel. Settings include image dimensions (in inches or centimeters), resolution (in pixels per inch), and file format (PNG or JPG). The maximum image export is 8,000 px by 8,000 px.
Is Mapbox GL JS open source? The previous version, Mapbox GL JS v1, is indeed a free and open-source, BSD3 licensed software. Anyone can contribute to it, or start their own derived work based on it, for free. As of February 2021, the v1 source code is still available from the Mapbox Github.
While Mapbox isn't entirely free, it has a generous free tier in its pricing packages that makes the service attractive for apps with a low volume of users. Free for up to 25,000 mobile users and 50,000 web loads. Customization of maps is easy.
Mapbox GL JS is an open-source JavaScript library that uses Mapbox GL to render interactive maps.
There are two main questions:
1. How do I get the map canvas as an image?
Actually, you are doing the right thing, but just too early. Give that map some time to load and fetch the image data when the load event is triggered:
map.on('load', () => console.log(map.getCanvas().toDataURL()));
2. How do I get that image in high-res?
By changing window.devicePixelRatio according to your destination dpi, you can trick your browser into generating high-res output. I found that solution in an implementation created by Matthew Petroff, see his code on https://github.com/mpetroff/print-maps.
This is the trick he's using for generating high-res output:
Object.defineProperty(window, 'devicePixelRatio', {
get: function() {return dpi / 96}
});
Source
188
I created a simple working example for anybody stumbling upon this thread:
(Thanks @Vic for pointing out the preserveDrawingBuffer-option in Mapbox GL JS)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
#map {
margin: auto;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<a id="downloadLink" href="" download="map.png">Download ↓</a>
<div id="image"></div>
<script>
mapboxgl.accessToken = 'your-token-here';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-74.50, 40],
zoom: 9,
preserveDrawingBuffer: true
});
$('#downloadLink').click(function() {
var img = map.getCanvas().toDataURL('image/png')
this.href = img
})
</script>
</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
