2b:null 2c:["$","title",null,{"children":"Geo-referencing an SVG | Aaron Kyle Dennis | Observable"}] 31:T4bda,svg_converted = html` `32:[{"id":"d72a826a5743953250d81b1c357483619cd62b225bf3ab19dfc65aae245264a7f587f7cbbde27a2eea765c7fa360791ca75009797fe844f7e65fb504705728ac","href":"https://static.observableusercontent.com/files/d72a826a5743953250d81b1c357483619cd62b225bf3ab19dfc65aae245264a7f587f7cbbde27a2eea765c7fa360791ca75009797fe844f7e65fb504705728ac","name":"_ags_mapf4dfd0be0ff942388b8f6044cdd90e06.svg","type":"image/svg+xml","lastModified":1635958157374.038,"size":19577},{"id":"3ef1a9b84af78ae8619019888f8121447a1e1bbbc2c2bec80e9545a1388ebad2dddda5d6949218fc92acd75abc2acd75caf50934e7ef4bbcefc79b77e2a8b026","href":"https://static.observableusercontent.com/files/3ef1a9b84af78ae8619019888f8121447a1e1bbbc2c2bec80e9545a1388ebad2dddda5d6949218fc92acd75abc2acd75caf50934e7ef4bbcefc79b77e2a8b026","name":"extract_ags_mapf4dfd0be0ff942388b8f6044cdd90e061635941533.json","type":"application/json","lastModified":1635958157374.038,"size":22694},{"id":"bede682c9eb71d39750b63c55c54f4c8f70f4cb00c083310ad88bd3b378c4ebbdc3168f29bcf82c2864616a56e34b1812b02579fafbae0957a0a0dfe87d31d14","href":"https://static.observableusercontent.com/files/bede682c9eb71d39750b63c55c54f4c8f70f4cb00c083310ad88bd3b378c4ebbdc3168f29bcf82c2864616a56e34b1812b02579fafbae0957a0a0dfe87d31d14","name":"moha_admin0_state.json","type":"application/json","lastModified":1635958157374.038,"size":2245374},{"id":"031aa6814654c4c2437ea64f5aa3cfe0c6328a17995a5a8f6beab6ce0fa8b33f932c99d24253a164317f736f06173ec775cbf95a6fee2e3426a8d007ee27a244","href":"https://static.observableusercontent.com/files/031aa6814654c4c2437ea64f5aa3cfe0c6328a17995a5a8f6beab6ce0fa8b33f932c99d24253a164317f736f06173ec775cbf95a6fee2e3426a8d007ee27a244","name":"objective.png","type":"image/png","lastModified":1635958157374.038,"size":20681},{"id":"3fbcfbbf39560122a29cce691b1431aebda82ff0fa2ed4ff6103f0dc3f113e72f41d206027ee2827f04690ee58c9a3d08d9048d530332c09d2b2179a079ba40f","href":"https://static.observableusercontent.com/files/3fbcfbbf39560122a29cce691b1431aebda82ff0fa2ed4ff6103f0dc3f113e72f41d206027ee2827f04690ee58c9a3d08d9048d530332c09d2b2179a079ba40f","name":"vectorized-conversion.geojson","type":"application/geo+json","lastModified":1636029842483.549,"size":6782217}] 2f:{"id":"0f9bbdb341f62b92","slug":null,"title":"Geo-referencing an SVG","thumbnail":"317231f127ccff44e065310be3bd8394712bed3021a20c4395a082187fafcbb9","access_level":"unlisted","create_time":"$D2021-11-03T16:49:17.374Z","update_time":"$D2021-11-04T12:54:15.373Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":739,"publish_version":739,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Geo-referencing an SVG","cells":[{"id":0,"value":"# Geo-referencing an SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`\nI would like to learn how to properly geo-reference an SVG for use within a D3.js map. The result should look something like this.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"FileAttachment(\"objective.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`\n----\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\nI have a spatial data file showing Nepal's country boundaries:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"moha_admin0 = await FileAttachment(\"moha_admin0_state.json\").json() // alt:d3.json( cors_proxy + \"http://drm.moha.gov.np/geoserver/wfs?srsName=EPSG%3A4326&typename=npdisaster%3Aoutline&outputFormat=json&version=1.0.0&service=WFS&request=GetFeature\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"projection = d3.geoIdentity()\n .reflectY(true)\n .fitWidth(width, moha_admin0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"height = Math.ceil(path.bounds(moha_admin0)[1][1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"nepal_admin_map_moha = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`\nI've also got a (semi? / non? spatial) data file showing some information on land use that is supplied by ArcGIS REST API:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"cors_proxy = \"https://observable-cors.glitch.me/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"image_data = fetch(\n \"https://geoapps.icimod.org/icimodarcgis/rest/services/Nepal/Agriculture_Mask/MapServer?f=pjson\"\n).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"url_spec = cors_proxy + \"http://geoapps.icimod.org/icimodarcgis/rest/services/Nepal/Agriculture_Mask/MapServer/export?bbox=\" + xmin + \",\" + ymin + \",\" + xmax + \",\" + ymax + \"bboxSR=\" + sr + \",\" + \"imageSR=\" + sr +\"&layers=show:\" + select_layers + \"size=\" + img_width + \",\" + img_height +\"&format=\" + select_format + \"&transparent=true&dpi=&f=pjson\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof select_layers = Inputs.select(Object.keys(image_data.layers), {label:\"Select Layers\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof select_format = Inputs.select([\"svg\", \"png\", \"png32\"], {\n label: \"Select Format\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"result = fetch(url_spec).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"xmin = image_data.fullExtent.xmin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"ymin = image_data.fullExtent.ymin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"xmax = image_data.fullExtent.xmax","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"ymax = image_data.fullExtent.ymax","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"sr = image_data.spatialReference.wkid","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"img_width = image_data.maxImageWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"img_height = image_data.maxImageHeight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"layers = Object.keys(image_data.layers).join(\", \")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`\nThe main challenge that I am having is that while I know the spatial information that describes the SVG image (indeed - I supply it as part of the request to the server), the image itself is not spatially referenced. So we need to figure out how to re-reference in these data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`\n**Attempts**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"{\n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n \n // add image\n svg.append(\"path\")\n .attr('fill', 'none')\n .attr('stroke', 'black')\n .attr('stroke-width', 2)\n .attr('d', path(moha_admin0));\n \n // add image\n svg.append(\"svg:image\")\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', width)\n .attr('height', height)\n .attr(\"xlink:href\", result.href)\n \n // pass to Observable to represent this block\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"vectorized_conversion = await FileAttachment(\"vectorized-conversion.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`\nworld file parameters\n\n\\`\\`\\`\npixel size along x, in degrees\n0\n0\npixel size along y, in degrees\nx-coordinate of the center of the original image’s upper left pixel, in degrees\ny-coordinate of the center of the original image’s upper left pixel, in degrees\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"world_file=`\n${(complete_image.extent.xmax - complete_image.extent.xmin)/(complete_image.width - 1)}\n0\n0\n-${(complete_image.extent.ymax - complete_image.extent.ymin)/(complete_image.width - 1)}\n${complete_image.extent.xmin}\n${complete_image.extent.ymax}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"complete_image.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"pixel_size_x = (complete_image.extent.xmax - complete_image.extent.xmin)/(4096 - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"pixel_size_y = (-complete_image.extent.ymax + -complete_image.extent.ymin)/(4096 - 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"complete_image.href","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"complete_image = fetch('https://geoapps.icimod.org/icimodarcgis/rest/services/Nepal/Agriculture_Mask/MapServer/export?bbox=77.94771290110823%2C+26.081245580749236%2C+91.38253135336103%2C+30.0000338114638&bboxSR=&layers=&layerDefs=&size=4096%2C+4096&imageSR=&historicMoment=&format=png&transparent=true&dpi=&time=&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&rotation=&datumTransformations=&layerParameterValues=&mapRangeValues=&layerRangeValues=&clipping=&spatialFilter=&f=pjson').then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"{\n // create SVG element\n let svg = d3.select(DOM.svg(width, height))\n \n // add image\n svg.append(\"path\")\n .attr('fill', 'none')\n .attr('stroke', 'black')\n .attr('stroke-width', 2)\n .attr('d', path(moha_admin0));\n \n // add image\n svg.append(\"path\")\n .attr('fill', 'grey')\n .attr('fill-opacity', '0.5')\n .attr('stroke', 'grey')\n .attr('stroke-width', 1)\n .attr('d', path(vectorized_conversion));\n \n // pass to Observable to represent this block\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`\nLet's see if we can convert this SVG into JSON (in case that helps us to produce a geojson):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"svgson = require('svgson@5.2.1/dist/svgson.umd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"svgson.parse(await FileAttachment(\"_ags_mapf4dfd0be0ff942388b8f6044cdd90e06.svg\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`\nHmm. This is a JSON object, but it looks a bit different than what I was expecting... which would be something more like this (created with an online converter):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"online_conversion_reference = FileAttachment(\n \"extract_ags_mapf4dfd0be0ff942388b8f6044cdd90e061635941533.json\"\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`\nWe can also have a look at a converted SVG as text for some clues:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"