32:T409,function getBoundingBoxCorners(geojson, decimals = precision) { if (!geojson || !geojson.features || !geojson.features.length) { throw new Error("Invalid GeoJSON input."); } const feature = geojson.features[0].geometry; if (feature.type !== "Polygon" && feature.type !== "MultiPolygon") { throw new Error("GeoJSON does not contain a Polygon or MultiPolygon."); } // Calculate the bounding box const bbox = turf.bbox(geojson); const [minX, minY, maxX, maxY] = bbox; // Define the corners of the bounding box const topLeft = [minX, minY]; const topRight = [maxX, minY]; const bottomRight = [maxX, maxY]; const bottomLeft = [minX, maxY]; const corners = { topLeft: [minX, maxY], topRight: [maxX, maxY], bottomRight: [maxX, minY], bottomLeft: [minX, minY] }; const truncatedCorners = {}; for (const [key, value] of Object.entries(corners)) { truncatedCorners[key] = value.map((coord) => parseFloat(coord.toFixed(decimals)) ); } return truncatedCorners; }33:T542,dropEvent = { // dz is the name we gave the HTML cell with the drop zone. dz.addEventListener("drop", (ev) => { console.log("File(s) dropped"); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) for (var i = 0; i < ev.dataTransfer.items.length; i++) { // If dropped items aren't files, reject them if (ev.dataTransfer.items[i].kind === "file") { var file = ev.dataTransfer.items[i].getAsFile(); mutable fileName = file.name; console.log("... file[" + i + "].name = " + file.name); //console.log('text of the file:', file.text()) file.text().then((text) => { console.log("file text:", text); // try dropping a JSON file mutable inputFile = JSON.parse(text); }); } } } else { // Use DataTransfer interface to access the file(s) for (var i = 0; i < ev.dataTransfer.files.length; i++) { console.log( "... file[" + i + "].name = " + ev.dataTransfer.files[i].name ); } } }); dz.addEventListener("dragover", (ev) => { // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); }); }34:[{"id":"a20bea4567584416e0932bd946c5a04ad11e7ce59cfbd4f78f424a4545b13f43f49e3e072554ba681edb26008354c54676393c3afa84b498530038098677da1f","href":"https://static.observableusercontent.com/files/a20bea4567584416e0932bd946c5a04ad11e7ce59cfbd4f78f424a4545b13f43f49e3e072554ba681edb26008354c54676393c3afa84b498530038098677da1f","name":"screenshot_may.jpg","type":"image/jpeg","lastModified":1716823900013.236,"size":539250},{"id":"3b6852a009f4464fbaffee399f825b379d0202d93643888fc5208a2db2b085c168f59a98dc7324f1aa1b821836b0fd0c9e36dc3815cf6181ffd44226f521fa6b","href":"https://static.observableusercontent.com/files/3b6852a009f4464fbaffee399f825b379d0202d93643888fc5208a2db2b085c168f59a98dc7324f1aa1b821836b0fd0c9e36dc3815cf6181ffd44226f521fa6b","name":"screenshot_may@1.jpg","type":"image/jpeg","lastModified":1716824166816.817,"size":338250}] 30:{"title":"Effortlessly Integrate Custom Raster Layers into Mapbox","cells":[{"id":0,"value":"# Effortlessly Integrate Custom Raster Layers into Mapbox","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"This tool simplifies the extraction of polygon dimensions from GeoJSON data, catering specifically to Mapbox projects incorporating [raster layers](https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/). By swiftly obtaining bounding box coordinates, users can seamlessly integrate raster layers into their Mapbox applications.\n\nOne easy way for obtaining this Polygon is though QGIS' _Create layer from extent_ and select the target layer. Then export the new polygon as a GeoJSON file for immediate use with this tool.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"## 1. Drop your file here","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"

\nDrag your GeoJSON on to this drop zone\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":134,"value":"## 2. If its needed specify coordinate precision","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"viewof precision = Inputs.range([0, 10], {\n label: \"Coordinate precision\",\n value: 4,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"## 3. Copy the result","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"output = getBoundingBoxCorners(inputFile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"{\n if (inputFile !== undefined) {\n const output = getBoundingBoxCorners(inputFile);\n if (output) {\n return copy(JSON.stringify(output));\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"You can use this data as follows:\n\n```javascript\n// add the raster source\nmap.addSource(\"${fileName.split('.')[0]}_source\", {\n type: \"image\",\n url: \"./${fileName.replace('geojson', 'tif')}\",\n coordinates: ${values},\n});\n\n// add the raster layer\nmap.addLayer(\n {\n id: \"${fileName.split('.')[0]}_layer\",\n type: \"raster\",\n source: \"${fileName.split('.')[0]}_source\",\n paint: {\n \"raster-fade-duration\": 0,\n }\n }\n);\n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"This tool is ideal for projects requiring precise raster layer integration, including customized images such as gradients and arrows, making it a valuable asset for advanced Mapbox applications:","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"screenshot_may = FileAttachment(\"screenshot_may@1.jpg\").image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"cpContents = (contents) => {\n const textarea = document.createElement(\"textarea\");\n\n textarea.value = `${contents}`;\n document.body.appendChild(textarea);\n textarea.select();\n document.execCommand(\"copy\");\n textarea.remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"copy = (contents) => {\n const btn = html``;\n btn.addEventListener(\"click\", () => cpContents(contents));\n\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"mutable inputFile = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"values = JSON.stringify(Object.values(output))","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"mutable fileName = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}