Add a screenshot button in the examples header.
MODIFY
examples/common/css/examples.css
examples/common/css/examples.css
@@ -18,3 +18,14 @@ html, body {
height: calc(100% - 60px);
overflow: hidden;
}
+
+li.gj-screenshot-result,li.gj-screenshot-waiting {
+ display: none;
+}
+li a.gj-screenshot-download {
+ padding: 0;
+}
+li.gj-screenshot-result img {
+ max-height: 60px;
+ max-width: 120px;
+}

MODIFY
examples/common/js/examples.js
examples/common/js/examples.js
@@ -34,3 +34,23 @@ var exampleUtils = {
};
window.utils = exampleUtils;
+
+/* Add a function to take a screenshot. Show the screenshot so that a user can
+ * click on it to save it or right-click to copy it. */
+$(function () {
+ $('.gj-screenshot-link').on('click', function () {
+ $('.gj-screenshot-result').hide();
+ $('.gj-screenshot-waiting').show();
+ var map = $('#map').data('data-geojs-map');
+ map.screenshot({wait:'idle'}).then(function (res) {
+ $('.gj-screenshot-waiting').hide();
+ $('.gj-screenshot-result img').attr({src: res});
+ $('.gj-screenshot-download').attr({href: res});
+ $('.gj-screenshot-result').show();
+ /* If you want to trigger an automatic download, enable this line (and,
+ * perhaps, always hide the waiting and result elements).
+ $('.gj-screenshot-download')[0].click();
+ */
+ });
+ });
+});

MODIFY
examples/common/templates/index.jade
examples/common/templates/index.jade
@@ -35,6 +35,15 @@ html(lang="en")
.collapse.navbar-collapse#gj-navbar-collapse
block headerButtons
ul.nav.navbar-nav.navbar-right
+ block screenShode
+ li
+ a.gj-screenshot-link
+ | Screenshot
+ li.gj-screenshot-waiting
+ a ...
+ li.gj-screenshot-result
+ a.gj-screenshot-download(download='screenshot.png')
+ img
block showSource
if docHTML
li

Add a screenshot button in the examples header.