Preview, adjust, and print the current map without a server component, checkout the Demo
PrintPreview resizes the current map to fit a letter piece of paper thanks to this stackoverflow post. The map can then be zoomed and panned to fit exactly what needs to be printed.
-
Create a leaflet map. Checkout Leaflets Quick Start Guide for a basic map example.
-
Include PrintPreview javascript and css
<link rel="stylesheet" type="text/css" href="https://rawgit.com/MarcChasse/leaflet.PrintPreview/master/leaflet.printpreview.css" disabled> <link rel="stylesheet" type="text/css" href="https://rawgit.com/MarcChasse/leaflet.PrintPreview/master/leaflet.printpreview.letter.landscape.css" disabled> <link rel="stylesheet" type="text/css" href="https://rawgit.com/MarcChasse/leaflet.PrintPreview/master/leaflet.printpreview.letter.portrait.css" disabled> <script src="https://rawgit.com/MarcChasse/Leaflet.PrintPreview/master/leaflet.printpreview.js"></script>
-
Add the map control:
L.PrintPreview().addTo(map);
Here is everything you need to get this up and running. Copy and past the following to an .html
file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Leaflet.PrintPreview DEMO</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link id="pp-main" rel="stylesheet" href="https://rawgit.com/MarcChasse/leaflet.PrintPreview/master/leaflet.printpreview.css" disabled>
<link id="pp-ltr-land" rel="stylesheet" href="https://rawgit.com/MarcChasse/leaflet.PrintPreview/master/leaflet.printpreview.letter.landscape.css" disabled>
<link id="pp-ltr-port" rel="stylesheet" href="https://rawgit.com/MarcChasse/leaflet.PrintPreview/master/leaflet.printpreview.letter.portrait.css" disabled>
<style>html,body{margin:0;}#map{width:100vw;height:100vh;}</style>
</head>
<body>
<div id="map" ></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/MarcChasse/Leaflet.PrintPreview/master/leaflet.printpreview.js"></script>
<script>
osm = new L.TileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: 'Map data © OpenStreetMap contributors'}
);
var map = L.map('map', {
center: [52.27,-113.81],
zoom: 12
});
map.addLayer(osm);
L.PrintPreview().addTo(map);
</script>
</body>
</html>
Checkout the DEMO
TBD.