30:T40c,function geoEditor({ features, container, render, projection, options } = {}) { features = features || { type: "FeatureCollection", features: [] }; projection = projection || d3.geoMercator(); options = options || { zoom: true }; const dispatch = d3.dispatch("update", "data", "zoomTo"), editor = { features, container, render, projection, options, dispatch }; editor.mapView = () => mapView(editor); editor.buttonView = () => buttonView(editor); editor.propertiesView = () => propertiesView(editor); editor.propertyView = property => propertyView(editor, property); editor.colorPropertyView = () => colorPropertyView(editor); editor.jsonView = () => jsonView(editor); editor.tableView = properties => tableView(editor, properties); editor.selected = () => features.features.filter(d => d.selected); // debounce data => update dispatch.on( "data", debounce(message => { dispatch.call("update", null, message); }, 400) ); return editor; }31:T6ff,function geoPoints(elements, projection) { const data = []; let p0; for (const p of getPoints( elements.filter(d => d.geometry.type === "Point" || d.selected) )) { p.xy = projection(p); if ( p.xy[0] >= 0 && p.xy[0] <= width && p.xy[1] >= 0 && p.xy[1] <= height && (!p.i || !p0 || euclidian(p.xy, p0.xy) > 8 * (1 + !!p.midpoint)) ) { data.push(p); p0 = p; } } return data; function* getPoints(elements) { for (const elt of elements) { const coords = elt.geometry.coordinates; switch (elt.geometry.type) { case "Point": yield Object.assign(coords, { elt }); break; case "MultiPoint": for (const p of coords) yield Object.assign(p, { elt }); break; case "LineString": yield* line(coords, elt); break; case "Polygon": for (const ring of elt.geometry.coordinates) yield* line(ring, elt, true); break; case "MultiLineString": for (const ring of elt.geometry.coordinates) yield* line(ring, elt); break; case "MultiPolygon": for (const polygon of elt.geometry.coordinates) for (const ring of polygon) yield* line(ring, elt, true); break; } } } function* line(coords, elt, closed) { let pt0, i = 0; for (const pt of coords) { if (i) { const midpoint = d3.geoInterpolate(pt0, pt)(.5); yield Object.assign(midpoint, { elt, coords, i, midpoint: true }); } if (!closed || i < coords.length - 1) { yield Object.assign(pt, { elt, coords, i, closed }); pt0 = pt; i++; } } } }32:T4ba,function propertiesView(editor) { const { features, container, render, projection, options, dispatch } = editor; function getTopProperties() { const selected = editor.selected()[0]; return selected ? JSON.stringify(selected.properties, null, 2) : ""; } const form = html`

Properties

`; const el = form.elements[0]; // Object.assign(el, props); el.placeholder = "Select an element in the map"; el.value = getTopProperties(); el.addEventListener("input", listen); dispatch.on("update.properties", message => { if (message !== "properties") el.value = getTopProperties(); }); form.value = features; return form; function listen(event) { const selected = editor.selected()[0]; if (selected) { let message = ""; try { selected.properties = JSON5.parse(el.value); dispatch.call("data", null, "properties"); } catch (e) { if (e instanceof SyntaxError) message = e; } finally { d3.select(form) .select("div") .text(message); } } event.preventDefault(); } }33:T426,function propertyView(editor, property) { const { features, container, render, projection, options, dispatch } = editor; function getTopProperty() { const selected = editor.selected()[0]; return (selected && selected.properties[property]) || ""; } const form = html`${property}: `; const el = form.elements[0]; el.value = getTopProperty(); el.addEventListener("input", listen); form.addEventListener("submit", event => { event.preventDefault(); }); dispatch.on("update." + property, message => { if (message !== property) el.value = getTopProperty(); }); form.value = features; return form; function listen(event) { const selected = editor.selected()[0]; if (selected) { let value = el.value; if (value !== "") { if (String(Number(value)) == value) value = Number(value); selected.properties[property] = value; } else delete selected.properties[property]; dispatch.call("data", null, property); } event.preventDefault(); } }34:T49c,function jsonView({ features, container, render, projection, options, dispatch }) { function getJSON() { const a = JSON.parse(JSON.stringify(features)); a.features.forEach(a => { delete a.selected; }); return geoformat(options.precision || 8)(a); } const form = html`JSON

`; const el = form.elements[0]; // Object.assign(el, props); el.placeholder = "Select an element in the map"; el.value = getJSON(); el.addEventListener("input", listen); dispatch.on("update.json", message => { if (message !== "json") el.value = getJSON(); }); form.value = features; return form; function listen(event) { let message = ""; try { const f = JSON5.parse(el.value); if (f.features) { features.features.splice(0, Infinity, ...f.features); dispatch.call("data", null, "json"); } } catch (e) { if (e instanceof SyntaxError) message = e; } finally { d3.select(form) .select("div") .text(message); } event.preventDefault(); } }35:T794,// inspiration from https://observablehq.com/@tomgp/editable-table function tableView(editor, properties) { const { features, container, render, projection, options, dispatch } = editor; const form = html`

`; const sticky = ' style="position:sticky;top:0;background:white"'; function update() { const theader = `#${properties .map(d => `${d}`) .join("")}`, tbody = features.features .map( (e, i) => `${i}${properties .map(d => `${e.properties[d] || ""}`) .join("")}` ) .join(""); d3.select(form).html( `${theader}${tbody}` ); d3.select(form) .selectAll("[contenteditable]") .on("focus", function() { const tr = d3.event.target.parentElement, rank = +tr.getAttribute("data-rank"), feature = features.features[rank]; features.features.forEach(d => delete d.selected); feature.selected = true; dispatch.call("zoomTo", null, feature); }); } update(); form.addEventListener("input", listen); dispatch.on("update.table", message => { if (message !== "table") update(); }); form.value = features; return form; function listen(event) { const tr = event.target.parentElement, rank = +tr.getAttribute("data-rank"), feature = features.features[rank]; tr.querySelectorAll("td").forEach((td, j) => { const property = properties[j], text = td.textContent || ""; if (text) feature.properties[property] = String(Number(text)) === text ? Number(text) : text; else delete feature.properties[property]; }); dispatch.call("data", null, "table"); event.preventDefault(); } }36:Tf02,function mapView({ features, container, render, projection, options, dispatch }) { // default values if (container === undefined) container = DOM.context2d(width, height).canvas; if (features === undefined) features = { type: "FeatureCollection", features: [] }; if (render === undefined) render = defaultRenderer; const w = parseInt(container.style.width) || container.width, h = (w * container.height) / container.width, elements = features.features, svg = d3.create("svg"); const path = d3.geoPath(projection); const wrapper = html`