miguelvb · March 13, 2017 20:35 · miguelvb · May 31, 2017
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Save SVG - Leaflet</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://unpkg.com/leaflet-image@latest/leaflet-image.js"></script>
 </head>
 <body>

 <div id="mapid" style="width: 600px; height: 400px;"></div>
 <script>
  var long_center =  2.266622;
  var lat_center = 48.982253;
  var mymap = L.map('mapid').setView([lat_center, long_center], 15);
    
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
  }).addTo(mymap);


  var myIcon = L.icon({
    iconUrl: 'marker-icon.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [-3, -41]
  });

  L.marker([lat_center, long_center], {icon: myIcon}).addTo(mymap);

  L.polygon([
    [lat_center, long_center],
    [lat_center - 0.001, long_center - 0.001],
    [lat_center - 0.002, long_center + 0.002]
  ]).addTo(mymap).bindPopup("I am a polygon.");


  var popup = L.popup();

  d3.select('body').append("div").attr("id", "images");

  function onMapClick(e) {

    var getOverlay = function(){

      var svg = d3.select('.leaflet-overlay-pane>svg'),
          img = new Image(),
          serializer = new XMLSerializer();
      console.log("svg ", svg.attr("width"), svg.attr("height"));
      var svgStr = serializer.serializeToString(svg.node());

      img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
      return img;
    };

    leafletImage(mymap, function(err, canvas) {

      var img_ = getOverlay();
      var svg = d3.select('.leaflet-overlay-pane>svg');
      var w =  svg.attr("width");
      var h = svg.attr("height");
      var pane = d3.select('.leaflet-map-pane');
      var trans = pane.style("transform");
      t = d3.select('.leaflet-map-pane').style('transform').split(", ");
      var dx = t[4], dy = t[5].split(")")[0];

      canvas.getContext("2d").drawImage(
        img_,
        dx,
        dy,
        w,
        h
      );
      var img = document.createElement('img');
      var dimensions = mymap.getSize();
      img.width = dimensions.x;
      img.height = dimensions.y;
      img.src = canvas.toDataURL();
      document.getElementById('images').innerHTML = '';
      document.getElementById('images').appendChild(img);
    });
  }

  mymap.on('click', onMapClick);
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Save SVG - Leaflet</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://unpkg.com/leaflet-image@latest/leaflet-image.js"></script>
	</head>
	<body>

	<div id="mapid" style="width: 600px; height: 400px;"></div>
	<script>
	var long_center = 2.266622;
	var lat_center = 48.982253;
	var mymap = L.map('mapid').setView([lat_center, long_center], 15);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
	'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="http://mapbox.com">Mapbox</a>',
	id: 'mapbox.streets'
	}).addTo(mymap);


	var myIcon = L.icon({
	iconUrl: 'marker-icon.png',
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [-3, -41]
	});

	L.marker([lat_center, long_center], {icon: myIcon}).addTo(mymap);

	L.polygon([
	[lat_center, long_center],
	[lat_center - 0.001, long_center - 0.001],
	[lat_center - 0.002, long_center + 0.002]
	]).addTo(mymap).bindPopup("I am a polygon.");


	var popup = L.popup();

	d3.select('body').append("div").attr("id", "images");

	function onMapClick(e) {

	var getOverlay = function(){

	var svg = d3.select('.leaflet-overlay-pane>svg'),
	img = new Image(),
	serializer = new XMLSerializer();
	console.log("svg ", svg.attr("width"), svg.attr("height"));
	var svgStr = serializer.serializeToString(svg.node());

	img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
	return img;
	};

	leafletImage(mymap, function(err, canvas) {

	var img_ = getOverlay();
	var svg = d3.select('.leaflet-overlay-pane>svg');
	var w = svg.attr("width");
	var h = svg.attr("height");
	var pane = d3.select('.leaflet-map-pane');
	var trans = pane.style("transform");
	t = d3.select('.leaflet-map-pane').style('transform').split(", ");
	var dx = t[4], dy = t[5].split(")")[0];

	canvas.getContext("2d").drawImage(
	img_,
	dx,
	dy,
	w,
	h
	);
	var img = document.createElement('img');
	var dimensions = mymap.getSize();
	img.width = dimensions.x;
	img.height = dimensions.y;
	img.src = canvas.toDataURL();
	document.getElementById('images').innerHTML = '';
	document.getElementById('images').appendChild(img);
	});
	}

	mymap.on('click', onMapClick);
	</script>

	</body>
	</html>