// Adapted from https://observablehq.com/@jashkenas/inputs#worldMapCoordinatesDemo function worldMapCoordinates(config = {}) { var n_point; var lonA, lonB, latA, latB; const { value = [], title, description, width = width_small_map } = Array.isArray(config) ? {value: config} : config; const height = Math.round((210 / 400) * width); [lonA, latA] = value[0]; [lonB, latB] = value[1]; lonA = lonA != null ? lonA : null; latA = latA != null ? latA : null; lonB = lonB != null ? lonB : null; latB = latB != null ? latB : 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(point_radius_2); 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 (lonA != null && latA != null) { const pointPath = { type: "MultiPoint", coordinates: [[lonA, latA]] }; context.beginPath(); path.pointRadius(point_radius_2); path(pointPath); context.fillStyle = color_A; context.fill(); } if (lonB != null && latB != null) { const pointPath = { type: "MultiPoint", coordinates: [[lonB, latB]] }; context.beginPath(); path.pointRadius(point_radius_2); path(pointPath); context.fillStyle = color_B; context.fill(); } // We draw the path between 2 points var interpolation = d3.geoInterpolate([lonA,latA],[lonB,latB]); var nb_points = d3.geoDistance([lonA,latA],[lonB,latB])*20; for(let i = 1; i html`

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

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

`, getValue: () => [[lonA != null ? lonA : null, latA != null ? latA : null], [lonB != null ? lonB : null, latB != null ? latB : null]], form: formEl }); return form; }