grinat / leaflet-simple-map-screenshoter

Leaflet plugin which take screenshot of map
MIT License
71 stars 19 forks source link

Screenshot final is in diagonal #24

Closed cavasinf closed 2 years ago

cavasinf commented 2 years ago

Issue

When I try to screen leaflet map, the final screenshot is all in diagonal.

Steps to Reproduce

import 'leaflet'; import 'leaflet-draw'; import 'leaflet-mouse-position' import 'leaflet-measure-path'; import 'leaflet/dist/leaflet.css'; import 'leaflet-draw/dist/leaflet.draw.css'; import 'leaflet-measure-path/leaflet-measure-path.css'; import '@elfalem/leaflet-curve'

import {SimpleMapScreenshoter} from 'leaflet-simple-map-screenshoter'

$(function () { const $divMap = $('#divMap'); $divMap.height($divMap.parent().width() * 0.5);

const map = new L.Map($divMap.attr('id'));
const drawnItems = new L.FeatureGroup();

map.fitBounds([[0,0], [700,1000]]);
map.addLayer(drawnItems);

const drawControl = new L.Control.Draw({
    position: 'topleft',
    draw: {
        polyline: false,
        polygon: true,
        rectangle: false,
        circle: false,
        marker: false,
        circlemarker: false
    },
    edit: {
        featureGroup: drawnItems,
        remove: true
    }
});
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function (event) {
    drawnItems.addLayer(event.layer);
});

new SimpleMapScreenshoter().addTo(map)

});


- HTML file: 
```html
<html style="height: auto; min-height: 100%;" lang="fr"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Test Leaflet</title>

{{ encore_entry_link_tags('page_tests_leaflet') }}

<body class="skin-black" style="height: auto; min-height: 100%;">
<div class="wrapper" style="height: auto; min-height: 100%;">
    <div style="min-height: 825px;">
        <section>
            <div id="divMap" style="width: 100%; height: 200px; border: 1px solid #ccc"></div>
        </section>
    </div>
</div>

{{ encore_entry_script_tags('page_tests_leaflet') }}

</body>
</html>
  1. Make a Polygon

  2. Use the screenshot button

  3. Cry with the result

Environment

My package.json => https://pastebin.com/KJMbz6sX

grinat commented 2 years ago

@cavasinf problem in css style, after i removed border: 1px solid #ccc all work fine

https://jsfiddle.net/grinat/49wv5j7k/1/