Closed cavasinf closed 2 years ago
When I try to screen leaflet map, the final screenshot is all in diagonal.
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>
Make a Polygon
Use the screenshot button
Cry with the result
My package.json => https://pastebin.com/KJMbz6sX
package.json
@cavasinf problem in css style, after i removed border: 1px solid #ccc all work fine
border: 1px solid #ccc
https://jsfiddle.net/grinat/49wv5j7k/1/
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);
});
Make a Polygon
Use the screenshot button
Cry with the result
Environment
My
package.json
=> https://pastebin.com/KJMbz6sX