Don't show screenshot in main examples page.
Show the correct cursor on the screenshot button.
Fix handling screenshots of maps with background colors.
MODIFY
examples/common/css/examples.css
examples/common/css/examples.css
@@ -19,6 +19,9 @@ html, body {
overflow: hidden;
}
+.gj-screenshot-link {
+ cursor: pointer;
+}
li.gj-screenshot-result,li.gj-screenshot-waiting {
display: none;
}

MODIFY
examples/common/templates/index.jade
examples/common/templates/index.jade
@@ -35,7 +35,7 @@ html(lang="en")
.collapse.navbar-collapse#gj-navbar-collapse
block headerButtons
ul.nav.navbar-nav.navbar-right
- block screenShode
+ block screenShot
li
a.gj-screenshot-link(tabindex=0)
| Screenshot

MODIFY
examples/index.jade
examples/index.jade
@@ -24,6 +24,8 @@ block prepend headerButtons
a(href="http://geojs.readthedocs.org/en/latest/") Developers guide
a(href="http://my.cdash.org/index.php?project=geojs") Testing
+block screenShot
+
block mainContent
.jumbotron
.container

MODIFY
src/map.js
src/map.js
@@ -1660,8 +1660,27 @@ var map = function (arg) {
var context = result.getContext('2d');
// optionally start with a white or custom background
if (opts.background !== false && opts.background !== null) {
- context.fillStyle = opts.background !== undefined ? opts.background : 'white';
+ var background = opts.background;
+ if (opts.background === undefined) {
+ /* If we are using the map's current background, start with white as a
+ * fallback, then fill with the backgrounds of all parents and the map
+ * node. Since each may be partially transparent, this is required to
+ * match the web page's color. It won't use background patterns. */
+ context.fillStyle = 'white';
context.fillRect(0, 0, result.width, result.height);
+ m_this.node().parents().get().reverse().forEach(function (elem) {
+ background = window.getComputedStyle(elem).backgroundColor;
+ if (background && background !== 'transparent') {
+ context.fillStyle = background;
+ context.fillRect(0, 0, result.width, result.height);
+ }
+ });
+ background = window.getComputedStyle(m_this.node()[0]).backgroundColor;
+ }
+ if (background && background !== 'transparent') {
+ context.fillStyle = background;
+ context.fillRect(0, 0, result.width, result.height);
+ }
}
// for each layer, copy to our new canvas.
layers.forEach(function (layer) {

MODIFY
src/util/init.js
src/util/init.js
while (parents && parents > 0) {
parent = parent.parent();
if (parent.is('div')) {
- container = $('<div>').attr('class', parent.attr('class')).css({width: '100%', height: '100%'});
+ /* Create a containing div with the parent's class and id (so css
+ * will be used), but override size and background. */
+ container = $('<div>').attr({
+ 'class': parent.attr('class'),
+ id: parent.attr('id')
+ }).css({
+ width: '100%',
+ height: '100%',
+ background: 'none',
+ margin: 0
+ });
container.append(elem);
elem = container;
}
container.append($('<head>'));
var body = $('<body>');
container.append(body);
- // we must specify the new body as have no background, or we'll clobber
- // other layers
+ /* We must specify the new body as having no background, or we'll clobber
+ * other layers. */
body.css({
width: parent.width() + 'px',
height: parent.height() + 'px',

Don't show screenshot in main examples page.

Show the correct cursor on the screenshot button.

Fix handling screenshots of maps with background colors.