├── COPYING ├── css ├── style.css └── bootstrap.min.css ├── readme.md ├── index.html └── js └── script.js /COPYING: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015-2020 Matthew Petroff 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so, 8 | subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 19 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-bottom: 10px; 3 | } 4 | 5 | #error-message { 6 | display: none; 7 | } 8 | 9 | .map-container { 10 | overflow-x: auto; 11 | } 12 | 13 | #map { 14 | width: 768px; 15 | height: 576px; 16 | position: relative; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | 21 | 22 | 23 | /* 24 | * Hide high-res map rendering 25 | */ 26 | .hidden-map { 27 | overflow: hidden; 28 | height: 0; 29 | width: 0; 30 | position: fixed; 31 | } 32 | 33 | 34 | 35 | /* 36 | * Loading spinner 37 | * Based on http://codepen.io/lixquid/pen/ybjmr 38 | */ 39 | #spinner { 40 | width: 24px; 41 | height: 24px; 42 | border-top: 2px solid #fff; 43 | border-bottom: 2px solid #fff; 44 | border-right: 2px solid #333; 45 | border-left: 2px solid #333; 46 | -webkit-animation: spinner 0.75s ease infinite; 47 | animation: spinner 0.75s ease infinite; 48 | border-radius: 100%; 49 | position: relative; 50 | top: 8px; 51 | margin-left: 10px; 52 | display: none; 53 | } 54 | @-webkit-keyframes spinner { 55 | to { 56 | -webkit-transform: rotate(180deg); 57 | transform: rotate(180deg); 58 | } 59 | } 60 | @keyframes spinner { 61 | to { 62 | -webkit-transform: rotate(180deg); 63 | transform: rotate(180deg); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Print Maps 2 | 3 | Web maps normally don't print well, as their resolution is much lower than 4 | normal print resolution, not to mention the various other unwanted text and 5 | elements that print along with the map. Print Maps changes that by leveraging 6 | [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) to render print 7 | resolution maps in the browser. 8 | 9 | ## Future updates 10 | 11 | Due to Mapbox's new [anti-FOSS stance](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0), 12 | Mapbox GL JS will not be updated past v1.13. Please reach out to Mapbox to 13 | express your displeasure with this stance. Maintenance on this repository will 14 | continue as long as fixes can be made without updating Mapbox GL JS. 15 | 16 | ## Options 17 | 18 | * Inches or millimeters 19 | * PNG or PDF output (PDF is Letter size for inches, A4 for millimeters) 20 | * Choice of map styles 21 | * Height and width settings 22 | * DPI setting 23 | 24 | ## Building 25 | 26 | Add your Mapbox access token to `js/script.js`, run a local webserver such as 27 | `python3 -m http.server`, and open `index.html`. 28 | 29 | ## Attribution 30 | 31 | Attribution of maps is required. See tile provider terms for details. 32 | 33 | ## License 34 | 35 | Print Maps is distributed under the MIT License. For more information, read the 36 | file `COPYING` or peruse the license 37 | [online](https://github.com/mpetroff/print-maps/blob/master/COPYING). 38 | 39 | ## Credits 40 | 41 | * [Matthew Petroff](http://mpetroff.net/), Original Author 42 | * [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) 43 | * [FileSaver.js](https://github.com/eligrey/FileSaver.js/) 44 | * [canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js) 45 | * [jsPDF](https://github.com/MrRio/jsPDF) 46 | * [Bootstrap](http://getbootstrap.com/) 47 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |High-resolution maps in the browser, for printing.
19 |