Merge pull request #995 from fredj/export-map_example

Better user notification if a.download attribute is not supported

examples/export-map.html

@@ -31,6 +31,10 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <div id="no-download" class="alert alert-error" style="display: none">
+            This example requires a browser that supports the
+            <a href="http://caniuse.com/#feat=download">link download</a> attribute.
+          </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>

examples/export-map.js

@@ -20,11 +20,20 @@ var map = new ol.Map({
 });
 
 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');
+if ('download' in exportJPEGElement && 'download' in exportPNGElement) {
-}, false);
+  exportJPEGElement.addEventListener('click', function(e) {
+    e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
+  }, false);
+
+  exportPNGElement.addEventListener('click', function(e) {
+    e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
+  }, false);
+} else {
+  var info = document.getElementById('no-download');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+}