├── LICENSE
├── README.md
├── images
    ├── map_1.png
    ├── map_2_export.png
    ├── map_3_select_area.png
    ├── map_4_overpass.png
    └── plotting_image.png
├── index.html
├── map.osm
└── map_to_grid.sh


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Piet Brömmel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Plotting Maps
 2 | 
 3 | This is a tool to easily create OpenStreetMap SVG maps to plot them with a pen plotter. Check out the tool here: https://piebro.github.io/plotting-maps. There, you can upload OSM exports and render them as SVGs consisting only of lines, making it very pen plotter-friendly.
 4 | 
 5 | ## How to Use
 6 | 
 7 | 1. Use a **Desktop Browser** or enable desktop browsing on mobile.
 8 | 2. Go to https://www.openstreetmap.org.
 9 | 3. Navigate to a place of interest:
10 |    ![Screenshot of OpenStreetMap](images/map_1.png)
11 | 4. Click on "Export" (only visible on desktop):
12 |    ![Screenshot of OpenStreetMap with an arrow pointing to the "Export" button](images/map_2_export.png)
13 | 5. Select the area of interest:
14 |    ![Screenshot of OpenStreetMap with an arrow pointing to the "Manually select a different area" link](images/map_3_select_area.png)
15 | 6. Download the data via the Overpass API (you can also use the export button, but the size of the export is more limited):
16 |    ![Screenshot of OpenStreetMap with an arrow pointing to the "Overpass API" link](images/map_4_overpass.png)
17 | 7. Download the file and upload it to https://piebro.github.io/plotting-maps using the "Upload OSM Export" button.
18 | 8. Set all options and align the map by dragging and zooming.
19 | 9. Download the map using the "Download Map" button.
20 | 
21 | An alternative way to obtain OSM Map Extracts is to use a [public Overpass API instance](https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances) and download an area with a query.
22 | 
23 | ## Plot the Map
24 | 
25 | I use [vpype](https://github.com/abey79/vpype) and [axicli](https://axidraw.com/doc/cli_api/) to plot the map with my [AxiDraw Pen Plotter](https://shop.evilmadscientist.com/productsmenu/846).
26 | 
27 | I use linemerge and linesort to make the plotting faster,
28 | ```bash
29 | vpype read map.svg \
30 |   linemerge --tolerance 1mm \
31 |   linesort \
32 |   write \
33 |   --page-size 400x266mm \
34 |   --center \
35 |   plot.svg
36 | ```
37 | 
38 | create a preview to check the plotting time,
39 | ```bash
40 | axicli plot.svg --model 2 -vg3 --speed_pendown 15 --report_time -o preview.svg
41 | ```
42 | 
43 | and finally, plot the map.
44 | ```bash
45 | axicli plot.svg --model 2 --speed_pendown 15 && axicli -m align
46 | ```
47 | 
48 | Plotting a map on an A3 piece of paper.
49 | 
50 | ![Image of a plotter plotting a map](images/plotting_image.png)
51 | 
52 | If you want to plot the map on mulitple piece of papers, you can use the `map_to_grid.sh` script.
53 | 
54 | A similar, cool project with a different UX and output is: https://github.com/anvaka/city-roads/ and another project to visualize maps in a custom way (also for plotters) is: https://github.com/marceloprates/prettymaps
55 | 
56 | ## Contributing
57 | 
58 | Contributions to this project are welcome. Feel free to report bugs, suggest ideas, or create merge requests.
59 | 
60 | ## Developing
61 | 
62 | The project uses [Prettier](https://prettier.io/playground/) for linting javascript with a `print-width` of 120, `tab-width` of 4, and using single quotes.
63 | 
64 | ## Website Statistics
65 | 
66 | There is lightweight tracking for the website using Plausible. Anyone interested can view these statistics at https://plausible.io/piebro.github.io%2Fplotting-maps. It's worth noting that these statistics might be an underestimate as many users, including myself, use AdBlockers.
67 | 
68 | ## License
69 | 
70 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. The Example map.osm file is licensed under [ODbL](https://www.openstreetmap.org/copyright)


--------------------------------------------------------------------------------
/images/map_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piebro/plotting-maps/a3bea76be876993fadd295357986201a73870c57/images/map_1.png


--------------------------------------------------------------------------------
/images/map_2_export.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piebro/plotting-maps/a3bea76be876993fadd295357986201a73870c57/images/map_2_export.png


--------------------------------------------------------------------------------
/images/map_3_select_area.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piebro/plotting-maps/a3bea76be876993fadd295357986201a73870c57/images/map_3_select_area.png


--------------------------------------------------------------------------------
/images/map_4_overpass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piebro/plotting-maps/a3bea76be876993fadd295357986201a73870c57/images/map_4_overpass.png


--------------------------------------------------------------------------------
/images/plotting_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piebro/plotting-maps/a3bea76be876993fadd295357986201a73870c57/images/plotting_image.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Plotting OSM Maps</title>
  6 |     <meta name="viewport" content="width=800">
  7 |     <meta name="description" content="Online tool to make maps to print them on with a pen plotter.">
  8 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.9.2/proj4.js"></script>
  9 |     <script src="https://d3js.org/d3.v7.min.js"></script>
 10 |     <script defer data-domain="piebro.github.io/plotting-maps" src="https://plausible.io/js/script.js"></script>
 11 |     <style>
 12 |     img, svg {
 13 |         display: block;
 14 |         max-width: 92vw;
 15 |         max-height: 78vh;
 16 |         width: auto;
 17 |         height: auto;
 18 |         margin: auto;
 19 |         user-select: none;
 20 |     }
 21 | 
 22 |     #map-container {
 23 |         padding-top: 10px;
 24 |         display: flex;
 25 |         justify-content: center;
 26 |         align-items: center;
 27 |         width: 100%;
 28 |     }
 29 | 
 30 |     #button-container {
 31 |         text-align: center;
 32 |         float: center;   
 33 |     }
 34 | 
 35 |     .btn {
 36 |         background-color: #04AA6D;
 37 |         color: white;
 38 |         padding: 16px;
 39 |         font-size: 16px;
 40 |         border: none;
 41 |         cursor: pointer;
 42 |     }
 43 | 
 44 |     .btn:hover{
 45 |         background-color: #3e8e41;
 46 |     }
 47 | 
 48 |     .input-field {
 49 |         width: 60px;
 50 |         padding: 8px;
 51 |         margin: 5px;
 52 |     }
 53 | 
 54 |     .checkbox-container {
 55 |         white-space: nowrap;
 56 |         display: inline-block;
 57 |     }
 58 | 
 59 |     #vertical-line, #horizontal-line {
 60 |         position: fixed;
 61 |         background-color: black;
 62 |     }
 63 | 
 64 |     #vertical-line {
 65 |         top: 0;
 66 |         bottom: 0;
 67 |         left: 50%;
 68 |         width: 1px;
 69 |     }
 70 | 
 71 |     #horizontal-line {
 72 |         left: 0;
 73 |         right: 0;
 74 |         top: 50%;
 75 |         height: 1px;
 76 |     }
 77 |     </style>
 78 | </head>
 79 | 
 80 | <script>
 81 | let originalStrokeWidth = 0.5;
 82 | let currentOSMData = undefined;
 83 | 
 84 | let currentZoom = d3.zoomIdentity;
 85 | let currentDrag = { x: 0, y: 0 };
 86 | 
 87 | let saveFileName = 'map';
 88 | 
 89 | const latLonToUTMConverter = proj4('EPSG:4326', 'EPSG:3857');
 90 | 
 91 | function fromLatLonToUTM(lat, lon) {
 92 |     return latLonToUTMConverter.forward([parseFloat(lon), parseFloat(lat)]);
 93 | }
 94 | 
 95 | function getNodesIds(nodeIdToXY, way) {
 96 |     let nodeIds = [];
 97 |     way.querySelectorAll('nd').forEach((nd) => {
 98 |         const nodeId = nd.getAttribute('ref');
 99 |         nodeIds.push(nodeId);
100 |         nodeIdToXY[nodeId] = {};
101 |     });
102 |     return nodeIds;
103 | }
104 | 
105 | function addMultipolygonBuildingRelations(wayToNodeIDs, nodeIdToXY, xmlDoc) {
106 |     xmlDoc.querySelectorAll('relation').forEach((relation) => {
107 |         let tags = Array.from(relation.querySelectorAll('tag')).reduce((acc, tag) => {
108 |             acc[tag.getAttribute('k')] = tag.getAttribute('v');
109 |             return acc;
110 |         }, {});
111 | 
112 |         if (tags['building'] && tags['type'] === 'multipolygon') {
113 |             relation.querySelectorAll('member').forEach((member) => {
114 |                 wayToNodeIDs[member.getAttribute('ref')] = [];
115 |             });
116 |         }
117 |     });
118 | 
119 |     xmlDoc.querySelectorAll('way').forEach((way) => {
120 |         const wayId = way.getAttribute('id');
121 |         if (wayId in wayToNodeIDs) {
122 |             wayToNodeIDs[wayId] = getNodesIds(nodeIdToXY, way);
123 |         }
124 |     });
125 | }
126 | 
127 | function processOSMData(osmData) {
128 |     const parser = new DOMParser();
129 |     const xmlDoc = parser.parseFromString(osmData, 'text/xml');
130 | 
131 |     const svgWidthInMM = parseFloat(document.getElementById('svgWidthInput').value);
132 |     const svgHeightInMM = parseFloat(document.getElementById('svgHeightInput').value);
133 | 
134 |     const bounds = xmlDoc.querySelector('bounds');
135 |     const minXY = fromLatLonToUTM(bounds.getAttribute('minlat'), bounds.getAttribute('minlon'));
136 |     const maxXY = fromLatLonToUTM(bounds.getAttribute('maxlat'), bounds.getAttribute('maxlon'));
137 |     const nodeCenterX = (minXY[0] + maxXY[0]) / 2;
138 |     const nodeCenterY = (minXY[1] + maxXY[1]) / 2;
139 | 
140 |     const scaleX = svgWidthInMM / (maxXY[0] - minXY[0]);
141 |     const scaleY = svgHeightInMM / (maxXY[1] - minXY[1]);
142 |     const scale = (Math.min(scaleX, scaleY) / 2) * 0.98;
143 | 
144 |     const bboxWidth = 100;
145 |     const bboxHeight = 100;
146 | 
147 |     const showBuilding = document.getElementById('buildingCheckbox').checked;
148 |     const showHighway = document.getElementById('highwayCheckbox').checked;
149 |     const showRailway = document.getElementById('railwayCheckbox').checked;
150 |     const showLanduse = document.getElementById('landuseCheckbox').checked;
151 |     const showNatural = document.getElementById('naturalCheckbox').checked;
152 | 
153 |     let wayToNodeIDs = {};
154 |     let nodeIdToXY = {};
155 |     if (showBuilding) {
156 |         addMultipolygonBuildingRelations(wayToNodeIDs, nodeIdToXY, xmlDoc);
157 |     }
158 | 
159 |     xmlDoc.querySelectorAll('way').forEach((way) => {
160 |         for (const tag of way.querySelectorAll('tag')) {
161 |             const key = tag.getAttribute('k');
162 |             const wayId = way.getAttribute('id');
163 |             if (showBuilding && key === 'building') {
164 |                 wayToNodeIDs[wayId] = getNodesIds(nodeIdToXY, way);
165 |                 break;
166 |             } else if (showHighway && key === 'highway') {
167 |                 wayToNodeIDs[wayId] = getNodesIds(nodeIdToXY, way);
168 |                 break;
169 |             } else if (showRailway && key === 'railway') {
170 |                 wayToNodeIDs[wayId] = getNodesIds(nodeIdToXY, way);
171 |                 break;
172 |             } else if (showLanduse && key === 'landuse') {
173 |                 wayToNodeIDs[wayId] = getNodesIds(nodeIdToXY, way);
174 |                 break;
175 |             } else if (showNatural && key === 'natural') {
176 |                 wayToNodeIDs[wayId] = getNodesIds(nodeIdToXY, way);
177 |                 break;
178 |             }
179 |         }
180 |     });
181 | 
182 |     xmlDoc.querySelectorAll('node').forEach((node) => {
183 |         const nodeId = node.getAttribute('id');
184 |         if (nodeId in nodeIdToXY) {
185 |             const [x, y] = fromLatLonToUTM(node.getAttribute('lat'), node.getAttribute('lon'));
186 |             nodeIdToXY[nodeId]['x'] = (x - nodeCenterX) * scale + bboxWidth / 2;
187 |             nodeIdToXY[nodeId]['y'] = -((y - nodeCenterY) * scale) + bboxHeight / 2;
188 |         }
189 |     });
190 | 
191 |     let svgString = `<svg baseProfile="tiny" height="${
192 |         svgHeightInMM * 10
193 |     }mm" version="1.2" viewBox="0 0 ${bboxWidth} ${bboxHeight}" width="${
194 |         svgWidthInMM * 10
195 |     }mm" xmlns="http://www.w3.org/2000/svg">`;
196 | 
197 |     svgString += `<rect x="-10000" y="-10000" width="20000" height="20000" fill="rgb(220,220,220)"/>`;
198 | 
199 |     svgString += `<g id="zoom-group"><g id="drag-group">`;
200 |     svgString += `<g fill="none" stroke="#555555" stroke-linecap="round" stroke-linejoin="round" class="zoomable-line">`;
201 | 
202 |     for (const nodeIds of Object.values(wayToNodeIDs)) {
203 |         const pathStr = nodeIds
204 |             .map((nodeId) => `${nodeIdToXY[nodeId].x.toFixed(2)} ${nodeIdToXY[nodeId].y.toFixed(2)}`)
205 |             .join(' L ');
206 |         svgString += `<path d="M ${pathStr}" />`;
207 |     }
208 | 
209 |     svgString += '</g></g></g></svg>';
210 |     return svgString;
211 | }
212 | 
213 | function updateSVG() {
214 |     const svgContainer = d3.select('#map-container');
215 |     svgContainer.html(processOSMData(currentOSMData));
216 | 
217 |     const svg = svgContainer.select('svg');
218 |     const zoomGroup = svg.select('#zoom-group');
219 |     const dragGroup = zoomGroup.select('#drag-group');
220 | 
221 |     const zoom = d3.zoom().on('zoom', function (event) {
222 |         currentZoom = event.transform;
223 |         applyTransformations();
224 |         svg.selectAll('.zoomable-line').style('stroke-width', function () {
225 |             return parseFloat(document.getElementById('svgStrokeWidth').value) / 25 / currentZoom.k;
226 |         });
227 |     });
228 |     svg.call(zoom).call(zoom.transform, d3.zoomIdentity.translate(currentZoom.x, currentZoom.y).scale(currentZoom.k));
229 | 
230 |     const drag = d3.drag().on('drag', function (event) {
231 |         currentDrag.x += event.dx;
232 |         currentDrag.y += event.dy;
233 |         applyTransformations();
234 |     });
235 |     dragGroup.call(drag);
236 | 
237 |     function applyTransformations() {
238 |         zoomGroup.attr('transform', currentZoom);
239 |         dragGroup.attr('transform', `translate(${currentDrag.x}, ${currentDrag.y})`);
240 |     }
241 | 
242 |     applyTransformations();
243 |     updateCenterLines();
244 | }
245 | 
246 | function updateCenterLines() {
247 |     const svgElement = d3.select('svg').node();
248 |     if (svgElement) {
249 |         const svgRect = svgElement.getBoundingClientRect();
250 |         const centerX = svgRect.left + svgRect.width / 2;
251 |         const centerY = svgRect.top + svgRect.height / 2;
252 | 
253 |         const verticalLine = document.getElementById('vertical-line');
254 |         verticalLine.style.position = 'fixed';
255 |         verticalLine.style.left = `${centerX}px`;
256 | 
257 |         const horizontalLine = document.getElementById('horizontal-line');
258 |         horizontalLine.style.position = 'fixed';
259 |         horizontalLine.style.top = `${centerY}px`;
260 |     }
261 | }
262 | 
263 | function toggleCrossLines() {
264 |     const isChecked = document.getElementById('showCrossCheckbox').checked;
265 |     const displayStyle = isChecked ? 'block' : 'none';
266 |     document.getElementById('vertical-line').style.display = displayStyle;
267 |     document.getElementById('horizontal-line').style.display = displayStyle;
268 | }
269 | 
270 | function handleFileUpload() {
271 |     const fileInput = document.getElementById('fileInput');
272 |     if (fileInput.files.length > 0) {
273 |         const file = fileInput.files[0];
274 |         const reader = new FileReader();
275 |         reader.onload = function (e) {
276 |             currentOSMData = e.target.result;
277 |             currentZoom = d3.zoomIdentity;
278 |             currentDrag = { x: 0, y: 0 };
279 |             updateSVG();
280 |         };
281 |         saveFileName = file.name.slice(0, -4);
282 |         reader.readAsText(file);
283 |     }
284 |     plausible('Button', { props: { Button: 'Upload OSM Export' } });
285 | }
286 | 
287 | function downloadSVG() {
288 |     const svgEl = document.querySelector('svg');
289 |     if (!svgEl) {
290 |         console.log('SVG not found');
291 |         return;
292 |     }
293 | 
294 |     const svgWidthInMM = parseFloat(document.getElementById('svgWidthInput').value);
295 |     const svgHeightInMM = parseFloat(document.getElementById('svgHeightInput').value);
296 | 
297 |     const serializer = new XMLSerializer();
298 |     let svgString = serializer.serializeToString(svgEl);
299 |     svgString = svgString.replace(`width="${svgWidthInMM * 10}mm"`, `width="${svgWidthInMM}mm"`);
300 |     svgString = svgString.replace(`height="${svgHeightInMM * 10}mm"`, `height="${svgHeightInMM}mm"`);
301 |     const blob = new Blob([svgString], { type: 'image/svg+xml' });
302 |     const url = URL.createObjectURL(blob);
303 | 
304 |     const downloadLink = document.createElement('a');
305 |     downloadLink.href = url;
306 |     downloadLink.download = saveFileName + '.svg';
307 |     document.body.appendChild(downloadLink);
308 |     downloadLink.click();
309 |     document.body.removeChild(downloadLink);
310 |     plausible('Button', { props: { Button: 'Download Map' } });
311 | }
312 | 
313 | window.onload = async function () {
314 |     window.plausible =
315 |         window.plausible ||
316 |         function () {
317 |             (window.plausible.q = window.plausible.q || []).push(arguments);
318 |         };
319 |     
320 |     await fetch('map.osm')
321 |         .then((response) => response.text())
322 |         .then((osmData) => (currentOSMData = osmData))
323 |         .catch((error) => console.error('Error loading OSM data:', error));
324 | 
325 |     updateSVG();
326 |     window.addEventListener('resize', function (event) {
327 |         updateCenterLines();
328 |     });
329 | };
330 | 
331 | </script>
332 | 
333 | <body>
334 |     
335 |     <div id="button-container">
336 |         <h1>Tool to Plot OpenStreetMap Exports with a Pen Plotter</h1>
337 |         
338 |         <input type="file" id="fileInput" style="display: none;" onchange="handleFileUpload()">
339 |         <button class="btn" id="uploadButton" onclick="document.getElementById('fileInput').click();">Upload OSM Export</button>
340 |         <button class="btn" id="downloadButton" onclick="downloadSVG()">Download Map</button>
341 |         <button class="btn" id="infoBtn" onclick="location.href='https://github.com/piebro/plotting-maps';">Infos and How to Use</button>
342 |     </div>
343 |     
344 | 
345 |     <div id="map-container"></div>
346 |     <div id="vertical-line" style="display: none;"></div>
347 |     <div id="horizontal-line" style="display: none;"></div>
348 |     <br>
349 |     <div id="button-container">
350 | 
351 |     <div class="checkbox-container">
352 |         <label for="svgWidthInput">Width (mm):</label>
353 |         <input type="number" id="svgWidthInput" class="input-field" value=300 onchange="updateSVG()">
354 |     </div>
355 |     
356 |     <div class="checkbox-container">
357 |         <label for="svgHeightInput">Height (mm):</label>
358 |         <input type="number" id="svgHeightInput" class="input-field" value=200 onchange="updateSVG()">
359 |     </div>
360 |     
361 |     <div class="checkbox-container">
362 |         <label for="svgStrokeWidth">Stroke Width:</label>
363 |         <input type="number" id="svgStrokeWidth" class="input-field" value=10 onchange="updateSVG()">
364 |     </div>
365 | 
366 |     <div class="checkbox-container">
367 |         <input type="checkbox" id="buildingCheckbox" checked onchange="updateSVG()">
368 |         <label for="buildingCheckbox">Building</label>
369 |     </div>
370 | 
371 |     <div class="checkbox-container">
372 |         <input type="checkbox" id="highwayCheckbox" checked onchange="updateSVG()">
373 |         <label for="highwayCheckbox">Way</label>
374 |     </div>
375 | 
376 |     <div class="checkbox-container">
377 |         <input type="checkbox" id="railwayCheckbox" checked onchange="updateSVG()">
378 |         <label for="railwayCheckbox">Railway</label>
379 |     </div>
380 | 
381 |     <div class="checkbox-container">
382 |         <input type="checkbox" id="landuseCheckbox" onchange="updateSVG()">
383 |         <label for="landuseCheckbox">Landuse</label>
384 |     </div>
385 | 
386 |     <div class="checkbox-container">
387 |         <input type="checkbox" id="naturalCheckbox" onchange="updateSVG()">
388 |         <label for="naturalCheckbox">Natural</label>
389 |     </div>
390 |     
391 |     <div class="checkbox-container">
392 |         <input type="checkbox" id="showCrossCheckbox" onchange="toggleCrossLines()">
393 |         <label for="showCrossCheckbox">Show cross</label>
394 |     </div>
395 | 
396 |     </div>
397 |     
398 | </body>
399 | </html>
400 | 


--------------------------------------------------------------------------------
/map_to_grid.sh:
--------------------------------------------------------------------------------
 1 | INPUT=$1
 2 | OUTPUT=out
 3 | GRID_X_COUNT=3
 4 | GRID_Y_COUNT=3
 5 | GRID_X_LENGTH_MM=100
 6 | GRID_Y_LENGTH_MM=100
 7 | 
 8 | for i in $(seq 1 $GRID_X_COUNT); do
 9 |   for j in $(seq 1 $GRID_Y_COUNT); do
10 |     start_crop_x=$(bc -l <<< "a=$i-1; a*$GRID_X_LENGTH_MM");
11 |     start_crop_y=$(bc -l <<< "a=$j-1; a*$GRID_Y_LENGTH_MM");
12 |     vpype read ${INPUT} crop ${start_crop_x}mm ${start_crop_y}mm ${GRID_X_LENGTH_MM}mm ${GRID_Y_LENGTH_MM}mm write --page-size ${GRID_X_LENGTH}x${GRID_Y_LENGTH}mm --center ${OUTPUT}_${i}_${j}.svg;
13 |     echo "${OUTPUT}_${i}_${j}.svg"
14 |   done;
15 | done;


--------------------------------------------------------------------------------