Add png output

This commit is contained in:
Frederic Junod
2013-03-20 12:10:22 +01:00
parent baa5500843
commit f2b69a2a13
2 changed files with 12 additions and 6 deletions

View File

@@ -7,7 +7,7 @@
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Export JPEG example</title>
<title>Export map example</title>
</head>
<body>
@@ -31,25 +31,26 @@
<div class="span12">
<div id="map" class="map"></div>
<a id="export-jpeg" class="btn" download="map.jpeg"><i class="icon-download"></i> Export JPEG</a>
<a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">Export JPEG example</h4>
<p id="shortdesc">Example of exporting a map as a JPEG image.</p>
<h4 id="title">Export map example</h4>
<p id="shortdesc">Example of exporting a map as a JPEG or PNG image.</p>
<div id="docs">
<p>See the <a href="export-jpeg.js" target="_blank">export-jpeg.js source</a> to see how this is done.</p>
<p>See the <a href="export-map.js" target="_blank">export-map.js source</a> to see how this is done.</p>
</div>
<div id="tags">export-jpeg, openstreetmap</div>
<div id="tags">export, jpeg, png, openstreetmap</div>
</div>
</div>
</div>
<script src="loader.js?id=export-jpeg" type="text/javascript"></script>
<script src="loader.js?id=export-map" type="text/javascript"></script>
<script src="social-links.js" type="text/javascript"></script>
</body>

View File

@@ -24,3 +24,8 @@ var exportJPEGElement = document.getElementById('export-jpeg');
exportJPEGElement.addEventListener('click', function(e) {
e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
}, false);
var exportPNGElement = document.getElementById('export-png');
exportPNGElement.addEventListener('click', function(e) {
e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
}, false);