31:[{"id":"f97584715e7e8b0d48b8a56259ee96b52ba5c439555ac73748fe732fd2d92e06612d7c081bff9b3a497c2e9e6209592d6689e92d825268c0c211b4c34c500d9e","href":"https://static.observableusercontent.com/files/f97584715e7e8b0d48b8a56259ee96b52ba5c439555ac73748fe732fd2d92e06612d7c081bff9b3a497c2e9e6209592d6689e92d825268c0c211b4c34c500d9e","name":"bbox_gaza.geojson","type":"application/geo+json","lastModified":1697108129712.958,"size":490},{"id":"9409685f19826f6354ec38c677beab417a62b39d40221eee803299b1593f973feef1b04509f855b5e385227622b8791baf1185a14dfd5155a17271ee724e8f09","href":"https://static.observableusercontent.com/files/9409685f19826f6354ec38c677beab417a62b39d40221eee803299b1593f973feef1b04509f855b5e385227622b8791baf1185a14dfd5155a17271ee724e8f09","name":"bbox_big.geojson","type":"application/geo+json","lastModified":1697108310678.246,"size":482}] 2f:{"title":"Inset map creator","cells":[{"id":0,"value":"# Inset map creator","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"Tiny tool for creating a locator for using as an inset map. I'm using it for creating maps of the current Israel-Hamas War.","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"viewof resolution = Inputs.radio([\"10 (with issues)*\", \"50\", \"110\"], {\n label: \"Select one the resolution for Natural Earth\",\n value: \"110\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"*_The '10' resolution presents issues but it is usable when you manipulate the output in a Vector design software_.","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"You can add your own GeoJSON to draw a square of the desired area of interest.","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"viewof inputBoundingBox = Inputs.file({\n label: \"Add your bounding box GeoJSON or any kinf of layer\",\n width: 400\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"inputJSON = inputBoundingBox && inputBoundingBox.json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"world_map = {\n console.log(inputBoundingBox);\n if (inputBoundingBox !== null) {\n return await inputBoundingBox.json().then(function (result) {\n console.log(result);\n return Plot.plot({\n projection: \"equal-earth\",\n width,\n marks: [\n Plot.graticule(),\n Plot.geo(land, { fill: \"#ccc\" }),\n Plot.geo(countries_lines, { stroke: \"#fff\" }),\n Plot.geo(result, { stroke: \"darkred\" }),\n Plot.sphere()\n ]\n });\n });\n }\n return Plot.plot({\n projection: \"equal-earth\",\n width,\n marks: [\n Plot.graticule(),\n Plot.geo(land, { fill: \"#ccc\" }),\n Plot.geo(countries_lines, { stroke: \"#fff\" }),\n Plot.sphere()\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"html`\n

${DOM.download(\n () => serialize(world_map),\n `world_map_${Date.now()}`,\n \"Descarga como SVG\"\n )}

${DOM.download(\n () => rasterize(world_map),\n `world_map_${Date.now()}`,\n \"Descarga como PNG\"\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"_Middle zoom_","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"viewof radios = Inputs.radio([\"Albers\", \"Custom\"], {\n label: \"Choose projection\",\n value: \"Albers\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"viewof form = Inputs.form({\n longitudeAlbers: Inputs.range([-180, 180], {\n label: \"Longitude\",\n step: 0.1,\n value: 0,\n disabled: disableInput\n }),\n latitudeAlbers: Inputs.range([-90, 90], {\n label: \"Latitude\",\n step: 0.1,\n min: -180,\n max: 180,\n value: 42,\n disabled: disableInput\n }),\n firstParallel: Inputs.range([0, 90], {\n label: \"First Standard Parallel\",\n step: 0.01,\n value: 35,\n disabled: disableInput\n }),\n secondParallel: Inputs.range([0, 90], {\n label: \"Second Standard Parallel\",\n step: 0.01,\n value: 65,\n disabled: disableInput\n }),\n rotateAlbersLamda: Inputs.range([-360, 360], {\n label: \"Rotate Lambda\",\n step: 0.01,\n value: -20,\n disabled: disableInput\n }),\n rotateAlbersPhi: Inputs.range([-360, 360], {\n label: \"Rotate Phi\",\n step: 0.01,\n value: 0,\n disabled: disableInput\n }),\n scale: Inputs.range([200, 10000], {\n label: \"Scale\",\n step: 0.01,\n value: 700,\n disabled: disableInput\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"europe_map = {\n const projection = disableInput ? albers : albers2;\n if (inputJSON !== null) {\n return inputBoundingBox.json().then(function (result) {\n console.log(result);\n return Plot.plot({\n projection,\n width,\n height,\n marks: [\n Plot.graticule(),\n Plot.geo(land, { fill: \"#ccc\" }),\n Plot.geo(countries_lines, { stroke: \"#fff\" }),\n Plot.geo(result, { stroke: \"darkred\" })\n ]\n });\n });\n }\n return Plot.plot({\n projection,\n width,\n height,\n marks: [\n Plot.graticule(),\n Plot.geo(land, { fill: \"#ccc\" }),\n Plot.geo(countries_lines, { stroke: \"#fff\" })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"html`\n

${DOM.download(\n () => serialize(europe_map),\n `europe_map_${Date.now()}`,\n \"Descarga como SVG\"\n )}

${DOM.download(\n () => rasterize(europe_map),\n `europe_map_${Date.now()}`,\n \"Descarga como PNG\"\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"_Close zoom_","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"viewof smallMapForm = Inputs.form({\n scale: Inputs.range([100, 7000], {\n label: \"Scale\",\n step: 0.1,\n value: 5500\n }),\n \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"middle_east = {\n const projection = d3\n .geoMercator()\n .center([34.9, 31.5])\n .translate([width / 2, width / 2])\n .scale(smallMapForm.scale)\n .clipExtent([\n [margin, margin],\n [width - margin, width - margin]\n ]);\n\n if (inputJSON !== null) {\n return inputBoundingBox.json().then(function (result) {\n console.log(result);\n return Plot.plot({\n projection,\n width,\n height: width,\n marks: [\n Plot.geo(land, { fill: \"#ccc\" }),\n Plot.geo(countries_lines, { stroke: \"#fff\" }),\n Plot.geo(result, { stroke: \"darkred\" })\n ]\n });\n });\n }\n return Plot.plot({\n projection,\n width,\n height: width,\n marks: [\n Plot.geo(countries, { fill: \"#ccc\" }),\n Plot.geo(countries_lines, { stroke: \"#fff\" })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"html`\n

${DOM.download(\n () => serialize(middle_east),\n `middle_east_${Date.now()}`,\n \"Descarga como SVG\"\n )}

${DOM.download(\n () => rasterize(middle_east),\n `middle_east_${Date.now()}`,\n \"Descarga como PNG\"\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":403,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":706,"value":"### Config Stuff\n_get out of here!_","pinned":false,"hidden":false,"mode":"md"},{"id":715,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"albers = d3\n .geoConicConformal()\n .center([0, 42])\n .parallels([35, 65])\n .rotate([-20, 0])\n .scale(700)\n .translate([width / 2, height / 2])\n .clipExtent(clipExtent)\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"albers2 = d3\n .geoConicConformal()\n .center([form.longitudeAlbers, form.latitudeAlbers])\n .parallels([form.firstParallel, form.secondParallel])\n .rotate([form.rotateAlbersLamda, form.rotateAlbersPhi])\n .scale(form.scale)\n .translate([width / 2, height / 2])\n .clipExtent(clipExtent)\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"disableInput = radios === \"Albers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"clipExtent = [[margin, margin], [width - margin, height - margin]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"margin = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"bbox_gaza = FileAttachment(\"bbox_gaza.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"countries_lines = topojson.mesh(\n countries_data,\n countries_data.objects.countries,\n function (a, b) {\n return a !== b;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"bbox_big = FileAttachment(\"bbox_big.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"width = 620","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"height = 380","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"land = topojson.feature(countries_data, countries_data.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"countries = topojson.feature(countries_data, countries_data.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"countries_data = d3.json(\n `https://cdn.jsdelivr.net/npm/world-atlas@2/countries-${String(\n parseInt(resolution)\n )}m.json`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"import { serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"import { rasterize } from \"@luissevillano/poisson-disc-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"import { jsonInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}