30:T8c0,function worldMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? {value: config} : config; const height = Math.round((210 / 400) * width); let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "10px 0 3px"; const projection = d3geo .geoNaturalEarth1() .precision(0.1) .fitSize([width, height], { type: "Sphere" }); const path = d3geo.geoPath(projection, context).pointRadius(2.5); formEl.append(canvas); function draw() { context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); context.beginPath(); path(graticule); context.lineWidth = 0.35; context.strokeStyle = `#ddd`; context.stroke(); context.beginPath(); path(land); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(countries); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [[lon, lat]] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX, offsetY]); lon = +coords[0].toFixed(2); lat = +coords[1].toFixed(2); draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${lon != null ? lon.toFixed(2) : ""} Latitude: ${lat != null ? lat.toFixed(2) : ""}

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); return form; }31:T8bb,function usaMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? {value: config} : config; const scale = width / 960; const height = scale * 600; let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "5px 0 20px"; const projection = d3geo .geoAlbersUsa() .scale(1280) .translate([480, 300]); const path = d3geo .geoPath() .context(context) .pointRadius(2.5 / scale); formEl.append(canvas); function draw() { context.clearRect(0, 0, width, height); context.save(); context.scale(scale, scale); context.lineWidth = 0.35 / scale; context.beginPath(); path(nation); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(states); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [projection([lon, lat])] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } context.restore(); } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX / scale, offsetY / scale]); lon = +coords[0].toFixed(2); lat = +coords[1].toFixed(2); draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${lon != null ? lon : ""} Latitude: ${lat != null ? lat : ""}

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); return form; }32:T8c2,function caMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? {value: config} : config; const scale = width / 960; const height = scale * 400; let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "5px 0 20px"; const projection = d3geo .geoAlbers() .scale(1280) .translate([480, 300]); const path = d3geo .geoPath() .context(context) .pointRadius(2.5 / scale); formEl.append(canvas); function draw() { context.clearRect(0, 0, width, height); context.save(); context.scale(scale, scale); context.lineWidth = 0.35 / scale; context.beginPath(); path(ca_background); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(ca_state); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [projection([lon, lat])] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } context.restore(); } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX / scale, offsetY / scale]); lon = +coords[0].toFixed(2); lat = +coords[1].toFixed(2); draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${lon != null ? lon : ""} Latitude: ${lat != null ? lat : ""}

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); return form; }33:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }34:[] 2e:{"title":"Inputs","cells":[{"id":0,"value":"md`# Inputs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"value":"worldMapCoordinatesDemo = md` ---\n## World Map Coordinates\n\n*value: an array pair of \\`[longitude, latitude]\\`, e.g. * \\`[-122.27, 37.87]\\` \n\n~~~js\nimport {worldMapCoordinates} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"viewof worldMap1 = worldMapCoordinates([-122.27, 37.87])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"worldMap1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1967,"value":"usaMapCoordinatesDemo = md` ---\n## U.S.A. Map Coordinates\n\n*value: an array pair of \\`[longitude, latitude]\\`, e.g. * \\`[-122.27, 37.87]\\` \n\n~~~js\nimport {usaMapCoordinates} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1985,"value":"viewof usaMap1 = usaMapCoordinates([-122.27, 37.87])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1986,"value":"usaMap1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"viewof usaMap2 = usaMapCoordinates({\n title: \"A Mini Map\",\n description: \"Defaults to New York City\",\n width: 200,\n value: [-74, 40.71]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"usaMap2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2374,"value":"caMapCoordinatesDemo = md` ---\n## California Map Coordinates\n\n*value: an array pair of \\`[longitude, latitude]\\`, e.g. * \\`[-122.27, 37.87]\\` \n\n~~~js\nimport {caMapCoordinates} from \"@mukhtyar/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2323,"value":"viewof caMap = caMapCoordinates({\n title: \"A Mini Map\",\n description: \"Defaults to Sacramento\",\n width: 300,\n value: [-121.49, 38.58]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2321,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"d3geo = require(\"d3-geo@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1475,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"world = (await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1958,"value":"usa = (await fetch(\"https://cdn.jsdelivr.net/npm/us-atlas@^2.1/us/states-10m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"nation = topojson.feature(usa, usa.objects.nation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2334,"value":"ca_background = topojson.feature(usa, usa.objects.states.geometries[25])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1963,"value":"states = topojson.feature(usa, usa.objects.states)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2318,"value":"ca_state = states.features.find(d => d.properties.name === 'California')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1845,"value":"graticule = d3geo.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1686,"value":"viewof license = {\n const license = md`License: [MIT](https://opensource.org/licenses/MIT)`;\n license.value = \"MIT\";\n return license;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`*Clip art courtesy [ClipArt ETC](https://etc.usf.edu/clipart/), radio buttons and checkboxes courtesy [Amit Sch](https://beta.observablehq.com/@meetamit/multiple-choice-inputs).*`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}