// Customized original version of https://observablehq.com/@jashkenas/inputs#worldMapCoordinates // This version allows read=false, if showLatLong: display lat/lon display vs lon/lat // value parameter is entered as [lat,lon] vs [lon,lat] function worldMapCoordinates(config = {}) { const { value = [], heading, showLatLong = true, // default behavior, except lon/lat are flipped to lat/lon read = true, // default behavior title, description, width = 400 } = Array.isArray(config) ? { value: config } : config; const height = Math.round((210 / 400) * width); let [lat, lon] = value; lat = lat != null ? lat : null; lon = lon != null ? lon : null; const formEl = html``; const htmlHeading = html`

${heading}

`; if (heading) formEl.append(htmlHeading); 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(); } } if (read) { 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) => showLatLong ? html`

Latitude: ${ lat ?? "" } Longitude: ${ lon ?? "" }

` : ``, getValue: () => [lat, lon], // simplified logic and return as lat/long form: formEl }); return form; }