JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<div id="map" style="height:300px; width: 300px;"></div>
<br>
<button type="button" id="canvasButton">Draw Canvas</button>
<br>

CSS

.myDivicon {
    background-clip: padding-box;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.6);
}
.myDivicon div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font: 8px"Helvetica Neue", Arial, Helvetica, sans-serif;
    line-height: 10px;
}

JavaScript

var m = L.map('map').setView([38.88944095694259, -77.03522354364395], 17);
var myIcon = L.divIcon({
    html: '<div style="font: 8px Arial;background-color:#ff0000"><br>DivIcon</div>',
    className: 'myDivicon',
    iconSize: L.point(40, 40)
});
L.marker([38.88944095694259, -77.03522354364395], {
    icon: myIcon
}).addTo(m);
L.polyline([
    [38.88944095694259, -77.03522354364395],
    [38.89, -77.03522354364395]
]).addTo(m);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    maxNativeZoom: 18,
    maxZoom: 18
}).addTo(m);
$(".leaflet-control-attribution")[0].style.font = "11px Arial";

$("#canvasButton").click(function () {
    var mapPane = $(".leaflet-map-pane")[0];
    var mapTransform = mapPane.style.transform.split(",");
    var mapX = parseFloat(mapTransform[0].split("(")[1].replace("px", ""));
    var mapY = parseFloat(mapTransform[1].replace("px", ""));
    mapPane.style.transform = "";
    mapPane.style.left = mapX + "px";
    mapPane.style.top = mapY + "px";

    var myTiles = $("img.leaflet-tile");
    var tilesLeft = [];
    var tilesTop = [];
    var tileMethod = [];
    for (var i = 0; i < myTiles.length; i++) {
        if (myTiles[i].style.left != "") {
            tilesLeft.push(parseFloat(myTiles[i].style.left.replace("px", "")));
            tilesTop.push(parseFloat(myTiles[i].style.top.replace("px", "")));
            tileMethod[i] = "left";
        } else if (myTiles[i].style.transform != "") {
            var tileTransform = myTiles[i].style.transform.split(",");
            tilesLeft[i] = parseFloat(tileTransform[0].split("(")[1].replace("px", ""));
            tilesTop[i] = parseFloat(tileTransform[1].replace("px", ""));
            myTiles[i].style.transform = "";
            tileMethod[i] = "transform";
        } else {
           ...