Question

0

116

Views

htmltocanvas Not Capturing the Map

I have the below code that I want to capture a screenshot of where I click including the map.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <style>
        #map,#my_location { height: 500px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="static/html2canvas.js"></script>
    <script src="static/jquery-3.5.1.min.js"></script>
    <script>
        var mymap = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer(
            "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {"detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
        ).addTo(mymap);

        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
                const screenshotTarget = document.body;

            html2canvas(document.getElementById("map")).then((canvas) => {
                const base64image = canvas.toDataURL("image/jpg");
                $("#map").html("<img src=\"\" id=\"my_location\"/>");
                $("#my_location").attr({'src':canvas.toDataURL("image/jpg",1)});

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

However, when I click on the map only coordinates and a marker are captured excluding the map, refer to the below image.

What needs to be done in order to include the base map on the htmltocanvas capture.

about 4 years ago · Juan Pablo Isaza

Answer question

0

116

htmltocanvas Not Capturing the Map

Find remote jobs

Andres GPT