3e:null 3f:["$","title",null,{"children":"Submarine Cables | Mo El Geneidy | Observable"}] 45:[] 43:{"id":"fc08e11abe40d8f9","slug":null,"title":"Submarine Cables","thumbnail":"eb4dbc0c631827fa470c1788379bf22407937b968d202dc13dc59095c8942f76","access_level":"public","create_time":"$D2024-02-08T22:47:13.409Z","update_time":"$D2024-02-09T18:46:38.944Z","view_time":null,"first_public_time":"$D2024-02-08T22:47:13.409Z","has_unpublished_edits":null,"fork":{"id":"acc547e8d14a978c","slug":"census-2019-ua","title":"Census 2019 Urban Areas","owner":{"id":"21ad40b63dc7cde3","login":"bc","name":"Mo El Geneidy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"21ad40b63dc7cde3","login":"bc","name":"Mo El Geneidy","avatar_url":"https://avatars-next.observableusercontent.com/664f3ea176a14258bfe84880ac2139da73df4a6a08f27bf280ec1bdcb7d610d5","tier":"starter_2024","bio":"","following":false},"version":1629,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"644fcf47c6af2067","login":"bc","name":"Mo El Geneidy","avatar_url":"https://avatars-next.observableusercontent.com/664f3ea176a14258bfe84880ac2139da73df4a6a08f27bf280ec1bdcb7d610d5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"644fcf47c6af2067","login":"bc","name":"Mo El Geneidy","avatar_url":"https://avatars-next.observableusercontent.com/664f3ea176a14258bfe84880ac2139da73df4a6a08f27bf280ec1bdcb7d610d5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Submarine Cables","cells":[{"id":0,"value":"md`# Submarine Cables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"*A visual reminder that data packets flow through physical real assets.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"map = {\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 1.6}px`\n });\n\n yield container;\n\n var maxBounds = [\n [18.91619, -171.791110603], // Southwest\n [71.3577635769, -66.96466] // Northeast\n ];\n\n let map = L.map(container);\n\n let Stamen_Toner = L.tileLayer(\n \"https://api.mapbox.com/styles/v1/geneidybc/clsdti0k300ja01r67oz4cva3/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2VuZWlkeWJjIiwiYSI6ImNrMDVsZnViNDA2c2kzY28xOXNvcmtkeW4ifQ.EyQbLWJSFGDcIGhyYOA5uQ\",\n {\n attribution:\n '© Mapbox © OpenStreetMap Improve this map',\n subdomains: \"abcd\",\n minZoom: 0,\n maxZoom: 20,\n ext: \"png\"\n }\n ).addTo(map);\n\n map.fitBounds(maxBounds);\n map.setZoom(5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"html`

Show Zoom Control

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"html`\n

\n \n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"md`---\n\n## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`### D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`### Leaflet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"md`### Html to image`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"html_to_image = require('https://bundle.run/html-to-image@0.1.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"md`### Delay`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"import { delay } from \"@mradamcox/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"margin = ({ top: 40, right: 20, bottom: 20, left: 80 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"mapExportRelay = {\n document.getElementById(\"map-export-button\").onclick = function() {\n let fileName = document.getElementById('map-export-file-name').value;\n let fileExt = fileName.split('.').pop();\n if (fileExt != \"png\") {\n fileName = fileName + \".png\";\n }\n exportMap(fileName, map);\n };\n\n return \"ready\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"function exportMap(fileName, mapEl) {\n html_to_image\n .toPng(mapEl, {\n quality: 1,\n width: mapEl.clientWidth,\n height: mapEl.clientHeight\n })\n .then(function(dataUrl) {\n var link = document.createElement('a');\n link.download = fileName;\n link.href = dataUrl;\n link.click();\n });\n\n return fileName;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"hideControls = {\n await delay(1000);\n if (document.getElementById(\"show-zoom-and-layers\") == null) {\n return \"run this module before you try to hide controls\";\n }\n\n document.getElementById(\"show-zoom-and-layers\").onclick = function() {\n if (!this.checked) {\n Array.from(document.getElementsByClassName(\"leaflet-top\")).forEach(\n function(element, index) {\n element.style.display = \"none\";\n }\n );\n } else {\n Array.from(document.getElementsByClassName(\"leaflet-top\")).forEach(\n function(element, index) {\n element.style.display = \"block\";\n }\n );\n }\n };\n\n return \"ready\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"latlng = [37.7749, -122.4194]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"