From 5400892c99621838aca0e0625a27409cae61a821 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <offtherailz@gmail.com>
Date: Tue, 13 Dec 2016 09:55:49 +0100
Subject: [PATCH] Snapshot marker support (#1328)

* Fix #1325. Get only main map svg

* Introduced Support for marker snapshot in leaflet

There is still a problem when the map is panned.
When possible, you have to parse the transform inline style of the mapdiv to properly shift the clonded marker div to snap (or properly set the canvas).

* fixed issues with query selector and FF-31.0.0
---
 .../map/leaflet/snapshot/GrabMap.jsx          | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/client/components/map/leaflet/snapshot/GrabMap.jsx b/web/client/components/map/leaflet/snapshot/GrabMap.jsx
index 47bcfbfc3e..790a1a7688 100644
--- a/web/client/components/map/leaflet/snapshot/GrabMap.jsx
+++ b/web/client/components/map/leaflet/snapshot/GrabMap.jsx
@@ -200,8 +200,30 @@ let GrabLMap = React.createClass({
 
                 });
                 let finialize = () => {
-                    this.props.onStatusChange("READY", this.isTainted(finalCanvas));
-                    this.props.onSnapshotReady(canvas, null, null, null, this.isTainted(finalCanvas));
+                    // TODO parse map-div transform to shift all markers toghether properly
+                    let markers = this.mapDiv.getElementsByClassName("leaflet-marker-pane");
+                    if ( markers && markers.length > 0) {
+                        let newCanvas = this.refs.canvas.cloneNode();
+                        newCanvas.width = newCanvas.width + left;
+                        html2canvas(markers, {
+                                // you have to provide a canvas to avoid html2canvas to crop the image
+                                canvas: newCanvas,
+                                logging: false,
+                                proxy: this.proxy,
+                                allowTaint: props && props.allowTaint,
+                                // TODO: improve to useCORS if every source has CORS enabled
+                                useCORS: props && props.allowTaint
+                        }).then( (c) => {
+                            let cx = finalCanvas.getContext("2d");
+                            cx.globalAlpha = 1;
+                            cx.drawImage(c, -1 * left, 0);
+                            this.props.onStatusChange("READY", this.isTainted(finalCanvas));
+                            this.props.onSnapshotReady(canvas, null, null, null, this.isTainted(finalCanvas));
+                        });
+                    } else {
+                        this.props.onStatusChange("READY", this.isTainted(finalCanvas));
+                        this.props.onSnapshotReady(canvas, null, null, null, this.isTainted(finalCanvas));
+                    }
                 };
 
                 if (svg) {