2e:null 2f:["$","title",null,{"children":"Mapa (stableish) | Michael Bricknell | Observable"}] 34:T10df,defaultSettings = () => ({ defaults: { path: { stroke: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-miterlimit": 4, "stroke-opacity": 1, "stroke-width": 0, "stroke-dasharray": null, "stroke-dashoffset": null, fill: "none", "fill-opacity": 1, opacity: 1, filter: null }, point: { stroke: "black", "stroke-opacity": 1, "stroke-width": 0, fill: "none", "fill-opacity": 1, radius: 4 }, style: styles }, width: 1152, height: null, simplify: 0.01, bounds: { bounder: false, countries: null, feature: { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [ [ [0, -90], [0, 90], [180, 90], [180, -90], [0, -90] ] ] } } }, clipping: { clip: false, margin: 0 }, projection: { type: "default", proj: d3.geoMiller(), fit: "size", translate: false, // [this.width / 2, this.height / 2] scale: false, // 5000 center: false, // [] rotate: false, // [0,0,0] tilt: false, // distance: false, clipExtent: false, clipAngle: false, precision: false }, rotation: { value: [0, 0, 0], rotate: false }, basemap: { show: false, coastline: { show: false, style: { fill: "none", stroke: "#dddddd", opacity: 1 } }, background: { show: false, style: { fill: "#ffffff", stroke: "none", opacity: 1 } }, land: { show: true, geometry: countries, key: "GID_0", label: "NAME_0", style: { fill: "#fffff9", stroke: "none", opacity: 1 } }, border: { show: true, geometry: countries, style: { fill: "none", stroke: "#dedede", opacity: 1 } }, ocean: { show: false, geometry: null, style: { fill: "#f2f2f2", stroke: "none", opacity: 1 } }, lake: { show: false, geometry: lakes, style: { fill: "#f2f2f2", stroke: "none", opacity: 1, "stroke-width": 1 } }, river: { show: false, geometry: null, style: { fill: "none", stroke: "blue", opacity: 1 } }, graticule: { show: false, style: { fill: "none", stroke: "gray", opacity: 1 } }, sphere: { show: false, style: { stroke: "#000000", "stroke-width": 1 } } }, graticule: { step: null, //10 show: false, custom: { gc: true, show: true, latitude: [66.5], // Tropic of Cancer, Equator, Arctic Circle longitude: [], latBounds: [-93.5, 14], lonBounds: [50, 83], style: { stroke: "#0a1f35", "stroke-width": 1, opacity: 1, "stroke-dasharray": "none" } } }, layer: { points: { show: false, data: [], dirDefaults: {} }, //[{}]}, points polys: { show: false, data: null }, //polygons polylines tiles: { show: false, mime: "image/webp", quality: 0.5, data: [] }, //[{id: type: delta:}] }, grids: { show: false, data: null }, raster: { show: false, data: [] }, annotations: { show: false, data: [] } /* raster: { show: false, data: [ { show: true, image: link, worldfile: { xPixelSize: 38.2185141426, //(original_image_width / new_image_width) yRotation: 0, xRotation: 0, yPixelSize: -38.2185141426, //(original_image_width / new_image_width) xUpperLeft: 7634817.0239794729, //copy from world file yUpperLeft: 4154180.5039856886 //copy from world file } } ] }*/ }, scalebar: { show: false, topValue: 200, topUnit: "km", bottomValue: 200, bottomUnit: "mi", position: [120, 50] }, overlay: { show: false, items: [] }, graphic: { gradient: null, background: null, width: null, height: null, title: { show: false, text: null } /*subtitle: { show: false, text: null }, note: { show: false, text: null }, logo: { show: false, text: null }, template: null*/ //{} } })35:T5b6,function mapaDownload(mapa, filename = "map") { const btn1 = document.createElement("button"); btn1.textContent = "Download images"; btn1.onclick = () => { const svg = mapa.render; svg.querySelectorAll("image").forEach((img) => { const href = img.getAttribute("href") || img.getAttribute("xlink:href"); if (!href || !href.startsWith("data:")) return; const ext = href.split(";")[0].split("/")[1]; const id = img.getAttribute("id") || "image"; const a = document.createElement("a"); a.href = href; a.download = `${id}.${ext}`; a.click(); }); }; const btn2 = document.createElement("button"); btn2.textContent = "Download SVG"; btn2.onclick = () => { const svg = mapa.render.cloneNode(true); svg.querySelectorAll("image").forEach((img) => { const href = img.getAttribute("href") || img.getAttribute("xlink:href"); if (!href || !href.startsWith("data:")) return; const ext = href.split(";")[0].split("/")[1]; const id = img.getAttribute("id") || "image"; img.setAttribute("href", `${id}.${ext}`); }); const str = new XMLSerializer().serializeToString(svg); const blob = new Blob([str], { type: "image/svg+xml" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `${filename}.svg`; a.click(); }; const div = document.createElement("div"); div.append(btn1, btn2); return div; }36:Tffa0,class Mapa { constructor(props = {}) { const settings = deepmerge(defaultSettings(), props, { arrayMerge: (_, b) => b, customMerge: (key) => { if (["geometry", "image", "worldfile"].includes(key)) return (_, b) => b; } }); if (settings.bounds.coordinates) { settings.bounds.feature = { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: settings.bounds.coordinates } }; } this.defaults = settings.defaults; this.width = settings.width; this.height = settings.height; this.basemap = settings.basemap; this.projection = settings.projection; this.rotation = settings.rotation; this.layer = settings.layer; this.scalebar = settings.scalebar; this.bounds = settings.bounds; this.clipping = settings.clipping; this.graphic = settings.graphic; this.overlay = settings.overlay; this.simplify = settings.simplify; } get render() { const defaults = this.defaults; const applyStyle = (sel, style = {}, kind = "path") => { const d = defaults[kind]; for (const key in d) sel.attr(key, style[key] ?? d[key]); if (style.class) sel.attr("class", style.class); return sel; }; class Layer { constructor( props = { geometry: null, style: null, class: null, group: null, path: null, type: null, scale: null } ) { this.geometry = props.geometry ? props.geometry : null; this.filter = props.filter ? props.filter : { show: null, key: null, value: null }; this.style = props.style ? props.style : { stroke: null, "stroke-dasharray": null, "stroke-dashoffset": null, "stroke-linecap": null, "stroke-linejoin": null, "stroke-miterlimit": null, "stroke-opacity": null, "stroke-width": null, fill: null, radius: null, "fill-opacity": null, opacity: null, type: null }; this.group = props.group ? props.group : null; this.path = props.path; this.type = props.type ? props.type : null; this.scale = props.scale ? props.scale : null; } get add() { const { geometry, style, group, path, type, scale, filter } = this; if (type === "Point") { return applyStyle( group .append("g") .selectAll("circle") .data(geometry) .enter() .append("circle") .attr("cx", (d) => projection(d.geometry.coordinates)[0]) .attr("cy", (d) => projection(d.geometry.coordinates)[1]) .attr("r", style.radius ?? defaults.point.radius) .attr("class", "point"), style, "point" ); } // qtree (scaled circles by count) if (type === "qtree") { return applyStyle( group .append("g") .selectAll("circle") .data(geometry) .enter() .append("circle") .attr("cx", (d) => projection(d.geometry.coordinates)[0]) .attr("cy", (d) => projection(d.geometry.coordinates)[1]) .attr("r", (d) => scale(d.properties.count)) .attr("data-count", (d) => d.properties.count), style, "point" ); } if (geometry.type === "Topology") { let data = topojson.feature( geometry, geometry.objects[Object.keys(geometry.objects)[0]] ).features; if (filter.show) { data = data.filter((d) => d.properties[filter.key] == filter.value); } return applyStyle( group .append("g") .attr("class", style.groupClass ?? "") .selectAll("path") .data(data) .enter() .append("path") .attr("d", path), style, "path" ); } if (geometry.type === "FeatureCollection") { return applyStyle( group.append("path").datum(geometry).attr("d", path), style, "path" ); } return applyStyle( group .append("g") .attr("class", style.groupClass ?? "") .selectAll("path") .data(geometry) .enter() .append("path") .attr("d", path), style, "path" ); } } let uid = Math.random().toString(36).substr(2, 5); let margin = this.clipping.margin; let width = this.width; let height = this.height; let basemap = this.basemap; const sphere = { type: "Sphere" }; const country = this.basemap.land?.geometry ?? null; let projection = this.projection.proj; if (this.projection.type == "proj4") { function degreesToRadians(degrees) { return (degrees * Math.PI) / 180; } function radiansToDegrees(radians) { return (radians * 180) / Math.PI; } let check = this.projection.proj.split(" "); for (let x of ["+x_0=0", "+y_0=0"]) { if (check.indexOf(x) == -1) { check.push(x); } } projection = check.join(" "); let projTarget = proj4(projection); let project4 = function (lambda, phi) { return projTarget.forward([lambda, phi].map(radiansToDegrees)); }; project4.invert = function (x, y) { return projTarget.inverse([x, y]).map(degreesToRadians); }; projection = d3 .geoProjection(project4) .fitExtent( [ [0, 0], [width, height] ], this.bounds.feature ) .preclip(d3.geoClipAntimeridian); } if (this.projection.type == "raw") { projection = this.projection.proj; } if (this.projection.type == "clip") { projection = this.projection.proj.clipAngle(180); } if (this.projection.type == "custom") { projection = this.projection.proj .translate(this.projection.translate) .scale(this.projection.scale) .center(this.projection.center) .rotate(this.projection.rotate) .tilt(this.projection.tilt) .distance(this.projection.distance) .clipAngle(this.projection.clipAngle) .precision(this.projection.precision); } if (height == null) { const [[x0, y0], [x1, y1]] = d3 .geoPath(projection.fitWidth(width, sphere)) .bounds(sphere); const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy); projection.scale((projection.scale() * (l - 1)) / l).precision(0.2); height = dy; } if (this.projection.fit == "none") { } if (!this.bounds.bounder && this.projection.type != "atlas") { if (this.projection.fit == "iso2") { if (this.bounds.countries.length > 0) { let list = this.bounds.countries; let filteredCountries = countries.filter(function (d, i) { if (list.indexOf(d.properties.ISO_A2) > -1) { return d; } }); projection.fitSize( [width, height], turf.featureCollection(filteredCountries) ); } } if (this.projection.fit == "iso3") { if (this.bounds.countries.length > 0) { let list = this.bounds.countries; let filteredCountries = countries.filter(function (d, i) { if (list.indexOf(d.properties.ISO_A3) > -1) { return d; } }); projection.fitSize( [width, height], turf.featureCollection(filteredCountries) ); } } if (this.projection.fit == "size") { projection.fitSize([width, height], sphere); } if (this.projection.fit == "extent") { projection.fitExtent( [ [0, 0], [width, height] ], sphere ); } } if (this.bounds.bounder && this.projection.type != "atlas") { projection.fitSize([width, height], this.bounds.feature); } if (this.clipping.clip) { function viewport() { let n = 15; let p = -1 * margin; return { type: "Polygon", coordinates: [ [ ...Array.from({ length: n }, (_, t) => [ p + ((width - p * 2) * t) / n, p ]), ...Array.from({ length: n }, (_, t) => [ width - p, ((height - p * 2) * t) / n + p ]), ...Array.from({ length: n }, (_, t) => [ p + ((width - p * 2) * (n - t)) / n, height - p ]), ...Array.from({ length: n }, (_, t) => [ p, ((height - p * 2) * (n - t)) / n + p ]), [p, p] ].map((p) => projection.invert(p)) ] }; } let v = { type: "Polygon", coordinates: [ viewport().coordinates[0].map(d3.geoRotation(projection.rotate())) ] }; let clipPolygon = d3.geoClipPolygon(v); projection.preclip(clipPolygon); } let path = d3.geoPath().projection(projection); const [nw, ne, se, sw] = [ projection.invert([-margin, -margin]), projection.invert([width + margin, -margin]), projection.invert([width + margin, height + margin]), projection.invert([-margin, height + margin]) ]; const bbox = [ Math.min(nw[0], sw[0]), Math.min(sw[1], se[1]), Math.max(ne[0], se[0]), Math.max(nw[1], ne[1]) ]; let rotation = this.rotation.value; if (this.rotation.value instanceof Array) { rotation = this.rotation.value; } else { rotation = [this.rotation.value, 0, 0]; } if (this.rotation.rotate) { projection.rotate(rotation); } let layers = this.layers; const graphic = d3 .select(DOM.svg(width, height)) .attr("id", "graphic") .attr("stroke-linejoin", "round"); if (this.graphic.background) { graphic .insert("rect", ":first-child") .attr("width", width) .attr("height", height) .attr("fill", this.graphic.background); } graphic.on("click", function (event) { const [x, y] = d3.mouse(this); const [lng, lat] = projection.invert([x, y]); console.log(`[${lat.toFixed(2)}, ${lng.toFixed(2)}]`); }); let graster = graphic.append("g").attr("id", "tilelayer"); //bottom let gbasemap = graphic.append("g").attr("id", "basemap"); let glayer = graphic.append("g").attr("id", "layers"); let gscalebar = graphic.append("g").attr("id", "scalebar"); if (this.graphic.clipFeature) { const clipId = `graphic-clip-${uid}`; defs .append("clipPath") .attr("id", clipId) .append("path") .attr("d", path(this.graphic.clipFeature)); graphic.attr("clip-path", `url(#${clipId})`); } const gradientItems = Array.isArray(this.graphic.gradient) ? this.graphic.gradient : this.graphic.gradient ? [this.graphic.gradient] : []; let ggradient = graphic .append("g") .attr("id", "gradient") .style("display", gradientItems.length ? null : "none"); let gannotation = graphic.append("g").attr("id", "annotations"); //top let ggrid = graphic.append("g").attr("id", "grid"); const defs = graphic.select("defs").empty() ? graphic.append("defs") : graphic.select("defs"); gradientItems.forEach((g) => { const rect = ggradient .append("rect") .attr("class", "gradient") .attr("width", width) .attr("height", height) .attr("fill", g.fill ?? "none") .style("fill-opacity", g.opacity ?? 1) .style("mix-blend-mode", g.blendMode ?? "normal") .style("pointer-events", "none"); if (g.clipFeature) { const clipId = `gradient-clip-${uid}-${Math.random() .toString(36) .substr(2, 4)}`; const clipPath = defs.append("clipPath").attr("id", clipId); if (g.invert) { clipPath .append("path") .attr("d", `M0,0 H${width} V${height} H0 Z ${path(g.clipFeature)}`) .attr("clip-rule", "evenodd"); } else { clipPath.append("path").attr("d", path(g.clipFeature)); } rect.attr("clip-path", `url(#${clipId})`); } }); let ggraphic = graphic .append("g") .attr("id", "overlays") .style("pointer-events", "none"); graster.append("g").attr("id", "raster"); let scalebar = this.scalebar; if (scalebar.show) { const mapUnits = { km: d3.geoScaleKilometers, mi: d3.geoScaleMiles, ft: d3.geoScaleFeet, m: d3.geoScaleMeters, kilometers: d3.geoScaleKilometers, miles: d3.geoScaleMiles, feet: d3.geoScaleFeet, meters: d3.geoScaleMeters }; let x, y; let anchor; // Declare anchor here if (scalebar.position && !scalebar.offset) { x = width - scalebar.position[0]; y = height - scalebar.position[1]; anchor = "bottom-right"; } else { const offsetX = scalebar.offset ? scalebar.offset[0] : 20; const offsetY = scalebar.offset ? scalebar.offset[1] : 20; anchor = scalebar.anchor || "bottom-right"; // Set anchor here switch (anchor) { case "bottom-right": x = width - offsetX; y = height - offsetY; break; case "bottom-left": x = offsetX; y = height - offsetY; break; case "top-right": x = width - offsetX; y = offsetY; break; case "top-left": x = offsetX; y = offsetY; break; default: x = width - offsetX; y = height - offsetY; } } const mapScale = gscalebar .append("g") .attr("transform", `translate(${x}, ${y})`); var stop = 0; var sleft = 0; const scaleBarTop = d3 .geoScaleBar() .projection(projection) .size([width, height]) .orient(d3.geoScaleTop) .units(mapUnits[scalebar.topUnit]) .distance(scalebar.topValue) .left(sleft) .top(stop) .label(null) .tickPadding(3) .tickFormat((d, i, e) => i === e.length - 1 ? `${d} ${scalebar.topUnit}` : d ) .tickValues([0, scalebar.topValue]); const scaleBarBottom = d3 .geoScaleBar() .projection(projection) .size([width, height]) .units(mapUnits[scalebar.bottomUnit]) .orient(d3.geoScaleBottom) .distance(scalebar.bottomValue) .left(sleft) .top(stop) .label(null) .tickPadding(3) .tickFormat((d, i, e) => i === e.length - 1 ? `${d} ${scalebar.bottomUnit}` : d ) .tickValues([0, scalebar.bottomValue]); const myscaleTop = mapScale .append("g") .attr("id", "scalebart") .attr("transform", "translate(0, -5)"); const myscaleBottom = mapScale .append("g") .attr("id", "scalebarb") .attr("transform", "translate(0, 5)"); myscaleTop.call(scaleBarTop); myscaleBottom.call(scaleBarBottom); myscaleTop.selectAll("rect").remove(); myscaleBottom.selectAll("rect").remove(); const strokeColor = scalebar.style?.stroke || "#4B535D"; const fillColor = scalebar.style?.fill || "#4B535D"; const fontSize = scalebar.style?.fontSize || "12px"; myscaleTop.selectAll("path, line").attr("stroke", strokeColor); myscaleBottom.selectAll("path, line").attr("stroke", strokeColor); myscaleTop .selectAll(".tick") .select("text") .attr("text-anchor", "start") .attr("dx", function (d, i) { if (d < 1) { return -3.5; } else { return -4 * +d.toString().length; } }) .attr("font-size", fontSize) .attr("fill", fillColor); myscaleBottom .selectAll(".tick") .select("text") .attr("text-anchor", "start") .attr("dx", function (d, i) { if (d < 1) { return -3.5; } else { return -4 * +d.toString().length; } }) .attr("font-size", 14) .attr("fill", fillColor); if (anchor.includes("right")) { setTimeout(() => { const bbox = mapScale.node().getBBox(); const adjustedX = x - bbox.width; mapScale.attr("transform", `translate(${adjustedX}, ${y})`); }, 0); } } if (this.basemap.show) { if (basemap.ocean.show) { new Layer({ geometry: basemap.ocean.geometry ?? ocean, group: gbasemap.append("g").attr("id", "ocean"), style: basemap.ocean.style, path: path }).add; } if (basemap.land.show) { new Layer({ geometry: basemap.land.geometry ?? countries, group: gbasemap.append("g").attr("id", "land"), style: basemap.land.style, path: path }).add.on("click", function () { let tar = d3.select(this).datum(); console.log( tar?.properties?.NAME ?? tar?.properties?.name ?? JSON.stringify(tar?.properties) ); }); } if (basemap.river.show) { new Layer({ geometry: basemap.river.geometry ?? rivers, group: gbasemap.append("g").attr("id", "river"), style: basemap.river.style, path: path }).add; } if (basemap.border.show) { new Layer({ geometry: basemap.border.geometry ?? countries, group: gbasemap.append("g").attr("id", "border"), style: basemap.border.style, path: path }).add; } if (basemap.coastline.show) { new Layer({ geometry: basemap.coastline.geometry ?? coastlines, group: gbasemap.append("g").attr("id", "coastline"), style: basemap.coastline.style, path: path }).add; } if (basemap.lake.show) { new Layer({ geometry: basemap.lake.geometry ?? lakes, group: gbasemap.append("g").attr("id", "lakes"), style: basemap.lake.style, path: path }).add; } } if (this.layer.tiles.show) { let filter = null; let url = null; let format = null; let tiles = this.layer.tiles.data; const tileMime = this.layer.tiles.mime ?? "image/webp"; const tileQuality = this.layer.tiles.quality ?? 0.5; for (let t in tiles) { if (tiles[t].show) { let raster = graster .append("g") .attr("id", "tiles-" + uid + "-" + tiles[t].id) .style("mix-blend-mode", tiles[t].blendMode ?? "normal"); if (typeof tiles[t].filter !== undefined) { filter = tiles[t].filter; } url = tiles[t].url ? tiles[t].url : null; format = tiles[t].format ? tiles[t].format : null; let zoom = tiles[t].zoom ? tiles[t].zoom : null; let tileset = getTiles(tiles[t].type, zoom, filter); let slippy = geoTile(null, tiles[t]) .size([width, height]) .tileSet(tileset); if (typeof tiles[t].delta == "number") { slippy = geoTile(tiles[t].delta, tiles[t]) .size([width, height]) .tileSet(tileset); } if (tiles[t].colorRamp) slippy.colorRamp(tiles[t].colorRamp); slippy.projection(projection); raster.call(slippy.tile); } } //all the tile credit goes to Andrew Reid, 2018 function getTiles(type, zoom, filter) { let tileset = ""; if (type == "url") { tileset = { type: "tileset", attribution: "", source: function (d) { return url + "/" + d.z + "/" + d.x + "/" + d.y + "." + format; } }; } if (type.split("-")[0] == "custom") { let dir = type.split("-"); dir = dir.join("/"); tileset = { type: "tileset", attribution: "", source: function (d) { if (zoom) { d.z = zoom; } else { d.z = d.z; } return ( "https://raw.githubusercontent.com/mbrickmaps/" + dir.replace("custom", "") + "/" + d.z + "/" + d.x + "/" + ((1 << d.z) - d.y - 1) + ".png" ); } }; } if (type == "debug") { tileset = { source: function (d) { return `https://dummyimage.com/256x256/a8a8a8/0011ff.png&text=${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}`; } }; } if (type == "pmtiles") { const p = new PMTiles(url); tileset = { type: "tileset", attribution: "", source: async function (d) { const tile = await p.getZxy(d.z, d.x, d.y); if (!tile) return null; const blob = new Blob([tile.data], { type: "image/webp" }); return URL.createObjectURL(blob); } }; } return tileset; } function geoTile(delta, tileConfig) { const tau = Math.PI * 2; var lim = 85.05113; var tileSize = 256; var w = width; var h = height; var pk = w / tau; var pc = [0, 0]; var pr = 0; var tk = 2; var tx = w / 2; var ty = h / 2; var p = d3.geoMercator().scale(pk).center(pc); var z0 = 0; var z1 = 15; var extent = function () { return { left: -179.99999, top: lim, right: 179.9999, bottom: -lim }; }; var wrap = true; var tileWidth = 256; var tileHeight = 256; var xyz = true; var source = function (d) { return ( "http://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png" ); }; var a = "Tiles © OpenStreetMap contributors"; geoTile.xyz = function (_) { return arguments.length ? ((xyz = _), geoTile) : xyz; }; function geoTile(_) { return p(_); } geoTile.width = function (_) { return arguments.length ? ((w = _), geoTile) : w; }; geoTile.height = function (_) { return arguments.length ? ((h = _), geoTile) : h; }; geoTile.size = function (_) { if (arguments.length) { _ instanceof d3.selection ? ((w = _.attr("width")), (h = _.attr("height")), (tx = w / 2), (ty = h / 2)) : ((w = _[0]), (h = _[1])); return geoTile; } else return [w, h]; }; geoTile.source = function (_) { return arguments.length ? ((source = _), geoTile) : source; }; geoTile.projection = function (_) { return arguments.length ? ((p = _), (pk = _.scale()), (pc = _.center()), geoTile) : p; }; geoTile.attribution = function (_) { return arguments.length ? ((a = _), geoTile) : a; }; geoTile.wrap = function (_) { return arguments.length ? ((wrap = _), geoTile) : wrap; }; geoTile.tileWidth = function (_) {}; geoTile.tileHeight = function (_) {}; var colorRamp = null; geoTile.colorRamp = function (_) { if (!arguments.length) return colorRamp; if (typeof _ === "function") { colorRamp = _; return geoTile; } const toRGB = (interp, f) => { const c = d3.color(interp(Math.max(0, Math.min(1, f)))); return [c.r, c.g, c.b]; }; if (Array.isArray(_[0])) { const [bathyColors, topoColors, opts = {}] = _; const seaFloor = opts.min ?? -8000; const split = opts.split ?? 0; // where blue→land happens const peak = opts.max ?? 4000; const b = d3.interpolateRgbBasis(bathyColors); const t = d3.interpolateRgbBasis(topoColors); colorRamp = (e) => e <= split ? toRGB(b, (e - seaFloor) / (split - seaFloor)) : toRGB(t, (e - split) / (peak - split)); } else { const r = d3.interpolateRgbBasis(_); colorRamp = (e) => toRGB(r, e / 4000); } return geoTile; }; geoTile.invert = function (_) { return p.invert(_); }; geoTile.center = function (_) { var rotate = d3.geoRotation(p.rotate()); if (arguments.length) { pc = rotate(_); p.center(pc); return geoTile; } else { return rotate.invert(pc); } }; geoTile.scale = function (_) { return arguments.length ? ((pk = _), p.scale(pk), geoTile) : pk; }; geoTile.rotate = function (_) { return arguments.length ? ((pr = _), p.rotate([pr, 0]), geoTile) : pr; }; geoTile.fit = function (_) { return arguments.length ? (p.fitSize([w, h], _), (tx = p.translate()[0]), (ty = p.translate()[1]), (pk = p.scale()), geoTile) : "n/a"; }; geoTile.fitMargin = function (m, f) { return arguments.length > 1 ? (p.fitExtent( [ [m, m], [w - m, h - m] ], f ), (tx = p.translate()[0]), (ty = p.translate()[1]), (pk = p.scale()), geoTile) : "n/a"; }; geoTile.zoomScale = function (_) { return arguments.length ? ((tk = _), p.scale(pk * tk), geoTile) : tk; }; geoTile.zoomTranslate = function (_) { return arguments.length ? ((tx = _[0]), (ty = _[1]), p.translate([tx, ty]), geoTile) : [tx, ty]; }; geoTile.zoomIdentity = function () { return d3.zoomIdentity.translate(tx, ty).scale(tk).translate(0, 0); }; geoTile.zoomTransform = function (t) { return ( (tx = t.x), (ty = t.y), (tk = t.k), p.translate([tx, ty]), p.scale(pk * tk), geoTile ); }; geoTile.tileDepth = function () { var a = [w / 2 - 1, h / 2]; var b = [w / 2 + 1, h / 2]; var dx = d3.geoDistance(p.invert(a), p.invert(b)); var scale = ((20 / dx) * tk * pk) / 200; var z = Math.max(Math.log(scale) / Math.LN2 - 8, 2); z = Math.min(z, 15) | 0; var maxTiles = (w * h) / 256 / 128; while (d3quadTiles(p, z).length > maxTiles) { z--; } if (delta) { z = z + delta; } return z; }; geoTile.zoomTranslateExtent = function (_) { var e = extent(); if (arguments.length) { e.left = _[0][0]; e.top = _[0][1]; e.right = _[1][0]; e.bottom = _[1][1]; return geoTile; } else { var x0 = p([e.left - pr, e.top])[0] - tx; var y0 = p([e.left - pr, e.top])[1] - ty; var x1 = p([e.right - pr, e.bottom])[0] - tx; var y1 = p([e.right - pr, e.bottom])[1] - ty; return [ [x0, y0], [x1, y1] ]; } }; geoTile.zoomTranslateConstrain = function () { var e = extent(); e.left = p.invert([0, 0])[0]; e.top = p.invert([0, 0])[1]; e.right = p.invert([w, h])[0]; e.bottom = p.invert([w, h])[1]; var x0 = p([e.left - pr, e.top])[0] - tx; var y0 = p([e.left - pr, e.top])[1] - ty; var x1 = p([e.right - pr, e.bottom])[0] - tx; var y1 = p([e.right - pr, e.bottom])[1] - ty; return [ [x0, y0], [x1, y1] ]; }; geoTile.tiles = function () { var z = geoTile.tileDepth(); var set = d3quadTiles(p, Math.max(z0, Math.min(z, z1))); return set; }; geoTile.tile = function (g) { const type = g.attr("id").split("-")[2]; const path = d3.geoPath(p); const tileList = geoTile.tiles(); const decoded = []; let lo = Infinity, hi = -Infinity; let pending = tileList.length; tileList.forEach((d) => { const img = new Image(); img.crossOrigin = true; const loc = { x: d.key[0], y: d.key[1], z: d.key[2] }; const result = source(loc); const handle = (url) => { if (!url) { if (--pending === 0) paintAll(); return; } img.onload = () => { const c = d3 .create("canvas") .attr("width", tileWidth) .attr("height", tileHeight); const ctx = c.node().getContext("2d"); ctx.drawImage(img, 0, 0, tileWidth, tileHeight); const data = ctx.getImageData(0, 0, tileWidth, tileHeight).data; decoded.push({ d, data }); if (--pending === 0) paintAll(); }; img.onerror = () => { if (--pending === 0) paintAll(); }; img.src = url; }; result instanceof Promise ? result.then(handle) : handle(result); }); function paintAll() { let lo = Infinity, hi = -Infinity; decoded.forEach(({ data }) => { for (let s = 0; s < data.length; s += 4) { const e = data[s] * 256 + data[s + 1] + data[s + 2] / 256 - 32768; if (e <= -32768) continue; if (e < lo) lo = e; if (e > hi) hi = e; } }); window._lo = lo; window._hi = hi; console.log("viewport elev:", lo.toFixed(0), "to", hi.toFixed(0)); const tile = g .selectAll("image.tile") .data(decoded, (x) => x.d.key.join("/")); const enter = tile.enter().append("image").attr("class", "tile"); enter.each(function ({ d, data }) { const that = this; const k = d.key; const tilesAcross = 1 << k[2]; const webMercator = d3 .geoMercator() .scale(tilesAcross / Math.PI / 2) .translate([0, 0]) .center([0, 0]); const b = path.bounds(d), x0 = b[0][0] | 0, y0 = b[0][1] | 0, x1 = (b[1][0] + 1) | 0, y1 = (b[1][1] + 1) | 0; const λ0 = (k[0] / tilesAcross) * 360 - 180, λ1 = ((k[0] + 1) / tilesAcross) * 360 - 180, φ1 = webMercator.invert([0, k[1] - tilesAcross / 2])[1], φ0 = webMercator.invert([0, k[1] + 1 - tilesAcross / 2])[1]; const newCanvas = d3.create("canvas").node(); newCanvas.width = x1 - x0; newCanvas.height = y1 - y0; const newContext = newCanvas.getContext("2d"); if (newCanvas.width > 0 && newCanvas.height > 0) { const target = newContext.createImageData( newCanvas.width, newCanvas.height ); const td = target.data; for (let y = y0, i = -1; y < y1; ++y) { for (let x = x0; x < x1; ++x) { const pt = p.invert([x, y]), λ = pt[0], φ = pt[1]; if (λ > λ1 || λ < λ0 || φ > φ1 || φ < φ0) { i += 4; td[i] = 0; continue; } const top = ((((tilesAcross + webMercator([0, φ])[1]) * tileHeight) | 0) % 256 | 0) * tileWidth; const q = (((((λ - λ0) / (λ1 - λ0)) * tileWidth) | 0) + top) * 4; const r = data[q], gg = data[q + 1], bb = data[q + 2]; if (colorRamp) { const elev = r * 256 + gg + bb / 256 - 32768; if (elev > -32768) { if (elev < window._lo) window._lo = elev; if (elev > window._hi) window._hi = elev; } const [cr, cg, cb] = colorRamp(elev); td[++i] = cr; td[++i] = cg; td[++i] = cb; td[++i] = colorRamp ? (elev <= -32768 ? 0 : 255) : 255; } else { td[++i] = r; td[++i] = gg; td[++i] = bb; td[++i] = r < 2 && gg < 2 && bb < 2 ? 0 : 255; } } } newContext.clearRect(0, 0, newCanvas.width, newCanvas.height); newContext.putImageData(target, 0, 0); } d3.select(that) .attr("xlink:href", newCanvas.toDataURL(tileMime, tileQuality)) .attr("x", x0) .attr("y", y0) .attr("width", Math.ceil(newCanvas.width) + 1) .attr("height", Math.ceil(newCanvas.height) + 1); }); } }; geoTile.tileSet = function (_) { if (arguments.length) { a = _.attribution ? _.attribution : "Unknown"; source = _.source ? _.source : (console.log("no source provided, using osm"), (a = "Tiles © OpenStreetMap contributors"), function (d) { return ( "http://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png" ); }); lim = _.limit ? _.limit : 85.05113; tileSize = _.tileSize ? _.tileSize : 256; z0 = _.minDepth ? _.minDepth : 1; z1 = _.maxDepth ? _.maxDepth : 20; wrap = _.wrap ? _.wrap : false; xyz = _.xyz ? _.xyz : true; } return geoTile; }; return geoTile; } function d3quadTiles(projection, zoom) { var tiles = [], width = 1 << (zoom = Math.max(0, zoom)), step = Math.max(0.2, Math.min(1, zoom * 0.01)), invisible, precision = projection.precision(), stream = projection.precision(960).stream({ point: function () { invisible = false; }, lineStart: noop, lineEnd: noop, polygonStart: noop, polygonEnd: noop }); visit(-180, -180, 180, 180); projection.precision(precision); return tiles; function visit(x1, y1, x2, y2) { var w = x2 - x1, m1 = mercatorφ(y1), m2 = mercatorφ(y2), δ = step * w; invisible = true; stream.polygonStart(), stream.lineStart(); for (var x = x1; x < x2 + δ / 2 && invisible; x += δ) stream.point(x, m1); for (var y = m1; (y += δ) < m2 && invisible; ) stream.point(x2, y); for (var x = x2; x > x1 - δ / 2 && invisible; x -= δ) stream.point(x, m2); for (var y = m2; (y -= δ) > m1 && invisible; ) stream.point(x1, y); if (invisible) stream.point(x1, m1); stream.lineEnd(), stream.polygonEnd(); if (w <= 360 / width) { if (!invisible) { tiles.push({ type: "Polygon", coordinates: [ d3 .range(x1, x2 + δ / 2, δ) .map(function (x) { return [x, y1]; }) .concat([[x2, 0.5 * (y1 + y2)]]) .concat( d3.range(x2, x1 - δ / 2, -δ).map(function (x) { return [x, y2]; }) ) .concat([[x1, 0.5 * (y1 + y2)]]) .concat([[x1, y1]]) .map(function (d) { return [d[0], mercatorφ(d[1])]; }) ], key: [ (((180 + x1) / 360) * width) | 0, (((180 + y1) / 360) * width) | 0, zoom ], centroid: [0.5 * (x1 + x2), 0.5 * (m1 + m2)] }); } } else if (!invisible) { var x = 0.5 * (x1 + x2), y = 0.5 * (y1 + y2); visit(x1, y1, x, y); visit(x, y1, x2, y); visit(x1, y, x, y2); visit(x, y, x2, y2); } } } function mercatorφ(y) { return (Math.atan(Math.exp((-y * Math.PI) / 180)) * 360) / Math.PI - 90; } function noop() {} } if (this.layer.raster && this.layer.raster.show) { for (let r of this.layer.raster.data) { if (!r.show) continue; console.log("raster format:", r.format); const mime = r.format ?? "image/webp"; const quality = r.quality ?? 0.8; const wf = r.worldfile; const img = r.image; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); const src = document.createElement("canvas"); src.width = img.naturalWidth; src.height = img.naturalHeight; const sctx = src.getContext("2d"); sctx.drawImage(img, 0, 0); const sourceData = sctx.getImageData( 0, 0, img.naturalWidth, img.naturalHeight ).data; const target = ctx.createImageData(width, height); const td = target.data; const isGeographic = Math.abs(wf.xPixelSize) < 1; for (let y = 0, i = -1; y < height; y++) { for (let x = 0; x < width; x++) { const pt = projection.invert([x, y]); if (!pt || isNaN(pt[0]) || isNaN(pt[1])) { i += 4; continue; } const [lon, lat] = pt; const check = projection([lon, lat]); if ( !check || Math.abs(check[0] - x) > 1 || Math.abs(check[1] - y) > 1 ) { i += 4; continue; } const sx = isGeographic ? Math.round( (lon - (wf.xUpperLeft + wf.xPixelSize / 2)) / wf.xPixelSize ) : Math.round( ((lon * 20037508.34) / 180 - (wf.xUpperLeft + wf.xPixelSize / 2)) / wf.xPixelSize ); const sy = isGeographic ? Math.round( (lat - (wf.yUpperLeft + wf.yPixelSize / 2)) / wf.yPixelSize ) : Math.round( (((Math.log(Math.tan(((90 + lat) * Math.PI) / 360)) / (Math.PI / 180)) * 20037508.34) / 180 - (wf.yUpperLeft + wf.yPixelSize / 2)) / wf.yPixelSize ); if (x === Math.floor(width / 2) && y === Math.floor(height / 2)) { console.log( "sy:", sy, "sx:", sx, "img h:", img.naturalHeight, "img w:", img.naturalWidth ); } if ( sx < 0 || sx >= img.naturalWidth || sy < 0 || sy >= img.naturalHeight ) { i += 4; continue; } const q = (sy * img.naturalWidth + sx) * 4; td[++i] = sourceData[q]; td[++i] = sourceData[q + 1]; td[++i] = sourceData[q + 2]; td[++i] = sourceData[q + 3]; } } ctx.putImageData(target, 0, 0); glayer .append("image") .attr("id", r.id || "raster") .attr("href", canvas.toDataURL(mime, quality)) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("opacity", r.opacity || 1) .attr("mask", r.mask ? `url(#${r.mask})` : null) .style("mix-blend-mode", r.blendMode ?? "normal"); } } if (this.layer.polys.show) { const margin = this.clipping.margin || 0; const [minLng, minLat, maxLng, maxLat] = this.bounds.feature.geometry.coordinates[0].reduce( (acc, [lng, lat]) => [ Math.min(acc[0], lng), Math.min(acc[1], lat), Math.max(acc[2], lng), Math.max(acc[3], lat) ], [Infinity, Infinity, -Infinity, -Infinity] ); const degPerPx = (maxLng - minLng) / this.width; const marginDeg = margin * degPerPx; const buffer = 4; // degrees const bbox = [ minLng - buffer, minLat - buffer, maxLng + buffer, maxLat + buffer ]; for (let l in this.layer.polys.data) { if (this.layer.polys.data[l].show === false) continue; let geometry = this.layer.polys.data[l].geometry; if (!geometry || (Array.isArray(geometry) && geometry.length === 0)) continue; const tolerance = this.layer.polys.data[l].simplify ?? this.simplify; if (tolerance && Array.isArray(geometry)) { const clean = geometry.filter( (f) => f && f.geometry && f.geometry.type ); geometry = turf.simplify(turf.featureCollection(clean), { tolerance, highQuality: false }).features; } new Layer({ geometry, group: glayer, style: this.layer.polys.data[l].style, type: this.layer.polys.data[l].style.type ?? "null", path: path, filter: this.layer.polys.data[l].filter ?? { show: false } }).add; } } function addGrid(grids, units, data) { if (grids.type == "graticule") { addGraticule(grids); } } function addGraticule(grids) { const graticule = d3 .geoGraticule() .step([grids.step[0] || 10, grids.step[1] || 10]); ggrid .append("path") .datum(graticule) .attr("d", path) .attr("fill", "none") .attr("stroke", grids.style?.stroke || "#ccc") .attr("stroke-width", grids.style?.["stroke-width"] || 0.5) .attr("opacity", grids.style?.opacity || 1); } if (this.layer.points.show) { if (this.layer.points.data.length > 0) { let groups = new Set( this.layer.points.data.map((d) => d.group ?? d.class ?? "default") ); createAnnotationGroups(groups); console.log([...groups], gannotation.node().innerHTML); addPoints(this.layer.points.data, { dirDefaults: this.layer.points.dirDefaults }); } } if (basemap.sphere.show) { const globeRect = { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90] ] ] } }; const s = this.basemap.background.style; ggraphic .append("g") .attr("id", "globe") .selectAll("path") .data([globeRect]) .join("path") .attr("stroke", s.stroke || "none") .attr("fill", s.fill || "none") .attr("opacity", s.opacity || "1") .attr("d", path); } function createAnnotationGroups(groups) { for (let g of groups) { gannotation.append("g").attr("id", "group-" + uid + "-" + g); } } function addPoints(data, options = {}) { if (data[0].name === "") return; const dirDefaults = { N: { halign: "middle", valign: "bottom" }, NE: { halign: "start", valign: "bottom" }, E: { halign: "start", valign: "mid" }, SE: { halign: "start", valign: "top" }, S: { halign: "middle", valign: "top" }, SW: { halign: "end", valign: "top" }, W: { halign: "end", valign: "mid" }, NW: { halign: "end", valign: "bottom" }, ...options.dirDefaults }; const symbolMap = { circle: null, square: d3.symbolSquare, triangle: d3.symbolTriangle, cross: d3.symbolCross, diamond: d3.symbolDiamond, star: d3.symbolStar, wye: d3.symbolWye }; const defaultSymbol = { shape: "circle", size: 5, fill: "#412c26", stroke: "none", strokeWidth: 0, opacity: 1 }; const defaultLabel = { dir: "E", offset: 6, dx: 0, dy: 0, unit: 1, valign: "baseline", haloWidth: 2, haloColor: "white", labelColor: "black", fontSize: null }; const anchorMap = { start: "start", middle: "middle", end: "end" }; function getFontMetrics(text, fontSize) { const ctx = document.createElement("canvas").getContext("2d"); ctx.font = `${fontSize}px sans-serif`; const m = ctx.measureText(text); return { ascent: m.actualBoundingBoxAscent, descent: m.actualBoundingBoxDescent, width: m.width }; } const filter = defs .append("filter") .attr("id", `halo-${uid}`) .attr("x", "-50%") .attr("y", "-50%") .attr("width", "200%") .attr("height", "200%"); filter .append("feGaussianBlur") .attr("stdDeviation", 1) .attr("result", "blur"); const merge = filter.append("feMerge"); merge.append("feMergeNode").attr("in", "blur"); merge.append("feMergeNode").attr("in", "blur"); for (let z in data) { const d = data[z]; if (d.x && d.y) { d.lng = d.x; d.lat = d.y; } if (d.latlng) { [d.lat, d.lng] = d.latlng.split(",").map((s) => +s.trim()); } const type = d.type?.trim(); const groupText = gannotation.select( "#group-" + uid + "-" + (d.group ?? d.class ?? "default") ); const [px, py] = projection([d.lng, d.lat]); const pointGroup = groupText .append("g") .attr("class", "point-group") .attr("transform", `translate(${px},${py})`); const sym = { ...defaultSymbol, ...d.symbol, shape: d.shape || d.symbol?.shape || defaultSymbol.shape, size: +(d.size || d.symbol?.size || defaultSymbol.size), fill: d.color || d.symbol?.fill || defaultSymbol.fill, stroke: d.stroke || d.symbol?.stroke || defaultSymbol.stroke, strokeWidth: d["stroke-width"] || d.symbol?.strokeWidth || defaultSymbol.strokeWidth, opacity: d.opacity || d.symbol?.opacity || defaultSymbol.opacity }; sym.class = d.class || d.symbol?.class || null; // applies to both by default sym.symbolClass = d.symbolClass || sym.class; // overrides symbol only sym.labelClass = d.labelClass || sym.class; // overrides label only const rawDir = d.dir?.split("-")[0] || d.label?.dir || defaultLabel.dir; const lbl = { ...defaultLabel, ...dirDefaults[rawDir], ...d.label, dir: rawDir, halign: d.label?.halign ?? dirDefaults[rawDir]?.halign ?? "start", valign: d.label?.valign ?? dirDefaults[rawDir]?.valign ?? "baseline", fontSize: d.fontSize ?? d.label?.fontSize ?? dirDefaults[rawDir]?.fontSize ?? 12, labelColor: d.color ?? d.label?.labelColor ?? dirDefaults[rawDir]?.labelColor ?? defaultLabel.labelColor, haloWidth: d.label?.haloWidth ?? dirDefaults[rawDir]?.haloWidth ?? defaultLabel.haloWidth, haloColor: d.label?.haloColor ?? dirDefaults[rawDir]?.haloColor ?? defaultLabel.haloColor, dx: d.dx ?? d.label?.dx ?? dirDefaults[rawDir]?.dx ?? defaultLabel.dx, dy: d.dy ?? d.label?.dy ?? dirDefaults[rawDir]?.dy ?? defaultLabel.dy, offset: d.label?.offset ?? dirDefaults[rawDir]?.offset ?? defaultLabel.offset, unit: d.dir?.indexOf("-") > -1 ? +d.dir.split("-")[1] : d.fontSize ? parseInt(d.fontSize) / 3 : d.label?.unit ?? defaultLabel.unit }; const labelClass = d.class ?? d.group ?? "v-text-contextual-city"; if (sym.shape === "circle") { pointGroup .append("circle") .attr("r", sym.size) .attr("class", sym.symbolClass ?? "") .attr("fill", sym.fill) .attr("stroke", sym.stroke) .attr("stroke-width", sym.strokeWidth) .attr("opacity", sym.opacity); } else if (symbolMap[sym.shape]) { pointGroup .append("path") .attr("class", sym.symbolClass ?? "") .attr("d", d3.symbol().type(symbolMap[sym.shape]).size(sym.size)()) .attr("fill", sym.fill) .attr("stroke", sym.stroke) .attr("stroke-width", sym.strokeWidth) .attr("opacity", sym.opacity); } if (!d.name?.length) continue; const h = (sym.shape === "circle" ? +sym.size : Math.sqrt(+sym.size / Math.PI)) + lbl.offset; const diag = h * 0.707; const offsetMap = { N: [0, -h], NE: [diag, -diag], E: [h, 0], SE: [diag, diag], S: [0, h], SW: [-diag, diag], W: [-h, 0], NW: [-diag, -diag] }; const [odx, ody] = offsetMap[lbl.dir] || [h, 0]; const lx = odx + lbl.dx * lbl.unit; const ly = ody + lbl.dy * lbl.unit; const metrics = getFontMetrics(d.name, lbl.fontSize); const dyShift = lbl.valign === "top" ? metrics.ascent : lbl.valign === "mid" ? metrics.ascent - (metrics.ascent + metrics.descent) / 2 : lbl.valign === "bottom" ? -metrics.descent : /* baseline */ 0; if (lbl.haloWidth > 0) { const filterId = `halo-${uid}`; pointGroup .append("text") .attr("x", lx) .attr("y", ly + dyShift) .attr( "class", [sym.labelClass, labelClass].filter(Boolean).join(" ") ) .attr("text-anchor", anchorMap[lbl.halign]) .attr("fill", lbl.haloColor) .attr("fill-opacity", 1) .style("filter", `url(#halo-${uid})`) .style("font-size", lbl.fontSize ? `${lbl.fontSize}px` : null) .text(d.name); } pointGroup .append("text") .attr("id", d.name.replace(/ /g, "_")) .attr("class", [sym.labelClass, labelClass].filter(Boolean).join(" ")) .attr("text-anchor", anchorMap[lbl.halign]) .attr("x", lx) .attr("y", ly + dyShift) .style("fill", lbl.labelColor) .style("font-size", lbl.fontSize ? `${lbl.fontSize}px` : null) .text(d.name); } } function addAnnotations(data, editMode) { const typeMap = { circle: d3.annotationCalloutCircle, callout: d3.annotationCallout, elbow: d3.annotationCalloutElbow, curve: d3.annotationCalloutCurve, label: d3.annotationLabel, badge: d3.annotationBadge, rect: d3.annotationCalloutRect }; gannotation.selectAll("[id^='annotation-layer']").remove(); const byType = d3.group(data, (d) => d.type || "default"); for (const [type, group] of byType) { const annotationType = typeMap[type] || d3.annotationCalloutCircle; const annotations = group.map((d) => { const [px, py] = projection([d.lat, d.lng]); const poi = d.poi ?? {}; return { note: { title: d.name, label: d.label || null, wrap: d.wrap ?? 150, padding: d.type === "poi" ? d.padding ?? 0 : d.padding ?? 5, align: d.align || "dynamic", lineType: d.lineType || null, bgPadding: d.bgPadding ?? 0 }, x: px, y: py, dx: d.dx ?? 20, dy: d.dy ?? -20, color: d.color || "#000", disable: d.type === "poi" ? [] : d.disable || [], subject: d.type === "poi" ? { radius: d.poi?.radius ?? d.subject?.radius ?? 5, radiusPadding: 0 } : d.subject || { radius: d.radius ?? 5, radiusPadding: d.radiusPadding ?? 2 }, data: { lng: d.lng, lat: d.lat, poi } }; }); const makeAnnotation = d3 .annotation() .type(annotationType) .editMode(editMode ?? false) .annotations(annotations); const ag = gannotation .append("g") .attr("id", "annotation-layer-" + type); setTimeout(() => { ag.call(makeAnnotation); annotations.forEach((a, i) => { if (type !== "poi") return; const poi = group[i]?.poi ?? {}; const sel = ag.select(`.annotation:nth-child(${i + 1})`); sel .select(".annotation-subject path.subject") .style("fill", poi.solid ?? true ? poi.fill ?? "#000" : "none") .style("fill-opacity", "1") .style("stroke", poi.stroke ?? poi.fill ?? "#000") .style("stroke-width", poi.strokeWidth ?? 1.5); sel .select(".annotation-connector path") .style("stroke", poi.leader ?? true ? null : "none"); sel.select(".annotation-note-line").style("stroke", "none"); sel.attr( "class", (sel.attr("class") || "") + " " + (group[i]?.class ?? "") ); sel .select(".annotation-note-content") .attr( "transform", `translate(${group[i]?.ndx ?? 0}, ${group[i]?.ndy ?? 0})` ); }); makeAnnotation.on("dragend", function (d) { const original = data.find((o) => o.name === d.note.title); if (d.subject.x || d.subject.y) { console.log( JSON.stringify( { ...original, subject: { text: d.subject.text, radius: d.subject.radius, x: d.subject.x || null, y: d.subject.y || null } }, null, 2 ) ); } else { console.log( JSON.stringify( { ...original, dx: Math.round(d._dx), dy: Math.round(d._dy) }, null, 2 ) ); } }); }, 0); } } if (this.layer.annotations?.show) { addAnnotations( this.layer.annotations.data, this.layer.annotations.editMode ); } if (this.graphic.title?.show) { const t = this.graphic.title; const titleFeatures = renderLabels([{ ...t, lng: 0, lat: 0 }], t.font); const measureProj = d3 .geoIdentity() .reflectY(true) .fitSize([width, t.scale ?? 100], titleFeatures); const measurePath = d3.geoPath().projection(measureProj); const [[x0, y0], [x1, y1]] = measurePath.bounds(titleFeatures); const tw = x1 - x0; const th = y1 - y0; const anchor = t.anchor ?? "top-left"; const pad = t.padding ?? 20; const targets = { "top-left": [pad, pad], "top-center": [width / 2 - tw / 2, pad], "top-right": [width - pad - tw, pad], "bottom-left": [pad, height - pad - th], "bottom-center": [width / 2 - tw / 2, height - pad - th], "bottom-right": [width - pad - tw, height - pad - th] }; const [tx, ty] = targets[anchor]; const dx = tx - x0; const dy = ty - y0; const g = ggraphic .append("g") .attr("transform", `translate(${dx},${dy})`); if (t.background) { const b = t.background; const p = b.padding ?? 0; g.append("rect") .attr("x", x0 - p) .attr("y", y0 - p) .attr("width", tw + p * 2) .attr("height", th + p * 2) .attr("fill", b.fill ?? "white") .attr("fill-opacity", b["fill-opacity"] ?? 1) .attr("stroke", b.stroke ?? "none") .attr("stroke-width", b["stroke-width"] ?? 0) .attr("stroke-opacity", b["stroke-opacity"] ?? 1) .attr("opacity", b.opacity ?? 1) .attr("rx", b.rx ?? 0) .attr("ry", b.ry ?? 0); } g.append("path") .datum(titleFeatures) .attr("d", measurePath) .attr("fill", t.fill ?? "black") .attr("stroke", t.stroke ?? "none") .attr("stroke-width", t["stroke-width"] ?? 0) .attr("opacity", t.opacity ?? 1); } this.proj = projection; this.geoExtent = [ projection.invert([0, 0]), projection.invert([width, 0]), projection.invert([width, height]), projection.invert([0, height]) ]; gradients.forEach( ({ id, type = "linear", x1, y1, x2, y2, cx, cy, r, fx, fy, from, to, stops, animate }) => { let g; if (type === "radial") { g = defs .append("radialGradient") .attr("id", id) .attr("cx", cx ?? "50%") .attr("cy", cy ?? "50%") .attr("r", r ?? "50%") .attr("fx", fx ?? cx ?? "50%") .attr("fy", fy ?? cy ?? "50%"); } else { g = defs .append("linearGradient") .attr("id", id) .attr("x1", x1) .attr("y1", y1) .attr("x2", x2) .attr("y2", y2); } if (stops) { stops.forEach(({ offset, color, opacity }) => { g.append("stop") .attr("offset", offset) .attr("stop-color", color) .attr("stop-opacity", opacity ?? 1); }); } else { g.append("stop").attr("offset", "0%").attr("stop-color", from); g.append("stop").attr("offset", "100%").attr("stop-color", to); } if (animate?.type === "rotate") { g.attr("gradientTransform", "rotate(0 0.5 0.5)"); g.append("animateTransform") .attr("attributeName", "gradientTransform") .attr("type", "rotate") .attr("from", "0 0.5 0.5") .attr("to", "360 0.5 0.5") .attr("dur", animate.duration ?? "3s") .attr("repeatCount", "indefinite"); } } ); patterns.forEach((p) => { if (defs.node().querySelector(`#${p.id}`)) return; const tempSvg = p.animate ? animatePattern(p) : pattern(p); const patternEl = tempSvg.querySelector("pattern"); patternEl.setAttribute("id", p.id); defs.node().appendChild(patternEl); }); masks.forEach(({ id, gradient }) => { defs .append("mask") .attr("id", id) .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", `url(#${gradient})`); }); patterns .filter((p) => p.animate) .forEach((p) => { const anims = defs .node() .querySelectorAll(`#${p.id} animateTransform, #${p.id} animate`); const rect = graphic.node().querySelector(`rect[fill='url(#${p.id})']`); if (rect && anims.length) { rect.addEventListener("mouseover", () => anims.forEach((a) => a.beginElement()) ); rect.addEventListener("mouseout", () => anims.forEach((a) => a.endElement()) ); } }); filters.forEach((f) => { if (defs.node().querySelector(`#${f.id}`)) return; defs.node().appendChild(buildFilter(f)); }); if (!document.getElementById("mapa-styles")) { const s = styles.cloneNode(true); s.id = "mapa-styles"; document.head.appendChild(s); } if (this.overlay?.show) { const items = this.overlay.items || []; const getDims = (svgEl, item) => [ item.width || +svgEl.getAttribute("width") || svgEl.viewBox?.baseVal?.width, item.height || +svgEl.getAttribute("height") || svgEl.viewBox?.baseVal?.height ]; const getPos = (anchor, offset, w, h) => { const [ox, oy] = offset || [0, 0]; const cx = (width - w) / 2, cy = (height - h) / 2; const pos = { "top-left": [ox, oy], "top-right": [width - w - ox, oy], "top-center": [cx, oy], "bottom-left": [ox, height - h - oy], "bottom-right": [width - w - ox, height - h - oy], "bottom-center": [cx, height - h - oy], center: [cx, cy] }; return pos[anchor] || [ox, oy]; }; const inline = (svgEl, g) => { [...svgEl.children].forEach((c) => { if (c.tagName === "defs") { const parentDefs = graphic.select("defs").node(); [...c.children].forEach((def) => parentDefs.appendChild(def.cloneNode(true)) ); } else { g.node().appendChild(c.cloneNode(true)); } }); }; items.forEach((item) => { const [w, h] = getDims(item.src, item); const [x, y] = getPos(item.anchor, item.offset, w, h); const g = ggraphic .append("g") .attr("id", item.id) .attr("transform", `translate(${x},${y})`) .style("mix-blend-mode", item.blendMode ?? "normal"); if (item.show) inline(item.src, g); }); } return graphic.node(); } }37:T1a75,gradients = [ //animated { id: "animate-test", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "0%", animate: { type: "rotate", duration: "3s", easing: "linear" }, stops: [ { offset: "0%", color: "red", opacity: 1 }, { offset: "100%", color: "blue", opacity: 1 } ] }, // vignettes { id: "ul-b-5", type: "linear", x1: "100%", y1: "100%", x2: "0%", y2: "0%", stops: [ { offset: "0%", color: "black", opacity: 0 }, { offset: "95%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 1 } ] }, { id: "ur-b-5", type: "linear", x1: "0%", y1: "100%", x2: "100%", y2: "0%", stops: [ { offset: "0%", color: "black", opacity: 0 }, { offset: "95%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 1 } ] }, { id: "bl-b-5", type: "linear", x1: "100%", y1: "0%", x2: "0%", y2: "100%", stops: [ { offset: "0%", color: "black", opacity: 0 }, { offset: "95%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 1 } ] }, { id: "br-b-5", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "100%", stops: [ { offset: "0%", color: "black", opacity: 0 }, { offset: "95%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 1 } ] }, { id: "v-burn", type: "radial", cx: "50%", cy: "50%", r: "50%", stops: [ { offset: "0%", color: "white", opacity: 1 }, { offset: "100%", color: "black", opacity: 1 } ] }, { id: "v-25-b", type: "radial", cx: "50%", cy: "50%", r: "25%", from: "transparent", to: "black" }, { id: "v-50-b", type: "radial", cx: "50%", cy: "50%", r: "50%", from: "transparent", to: "black" }, { id: "v-75-b", type: "radial", cx: "50%", cy: "50%", r: "75%", from: "transparent", to: "black" }, { id: "v-25-w", type: "radial", cx: "50%", cy: "50%", r: "25%", from: "transparent", to: "white" }, { id: "v-50-w", type: "radial", cx: "50%", cy: "50%", r: "50%", from: "transparent", to: "white" }, { id: "v-75-w", type: "radial", cx: "50%", cy: "50%", r: "75%", from: "transparent", to: "white" }, // horizontal fades { id: "h-fade-b", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "0%", stops: [ { offset: "0%", color: "black", opacity: 1 }, { offset: "50%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 0 } ] }, { id: "h-fade-rb", type: "linear", x1: "100%", y1: "0%", x2: "0%", y2: "0%", stops: [ { offset: "0%", color: "black", opacity: 1 }, { offset: "50%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 0 } ] }, { id: "h-fade-w", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "0%", stops: [ { offset: "0%", color: "white", opacity: 1 }, { offset: "40%", color: "white", opacity: 1 }, // day holds solid until here { offset: "60%", color: "white", opacity: 0 }, // transition zone { offset: "100%", color: "white", opacity: 0 } ] }, { id: "h-fade-rw", type: "linear", x1: "100%", y1: "0%", x2: "0%", y2: "0%", stops: [ { offset: "0%", color: "white", opacity: 1 }, { offset: "40%", color: "white", opacity: 1 }, // day holds solid until here { offset: "60%", color: "white", opacity: 0 }, // transition zone { offset: "100%", color: "white", opacity: 0 } ] }, // vertical fades { id: "v-fade-b", type: "linear", x1: "0%", y1: "0%", x2: "0%", y2: "100%", stops: [ { offset: "0%", color: "black", opacity: 1 }, { offset: "40%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 0 } ] }, { id: "v-fade-rb", type: "linear", x1: "0%", y1: "100%", x2: "0%", y2: "0%", stops: [ { offset: "0%", color: "black", opacity: 1 }, { offset: "40%", color: "black", opacity: 0 }, { offset: "100%", color: "black", opacity: 0 } ] }, { id: "v-fade-w", type: "linear", x1: "0%", y1: "0%", x2: "0%", y2: "100%", stops: [ { offset: "0%", color: "white", opacity: 1 }, { offset: "40%", color: "white", opacity: 0 }, { offset: "100%", color: "white", opacity: 0 } ] }, { id: "v-fade-rw", type: "linear", x1: "0%", y1: "100%", x2: "0%", y2: "0%", stops: [ { offset: "0%", color: "white", opacity: 1 }, { offset: "40%", color: "white", opacity: 0 }, { offset: "100%", color: "white", opacity: 0 } ] }, // corners { id: "ul-b", type: "linear", x1: "100%", y1: "100%", x2: "0%", y2: "0%", from: "transparent", to: "black" }, { id: "ur-b", type: "linear", x1: "0%", y1: "100%", x2: "100%", y2: "0%", from: "transparent", to: "black" }, { id: "br-b", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "100%", from: "transparent", to: "black" }, { id: "bl-b", type: "linear", x1: "100%", y1: "0%", x2: "0%", y2: "100%", from: "transparent", to: "black" }, { id: "ul-w", type: "linear", x1: "100%", y1: "100%", x2: "0%", y2: "0%", from: "transparent", to: "white" }, { id: "ur-w", type: "linear", x1: "0%", y1: "100%", x2: "100%", y2: "0%", from: "transparent", to: "white" }, { id: "br-w", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "100%", from: "transparent", to: "white" }, { id: "bl-w", type: "linear", x1: "100%", y1: "0%", x2: "0%", y2: "100%", from: "transparent", to: "white" }, // edge { id: "l-b", type: "linear", x1: "100%", y1: "0%", x2: "0%", y2: "0%", from: "transparent", to: "black" }, { id: "r-b", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "0%", from: "transparent", to: "black" }, { id: "l-w", type: "linear", x1: "100%", y1: "0%", x2: "0%", y2: "0%", from: "transparent", to: "white" }, { id: "r-w", type: "linear", x1: "0%", y1: "0%", x2: "100%", y2: "0%", from: "transparent", to: "white" } ]38:T4ee,patterns = [ { id: "disputed-pattern", orientation: [], lineSize: 8, lineWidth: 1.5, accentColor: "#f3daa7", backgroundColor: "#cd6d57", width: 150, height: 150 }, { id: "disputed-pattern-2", orientation: ["vertical"], lineSize: 3, lineWidth: 1, accentColor: "#ead665", backgroundColor: "#7c8635", width: 150, height: 150 }, { id: "vertical-pattern-orange", orientation: ["vertical"], lineSize: 3, lineWidth: 1, accentColor: "#613936", backgroundColor: "#ebbc71", width: 150, height: 150 }, { id: "ocean", animate: true, customPath: "waves", paused: true, yoyo: true, lineSize: 16, lineWidth: 0.6, accentColor: "#39334a", backgroundColor: "#4f638d", width: 150, height: 150, dur: "2.5s", from: "-8,-8", to: "0,0", opacityFrom: 0.3, opacityTo: 0.6 }, { id: "ocean-diagonal", animate: false, customPath: "waves", paused: true, yoyo: true, lineSize: 8, lineWidth: 0.5, accentColor: "#7ab3c8", backgroundColor: "#1a3a4a", width: 150, height: 150, dur: "2.5s", from: "-8,-8", to: "0,0", opacityFrom: 0.1, opacityTo: 0.5 } ]39:Ta07,customSettings = ({ width: 680, height: null, bounds: { bounder: false, countries: null, feature: { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [ [ [0, -90], [0, 90], [180, 90], [180, -90], [0, -90] ] ] } } }, clipping: { clip: true, margin: 0 }, projection: { type: "default", proj: d3.geoMercator(), fit: "size", translate: false, // [this.width / 2, this.height / 2] scale: false, // 5000 center: false, // [] rotate: false, // [0,0,0] tilt: false, // distance: false, clipExtent: false, clipAngle: false, precision: false }, rotation: { value: [0, 0, 0], rotate: false }, layer: { points: { show: false, data: null }, polys: { show: false, data: null }, tiles: { show: false, data: null }, grids: { show: false, data: null } }, basemap: { coastline: { show: true, style: { fill: "none", stroke: "#18294b", opacity: 1 } }, background: { show: false, style: { fill: "#f2f2f2", stroke: "none", opacity: 1 } }, land: { show: true, geometry: null, key: "GID_0", label: "NAME_0", style: { fill: "#f8d8aa", stroke: "none", opacity: 1 } }, border: { show: true, geometry: null, style: { fill: "none", stroke: "#35281f", opacity: 1 } }, ocean: { show: true, geometry: null, style: { fill: "#b6c3b0", stroke: "none", opacity: 1 } }, lake: { show: true, geometry: null, style: { fill: "#688581", stroke: "none", opacity: 1, "stroke-width": 1 } }, river: { show: true, geometry: null, style: { fill: "none", stroke: "blue", opacity: 1 } }, graticule: { show: false } }, graticule: { step: null, //10 show: false, custom: { gc: true, show: true, latitude: [66.5], // Tropic of Cancer, Equator, Arctic Circle longitude: [], latBounds: [-93.5, 14], lonBounds: [50, 83], style: { stroke: "#0a1f35", "stroke-width": 1, opacity: 1, "stroke-dasharray": "none" } } }, scalebar: { show: false, topValue: 200, topUnit: "km", bottomValue: 200, bottomUnit: "mi", position: [120, 50] }, label: { show: false, country: null, //[] list of names style: null // {} } })3a:Tada,aagSettings = ({ width: 1152, height: null, bounds: { bounder: false, countries: null, feature: { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [ [ [0, -90], [0, 90], [180, 90], [180, -90], [0, -90] ] ] } } }, clipping: { clip: false, margin: 0 }, projection: { type: "default", proj: d3.geoMiller(), fit: "size", translate: false, // [this.width / 2, this.height / 2] scale: false, // 5000 center: false, // [] rotate: false, // [0,0,0] tilt: false, // distance: false, clipExtent: false, clipAngle: false, precision: false }, rotation: { value: [0, 0, 0], rotate: false }, basemap: { coastline: { show: false, style: { fill: "none", stroke: "#dddddd", opacity: 1 } }, background: { show: false, style: { fill: "#f2f2f2", stroke: "none", opacity: 1 } }, land: { show: true, geometry: null, key: "GID_0", label: "NAME_0", style: { fill: function (d) { if (d.properties.ISO_A2 == "IR") { return "#ebe4d0"; } else { return "#fffff9"; } }, stroke: "none", opacity: 0.85 } }, border: { show: true, geometry: null, style: { fill: "none", stroke: "#CCCCCC", opacity: 1 } }, ocean: { show: false, geometry: null, style: { fill: "#f2f2f2", stroke: "none", opacity: 1 } }, lake: { show: true, geometry: null, style: { fill: "#f2f2f2", stroke: "none", opacity: 1, "stroke-width": 1 } }, river: { show: false, geometry: null, style: { fill: "none", stroke: "blue", opacity: 1 } }, graticule: { show: false } }, graticule: { step: null, //10 show: false, custom: { show: false, latitude: { min: null, max: null }, longitude: { min: null, max: null }, style: { stroke: "red", "stroke-width": 1, opacity: 1, "stroke-dasharray": "none" } } }, layer: { points: { show: false, data: null }, //[{}]}, points polys: { show: false, data: null }, //polygons polylines tiles: { show: false, data: null }, //[{id: type: delta:}] }, grids: { show: false, data: null } }, scalebar: { show: false, topValue: 200, topUnit: "km", bottomValue: 200, bottomUnit: "mi", position: [120, 50] }, label: { show: false, country: null, //[] list of names style: null // {} } })3b:T423,function densify(bbox, divisions = 10) { let west, south, east, north; if (Array.isArray(bbox)) { // old format: [west, south, east, north] [west, south, east, north] = bbox; } else { // bounder.bbox: GeoJSON Feature const coords_in = bbox.geometry.coordinates[0]; west = coords_in[0][0]; east = coords_in[1][0]; south = coords_in[2][1]; north = coords_in[0][1]; } const coords = []; const lngStep = (east - west) / divisions; const latStep = (north - south) / divisions; for (let i = 0; i <= divisions; i++) coords.push([west + lngStep * i, south]); for (let i = 1; i <= divisions; i++) coords.push([east, south + latStep * i]); for (let i = divisions - 1; i >= 0; i--) coords.push([west + lngStep * i, north]); for (let i = divisions - 1; i >= 0; i--) coords.push([west, south + latStep * i]); coords.push([west, south]); const feature = { type: "Feature", geometry: { type: "Polygon", coordinates: [coords] } }; feature.geometry.coordinates[0].reverse(); return feature; } 3c:Tae5,async function decodeUint16PNG(buffer) { function paeth(a, b, c) { const p = a + b - c; const pa = Math.abs(p - a); const pb = Math.abs(p - b); const pc = Math.abs(p - c); return pa <= pb && pa <= pc ? a : pb <= pc ? b : c; } const bytes = new Uint8Array(buffer); // parse IHDR const width = (bytes[16] << 24) | (bytes[17] << 16) | (bytes[18] << 8) | bytes[19]; const height = (bytes[20] << 24) | (bytes[21] << 16) | (bytes[22] << 8) | bytes[23]; const bitDepth = bytes[24]; // collect IDAT chunks let idatBytes = []; let offset = 8; while (offset < bytes.length) { const length = (bytes[offset] << 24) | (bytes[offset + 1] << 16) | (bytes[offset + 2] << 8) | bytes[offset + 3]; const type = String.fromCharCode( bytes[offset + 4], bytes[offset + 5], bytes[offset + 6], bytes[offset + 7] ); if (type === "IDAT") { idatBytes.push(...bytes.slice(offset + 8, offset + 8 + length)); } if (type === "IEND") break; offset += 12 + length; } // decompress const compressed = new Uint8Array(idatBytes); const ds = new DecompressionStream("deflate"); const writer = ds.writable.getWriter(); writer.write(compressed); writer.close(); const raw = await new Response(ds.readable).arrayBuffer(); const scanlines = new Uint8Array(raw); const bytesPerPixel = bitDepth === 16 ? 2 : 1; const stride = width * bytesPerPixel + 1; const pixels = new Uint16Array(width * height); const recon = new Uint8Array(height * width * bytesPerPixel); for (let y = 0; y < height; y++) { const filterType = scanlines[y * stride]; const row = y * width * bytesPerPixel; const prevRow = (y - 1) * width * bytesPerPixel; for (let x = 0; x < width * bytesPerPixel; x++) { const raw = scanlines[y * stride + 1 + x]; const a = x >= bytesPerPixel ? recon[row + x - bytesPerPixel] : 0; const b = y > 0 ? recon[prevRow + x] : 0; const c = x >= bytesPerPixel && y > 0 ? recon[prevRow + x - bytesPerPixel] : 0; let val; switch (filterType) { case 0: val = raw; break; case 1: val = (raw + a) & 0xff; break; case 2: val = (raw + b) & 0xff; break; case 3: val = (raw + Math.floor((a + b) / 2)) & 0xff; break; case 4: val = (raw + paeth(a, b, c)) & 0xff; break; default: val = raw; } recon[row + x] = val; } for (let x = 0; x < width; x++) { const i = row + x * bytesPerPixel; pixels[y * width + x] = bitDepth === 16 ? (recon[i] << 8) | recon[i + 1] : recon[i]; } } return { width, height, pixels }; }3d:T5ed,function addViewfinder( el, ratios = "4:3", { color = "red", strokeWidth = 1 } = {} ) { const list = Array.isArray(ratios) ? ratios : [ratios]; const wrapper = document.createElement("div"); wrapper.style.cssText = `position: relative; display: inline-block; line-height: 0;`; wrapper.appendChild(el); list.forEach((ratio) => { const [w, h] = ratio.split(":").map(Number); const portrait = h > w; const square = w === h; const vf = document.createElement("div"); vf.style.cssText = ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ${ portrait || square ? `height: 100%; width: auto;` : `width: 100%; height: auto;` } aspect-ratio: ${w} / ${h}; max-width: 100%; max-height: 100%; border: ${strokeWidth}px dashed ${color}; pointer-events: none; z-index: 10; `; const labelTL = document.createElement("div"); labelTL.textContent = ratio; labelTL.style.cssText = ` position: absolute; top: 4px; left: 4px; font: 10px/1 monospace; color: ${color}; pointer-events: none; `; const labelBR = document.createElement("div"); labelBR.textContent = ratio; labelBR.style.cssText = ` position: absolute; bottom: 4px; right: 4px; font: 10px/1 monospace; color: ${color}; pointer-events: none; `; vf.appendChild(labelTL); vf.appendChild(labelBR); wrapper.appendChild(vf); }); return wrapper; }3e:T874,function getmyCentroid(myfeatures, label, type, color) { let point = []; var x; function getCentroid(arr) { var polygon = turf.polygon([arr]); var center = turf.centerOfMass(polygon); return { lng: center.geometry.coordinates[0], lat: center.geometry.coordinates[1] }; } for (x in myfeatures) { let mainBody = { type: "country", size: -1, shape: "circle", color: "#412c26", dir: "C" }; var lengths = myfeatures[x].geometry.coordinates.map(function (a) { return a[0].length; }); if (myfeatures[x].geometry.type == "MultiPolygon") { mainBody["name"] = myfeatures[x].properties[label]; mainBody["lat"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ][0] ).lat; mainBody["lng"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ][0] ).lng; mainBody["latlng"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ][0] ).lat + ", " + getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ][0] ).lng; } else { mainBody["name"] = myfeatures[x].properties[label]; mainBody["lat"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ] ).lat; mainBody["lng"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ] ).lng; mainBody["latlng"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ] ).lat + ", " + getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ] ).lng; } point.push(mainBody); } return point; }3f:T704,function getCentroid(myfeatures, label, uid, color) { let point = []; var x; function getCentroid(arr) { var polygon = turf.polygon([arr]); var center = turf.centerOfMass(polygon); return { lng: center.geometry.coordinates[0], lat: center.geometry.coordinates[1] }; } for (x in myfeatures) { let mainBody = {}; var lengths = myfeatures[x].geometry.coordinates.map(function (a) { return a[0].length; }); if (myfeatures[x].geometry.type == "MultiPolygon") { mainBody["uid"] = myfeatures[x].properties[uid]; mainBody["label"] = myfeatures[x].properties[label]; mainBody["lat"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ][0] ).lat; mainBody["lng"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ][0] ).lng; mainBody["color"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ][0] ).color; } else { mainBody["uid"] = myfeatures[x].properties[uid]; mainBody["label"] = myfeatures[x].properties[label]; mainBody["lat"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ] ).lat; mainBody["lng"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ] ).lng; mainBody["color"] = getCentroid( myfeatures[x].geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ] ).color; } point.push(mainBody); } return point; }40:T5ba,function getCities(iso, num, overrides = {}) { const lang = overrides.lang || "NAME"; return places .filter((d) => d.properties.ISO_A2 == iso && d.properties.ADM0CAP != "1") .sort((a, b) => b.properties.POP2020 - a.properties.POP2020) .slice(0, num) .map((d) => ({ name: d.properties[lang] || d.properties.NAME, lat: +d.properties.LATITUDE, lng: +d.properties.LONGITUDE, shape: "circle", size: overrides[d.properties.NAME]?.size || overrides.size || "4", fontSize: overrides[d.properties.NAME]?.fontSize || overrides.fontSize || null, dir: overrides[d.properties.NAME]?.dir || overrides[d.properties.NAME] || "NE", label: overrides[d.properties.NAME]?.label || overrides.label, symbolClass: overrides[d.properties.NAME]?.symbolClass || overrides.symbolClass || null, labelClass: overrides[d.properties.NAME]?.labelClass || overrides.labelClass || null, class: overrides[d.properties.NAME]?.class || overrides.class || null, group: overrides[d.properties.NAME]?.group || overrides.group || "city", color: overrides[d.properties.NAME]?.color || overrides.color || null, stroke: overrides[d.properties.NAME]?.stroke || overrides.stroke || null, "stroke-width": overrides[d.properties.NAME]?.["stroke-width"] || overrides["stroke-width"] || null })); }41:T562,function getCapitol(iso, overrides = {}) { const lang = overrides.lang || "NAME"; return places .filter((d) => d.properties.ADM0CAP == "1" && d.properties.ISO_A2 == iso) .map((d) => ({ name: d.properties[lang] || d.properties.NAME, lat: +d.properties.LATITUDE, lng: +d.properties.LONGITUDE, shape: "star", group: overrides[d.properties.NAME]?.group || overrides.group || "city", size: overrides[d.properties.NAME]?.size || overrides.size || "64", fontSize: overrides[d.properties.NAME]?.fontSize || overrides.fontSize || null, dir: overrides[d.properties.NAME]?.dir || overrides[d.properties.NAME] || "NE", label: overrides[d.properties.NAME]?.label || overrides.label, symbolClass: overrides[d.properties.NAME]?.symbolClass || overrides.symbolClass || null, labelClass: overrides[d.properties.NAME]?.labelClass || overrides.labelClass || null, class: overrides[d.properties.NAME]?.class || overrides.class || null, color: overrides[d.properties.NAME]?.color || overrides.color || null, stroke: overrides[d.properties.NAME]?.stroke || overrides.stroke || null, "stroke-width": overrides[d.properties.NAME]?.["stroke-width"] || overrides["stroke-width"] || null })); }42:T27be,countryData = [ { name: "Afghanistan", ISO2: "AF", ISO3: "AFG" }, { name: "Albania", ISO2: "AL", ISO3: "ALB" }, { name: "Algeria", ISO2: "DZ", ISO3: "DZA" }, { name: "Andorra", ISO2: "AD", ISO3: "AND" }, { name: "Angola", ISO2: "AO", ISO3: "AGO" }, { name: "Antigua and Barbuda", ISO2: "AG", ISO3: "ATG" }, { name: "Argentina", ISO2: "AR", ISO3: "ARG" }, { name: "Armenia", ISO2: "AM", ISO3: "ARM" }, { name: "Australia", ISO2: "AU", ISO3: "AUS" }, { name: "Austria", ISO2: "AT", ISO3: "AUT" }, { name: "Azerbaijan", ISO2: "AZ", ISO3: "AZE" }, { name: "Bahamas", ISO2: "BS", ISO3: "BHS" }, { name: "Bahrain", ISO2: "BH", ISO3: "BHR" }, { name: "Bangladesh", ISO2: "BD", ISO3: "BGD" }, { name: "Barbados", ISO2: "BB", ISO3: "BRB" }, { name: "Belarus", ISO2: "BY", ISO3: "BLR" }, { name: "Belgium", ISO2: "BE", ISO3: "BEL" }, { name: "Belize", ISO2: "BZ", ISO3: "BLZ" }, { name: "Benin", ISO2: "BJ", ISO3: "BEN" }, { name: "Bhutan", ISO2: "BT", ISO3: "BTN" }, { name: "Bolivia", ISO2: "BO", ISO3: "BOL" }, { name: "Bosnia and Herzegovina", ISO2: "BA", ISO3: "BIH" }, { name: "Botswana", ISO2: "BW", ISO3: "BWA" }, { name: "Brazil", ISO2: "BR", ISO3: "BRA" }, { name: "Brunei", ISO2: "BN", ISO3: "BRN" }, { name: "Bulgaria", ISO2: "BG", ISO3: "BGR" }, { name: "Burkina Faso", ISO2: "BF", ISO3: "BFA" }, { name: "Burundi", ISO2: "BI", ISO3: "BDI" }, { name: "Cabo Verde", ISO2: "CV", ISO3: "CPV" }, { name: "Cape Verde", ISO2: "CV", ISO3: "CPV" }, { name: "Cambodia", ISO2: "KH", ISO3: "KHM" }, { name: "Cameroon", ISO2: "CM", ISO3: "CMR" }, { name: "Canada", ISO2: "CA", ISO3: "CAN" }, { name: "Central African Republic", ISO2: "CF", ISO3: "CAF" }, { name: "Chad", ISO2: "TD", ISO3: "TCD" }, { name: "Chile", ISO2: "CL", ISO3: "CHL" }, { name: "China", ISO2: "CN", ISO3: "CHN" }, { name: "Côte d'Ivoire", ISO2: "CI", ISO3: "CIV" }, { name: "Ivory Coast", ISO2: "CI", ISO3: "CIV" }, { name: "Colombia", ISO2: "CO", ISO3: "COL" }, { name: "Comoros", ISO2: "KM", ISO3: "COM" }, { name: "Congo", ISO2: "CG", ISO3: "COG" }, { name: "Costa Rica", ISO2: "CR", ISO3: "CRI" }, { name: "Croatia", ISO2: "HR", ISO3: "HRV" }, { name: "Cuba", ISO2: "CU", ISO3: "CUB" }, { name: "Cyprus", ISO2: "CY", ISO3: "CYP" }, { name: "Czechia", ISO2: "CZ", ISO3: "CZE" }, { name: "Czech Republic", ISO2: "CZ", ISO3: "CZE" }, { name: "Democratic Republic of the Congo", ISO2: "CD", ISO3: "COD" }, { name: "Republic of the Congo", ISO2: "CD", ISO3: "COD" }, { name: "Democratic Republic of Congo", ISO2: "CD", ISO3: "COD" }, { name: "Denmark", ISO2: "DK", ISO3: "DNK" }, { name: "Djibouti", ISO2: "DJ", ISO3: "DJI" }, { name: "Dominica", ISO2: "DM", ISO3: "DMA" }, { name: "Dominican Republic", ISO2: "DO", ISO3: "DOM" }, { name: "Ecuador", ISO2: "EC", ISO3: "ECU" }, { name: "Egypt", ISO2: "EG", ISO3: "EGY" }, { name: "El Salvador", ISO2: "SV", ISO3: "SLV" }, { name: "Equatorial Guinea", ISO2: "GQ", ISO3: "GNQ" }, { name: "Eritrea", ISO2: "ER", ISO3: "ERI" }, { name: "Estonia", ISO2: "EE", ISO3: "EST" }, { name: "Eswatini", ISO2: "SZ", ISO3: "SWZ" }, { name: "Ethiopia", ISO2: "ET", ISO3: "ETH" }, { name: "Fiji", ISO2: "FJ", ISO3: "FJI" }, { name: "Finland", ISO2: "FI", ISO3: "FIN" }, { name: "France", ISO2: "FR", ISO3: "FRA" }, { name: "Gabon", ISO2: "GA", ISO3: "GAB" }, { name: "Gambia", ISO2: "GM", ISO3: "GMB" }, { name: "Georgia", ISO2: "GE", ISO3: "GEO" }, { name: "Germany", ISO2: "DE", ISO3: "DEU" }, { name: "Ghana", ISO2: "GH", ISO3: "GHA" }, { name: "Greece", ISO2: "GR", ISO3: "GRC" }, { name: "Grenada", ISO2: "GD", ISO3: "GRD" }, { name: "Greenland", ISO2: "GL", ISO3: "GRL" }, { name: "Guatemala", ISO2: "GT", ISO3: "GTM" }, { name: "Guinea", ISO2: "GN", ISO3: "GIN" }, { name: "Guinea-Bissau", ISO2: "GW", ISO3: "GNB" }, { name: "Guinea Bissau", ISO2: "GW", ISO3: "GNB" }, { name: "Guyana", ISO2: "GY", ISO3: "GUY" }, { name: "Haiti", ISO2: "HT", ISO3: "HTI" }, { name: "Honduras", ISO2: "HN", ISO3: "HND" }, { name: "Hungary", ISO2: "HU", ISO3: "HUN" }, { name: "Iceland", ISO2: "IS", ISO3: "ISL" }, { name: "India", ISO2: "IN", ISO3: "IND" }, { name: "Indonesia", ISO2: "ID", ISO3: "IDN" }, { name: "Iran", ISO2: "IR", ISO3: "IRN" }, { name: "Iraq", ISO2: "IQ", ISO3: "IRQ" }, { name: "Ireland", ISO2: "IE", ISO3: "IRL" }, { name: "Israel", ISO2: "IL", ISO3: "ISR" }, { name: "Italy", ISO2: "IT", ISO3: "ITA" }, { name: "Jamaica", ISO2: "JM", ISO3: "JAM" }, { name: "Japan", ISO2: "JP", ISO3: "JPN" }, { name: "Jordan", ISO2: "JO", ISO3: "JOR" }, { name: "Kazakhstan", ISO2: "KZ", ISO3: "KAZ" }, { name: "Kenya", ISO2: "KE", ISO3: "KEN" }, { name: "Kiribati", ISO2: "KI", ISO3: "KIR" }, { name: "Kuwait", ISO2: "KW", ISO3: "KWT" }, { name: "Kyrgyzstan", ISO2: "KG", ISO3: "KGZ" }, { name: "Laos", ISO2: "LA", ISO3: "LAO" }, { name: "Latvia", ISO2: "LV", ISO3: "LVA" }, { name: "Lebanon", ISO2: "LB", ISO3: "LBN" }, { name: "Lesotho", ISO2: "LS", ISO3: "LSO" }, { name: "Liberia", ISO2: "LR", ISO3: "LBR" }, { name: "Libya", ISO2: "LY", ISO3: "LBY" }, { name: "Liechtenstein", ISO2: "LI", ISO3: "LIE" }, { name: "Lithuania", ISO2: "LT", ISO3: "LTU" }, { name: "Luxembourg", ISO2: "LU", ISO3: "LUX" }, { name: "Madagascar", ISO2: "MG", ISO3: "MDG" }, { name: "Malawi", ISO2: "MW", ISO3: "MWI" }, { name: "Malaysia", ISO2: "MY", ISO3: "MYS" }, { name: "Maldives", ISO2: "MV", ISO3: "MDV" }, { name: "Mali", ISO2: "ML", ISO3: "MLI" }, { name: "Malta", ISO2: "MT", ISO3: "MLT" }, { name: "Marshall Islands", ISO2: "MH", ISO3: "MHL" }, { name: "Mauritania", ISO2: "MR", ISO3: "MRT" }, { name: "Mauritius", ISO2: "MU", ISO3: "MUS" }, { name: "Mexico", ISO2: "MX", ISO3: "MEX" }, { name: "Micronesia", ISO2: "FM", ISO3: "FSM" }, { name: "Moldova", ISO2: "MD", ISO3: "MDA" }, { name: "Monaco", ISO2: "MC", ISO3: "MCO" }, { name: "Mongolia", ISO2: "MN", ISO3: "MNG" }, { name: "Montenegro", ISO2: "ME", ISO3: "MNE" }, { name: "Morocco", ISO2: "MA", ISO3: "MAR" }, { name: "Mozambique", ISO2: "MZ", ISO3: "MOZ" }, { name: "Myanmar", ISO2: "MM", ISO3: "MMR" }, { name: "Namibia", ISO2: "NA", ISO3: "NAM" }, { name: "Nauru", ISO2: "NR", ISO3: "NRU" }, { name: "Nepal", ISO2: "NP", ISO3: "NPL" }, { name: "Netherlands", ISO2: "NL", ISO3: "NLD" }, { name: "New Zealand", ISO2: "NZ", ISO3: "NZL" }, { name: "Nicaragua", ISO2: "NI", ISO3: "NIC" }, { name: "North Korea", ISO2: "KP", ISO3: "PRK" }, { name: "South Korea", ISO2: "KR", ISO3: "KOR" }, { name: "Niger", ISO2: "NE", ISO3: "NER" }, { name: "Nigeria", ISO2: "NG", ISO3: "NGA" }, { name: "North Macedonia", ISO2: "MK", ISO3: "MKD" }, { name: "Norway", ISO2: "NO", ISO3: "NOR" }, { name: "Oman", ISO2: "OM", ISO3: "OMN" }, { name: "Pakistan", ISO2: "PK", ISO3: "PAK" }, { name: "Palau", ISO2: "PW", ISO3: "PLW" }, { name: "Panama", ISO2: "PA", ISO3: "PAN" }, { name: "Papua New Guinea", ISO2: "PG", ISO3: "PNG" }, { name: "Paraguay", ISO2: "PY", ISO3: "PRY" }, { name: "Peru", ISO2: "PE", ISO3: "PER" }, { name: "Philippines", ISO2: "PH", ISO3: "PHL" }, { name: "Poland", ISO2: "PL", ISO3: "POL" }, { name: "Portugal", ISO2: "PT", ISO3: "PRT" }, { name: "Qatar", ISO2: "QA", ISO3: "QAT" }, { name: "Romania", ISO2: "RO", ISO3: "ROU" }, { name: "Russia", ISO2: "RU", ISO3: "RUS" }, { name: "Rwanda", ISO2: "RW", ISO3: "RWA" }, { name: "Saint Kitts and Nevis", ISO2: "KN", ISO3: "KNA" }, { name: "Saint Lucia", ISO2: "LC", ISO3: "LCA" }, { name: "Saint Vincent and the Grenadines", ISO2: "VC", ISO3: "VCT" }, { name: "Samoa", ISO2: "WS", ISO3: "WSM" }, { name: "San Marino", ISO2: "SM", ISO3: "SMR" }, { name: "Sao Tome and Principe", ISO2: "ST", ISO3: "STP" }, { name: "São Tomé and Príncipe", ISO2: "ST", ISO3: "STP" }, { name: "Saudi Arabia", ISO2: "SA", ISO3: "SAU" }, { name: "Senegal", ISO2: "SN", ISO3: "SEN" }, { name: "Serbia", ISO2: "RS", ISO3: "SRB" }, { name: "Seychelles", ISO2: "SC", ISO3: "SYC" }, { name: "Sierra Leone", ISO2: "SL", ISO3: "SLE" }, { name: "Singapore", ISO2: "SG", ISO3: "SGP" }, { name: "Slovakia", ISO2: "SK", ISO3: "SVK" }, { name: "Slovenia", ISO2: "SI", ISO3: "SVN" }, { name: "Solomon Islands", ISO2: "SB", ISO3: "SLB" }, { name: "Somalia", ISO2: "SO", ISO3: "SOM" }, { name: "South Africa", ISO2: "ZA", ISO3: "ZAF" }, { name: "South Sudan", ISO2: "SS", ISO3: "SSD" }, { name: "Spain", ISO2: "ES", ISO3: "ESP" }, { name: "Sri Lanka", ISO2: "LK", ISO3: "LKA" }, { name: "Sudan", ISO2: "SD", ISO3: "SDN" }, { name: "Suriname", ISO2: "SR", ISO3: "SUR" }, { name: "Sweden", ISO2: "SE", ISO3: "SWE" }, { name: "Switzerland", ISO2: "CH", ISO3: "CHE" }, { name: "Syria", ISO2: "SY", ISO3: "SYR" }, { name: "Taiwan", ISO2: "TW", ISO3: "TWN" }, { name: "Tajikistan", ISO2: "TJ", ISO3: "TJK" }, { name: "Tanzania", ISO2: "TZ", ISO3: "TZA" }, { name: "Thailand", ISO2: "TH", ISO3: "THA" }, { name: "Timor-Leste", ISO2: "TL", ISO3: "TLS" }, { name: "East Timor", ISO2: "TL", ISO3: "TLS" }, { name: "Togo", ISO2: "TG", ISO3: "TGO" }, { name: "Tonga", ISO2: "TO", ISO3: "TON" }, { name: "Trinidad and Tobago", ISO2: "TT", ISO3: "TTO" }, { name: "Tunisia", ISO2: "TN", ISO3: "TUN" }, { name: "Turkey", ISO2: "TR", ISO3: "TUR" }, { name: "Turkmenistan", ISO2: "TM", ISO3: "TKM" }, { name: "Tuvalu", ISO2: "TV", ISO3: "TUV" }, { name: "Uganda", ISO2: "UG", ISO3: "UGA" }, { name: "Ukraine", ISO2: "UA", ISO3: "UKR" }, { name: "United Arab Emirates", ISO2: "AE", ISO3: "ARE" }, { name: "United Kingdom", ISO2: "GB", ISO3: "GBR" }, { name: "United States", ISO2: "US", ISO3: "USA" }, { name: "Uruguay", ISO2: "UY", ISO3: "URY" }, { name: "Uzbekistan", ISO2: "UZ", ISO3: "UZB" }, { name: "Vanuatu", ISO2: "VU", ISO3: "VUT" }, { name: "Vatican City", ISO2: "VA", ISO3: "VAT" }, { name: "Venezuela", ISO2: "VE", ISO3: "VEN" }, { name: "Vietnam", ISO2: "VN", ISO3: "VNM" }, { name: "Yemen", ISO2: "YE", ISO3: "YEM" }, { name: "Zambia", ISO2: "ZM", ISO3: "ZMB" }, { name: "Zimbabwe", ISO2: "ZW", ISO3: "ZWE" } ]43:T655,async function getOSM(query, format, smooth, tolerance) { // Wrap the queryOverpass call in a new Promise if (format == "csv") { const data = await new Promise((resolve, reject) => { queryOverpass( `[out:${format}][timeout:900];(${query};);out body;>;out skel qt;`, function (err, result) { if (err) { console.log("error"); reject(err); // Reject the Promise if there's an error } else { console.log("sucess"); resolve(result); } //console.log(err, result); } ); }); return data; } if (format == "geojson" || format == "json") { const data = await new Promise((resolve, reject) => { queryOverpass( `[out:${format}][timeout:900];(${query};);out body;>;out skel qt;`, function (err, geojson) { if (err) { reject(err); // Reject the Promise if there's an error } else { if (smooth) { var options = { tolerance: tolerance ?? 0.01, highQuality: false }; var simplified = turf.simplify( geojsonrewind(geojson, true), options ); //console.log("simplified:" + geojsonrewind(geojson, true)); resolve(simplified.features); // Resolve the Promise with your data } else { //console.log(geojsonrewind(geojson, true)); resolve(geojsonrewind(geojson, true)); } } } ); }); return data; } }44:[] 32:{"id":"382bc88117683911","slug":"mapas","title":"Mapa (stableish)","thumbnail":"cd39fb495b66eaaffb89022767b713f2afe34902a10f87d9c1dd895d8d3af88c","access_level":"public","create_time":"$D2022-09-28T12:10:31.859Z","update_time":"$D2026-09-01T20:21:47.008Z","view_time":null,"first_public_time":"$D2022-10-24T16:08:15.761Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":4463,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Mapa (stableish)","cells":[{"id":0,"value":"# Mapa (stableish)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3427,"value":"### (deprecated?) not really \nhttps://observablehq.com/@mbrickmaps/mapa-documentation\nhttps://observablehq.com/@mbrickmaps/mapa-advanced-techniques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3912,"value":"import { renderLabels } from \"@mbrickmaps/geofont\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4143,"value":"// The @mbrickmaps/create-a-pattern notebook import is currently broken upstream —\n// it throws \"RuntimeError: require is not defined\" when evaluated (it appears to\n// call Node's require() at module scope, which doesn't exist in this browser/ESM runtime).\n// Stubbing it out here so the rest of the notebook (Mapa class, etc.) keeps working.\npattern = function (p) {\n const s = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n const pat = document.createElementNS(\"http://www.w3.org/2000/svg\", \"pattern\");\n pat.setAttribute(\"width\", p.width ?? 150);\n pat.setAttribute(\"height\", p.height ?? 150);\n pat.setAttribute(\"patternUnits\", \"userSpaceOnUse\");\n const rect = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n rect.setAttribute(\"width\", \"100%\");\n rect.setAttribute(\"height\", \"100%\");\n rect.setAttribute(\"fill\", p.backgroundColor ?? \"#ccc\");\n pat.appendChild(rect);\n s.appendChild(pat);\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4383,"value":"animatePattern = pattern","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4162,"value":"import { styles } from \"@mbrickmaps/web-animation-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4336,"value":"PMTiles = (await import(\"https://esm.sh/pmtiles\")).PMTiles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4365,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2502,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4286,"value":"masks = [\n { id: \"mask-l\", gradient: \"h-fade-w\" },\n { id: \"mask-r\", gradient: \"h-fade-rw\" },\n { id: \"mask-t\", gradient: \"v-fade-w\" },\n { id: \"mask-b\", gradient: \"v-fade-rw\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3747,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4141,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4380,"value":"filters = [\n {\n id: \"squiggle-1\",\n baseFrequency: 0.11,\n numOctaves: 6,\n scale: 30,\n seed: 15\n },\n {\n id: \"squiggle-inner\",\n baseFrequency: 0.22,\n numOctaves: 4,\n scale: 2.5,\n seed: 87,\n x: \"0%\",\n y: \"0%\",\n width: \"100%\",\n height: \"100%\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3949,"value":"symbols = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2666,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4306,"value":"viewof gradientDef","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4308,"value":"import {\n viewof gradientDef,\n viewof squiggleDef\n} from \"@mbrickmaps/blend-modes-for-cartography\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2079,"value":"import {\n countries,\n c,\n coastlines,\n ocean,\n pr,\n provinces,\n places,\n lakes,\n rivers,\n innerlines\n} from \"@mbrickmaps/ne-10m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2853,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3230,"value":"function deepmerge(target, source) {\n const result = { ...target };\n for (const key in source) {\n if (key === \"geometry\" || key === \"image\" || key === \"worldfile\") {\n result[key] = source[key];\n } else if (\n source[key] &&\n typeof source[key] === \"object\" &&\n !Array.isArray(source[key]) &&\n key !== \"coordinates\"\n ) {\n result[key] = deepmerge(target[key] || {}, source[key]);\n } else {\n result[key] = source[key];\n }\n }\n return result;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3477,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"new Mapa()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2673,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4377,"value":"function buildFilter({\n id,\n baseFrequency = 0.05,\n numOctaves = 4,\n scale = 4,\n seed = 0\n}) {\n const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n const filter = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"filter\"\n );\n filter.setAttribute(\"id\", id);\n\n const turbulence = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"feTurbulence\"\n );\n turbulence.setAttribute(\"type\", \"fractalNoise\");\n turbulence.setAttribute(\"baseFrequency\", baseFrequency);\n turbulence.setAttribute(\"numOctaves\", numOctaves);\n turbulence.setAttribute(\"seed\", seed);\n\n const displacement = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"feDisplacementMap\"\n );\n displacement.setAttribute(\"in\", \"SourceGraphic\");\n displacement.setAttribute(\"scale\", scale);\n\n filter.appendChild(turbulence);\n filter.appendChild(displacement);\n return filter;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4360,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3620,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2893,"value":"queryOverpass = (await import(\"https://esm.sh/query-overpass@1.5.5\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2900,"value":"geojsonrewind = (await import(\"https://esm.sh/geojson-rewind@0.3.1\")).default\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"d3 = Object.assign({}, ...await Promise.all([\n \"d3@5\",\n \"d3-geo-projection@2\",\n \"d3-geo-polygon\",\n \"d3-geo-scale-bar\",\n \"d3-array\",\n \"d3-svg-annotation@2\",\n ].map(name => import(`https://esm.sh/${name}`))))\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3488,"value":" d3_min = Object.assign({}, ...await Promise.all([\n \"d3-axis\",\n \"d3-color\",\n \"d3-selection@2\",\n \"d3-geo@3\",\n \"d3-geo-projection@4\",\n \"d3-geo-polygon\",\n \"d3-geo-scale-bar\",\n \"d3-scale@4\",\n \"d3-array@3\",\n \"d3-shape@3\",\n \"d3-zoom@3\",\n \"d3-svg-annotation@2\",\n ].map(name => import(`https://esm.sh/${name}`))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"proj4 = (await import(\"https://esm.sh/proj4@2.7.5\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3509,"value":"turf = Promise.all([\n import(\"https://esm.sh/@turf/bbox@7\"),\n import(\"https://esm.sh/@turf/bezier-spline@7\"),\n import(\"https://esm.sh/@turf/helpers@7\"),\n import(\"https://esm.sh/@turf/simplify@7\"),\n import(\"https://esm.sh/@turf/voronoi@7\"),\n import(\"https://esm.sh/@turf/bbox-polygon@7\"),\n import(\"https://esm.sh/@turf/square-grid@7\"),\n import(\"https://esm.sh/@turf/collect@7\"),\n import(\"https://esm.sh/@turf/buffer@7\"),\n import(\"https://esm.sh/@turf/center-of-mass@7\"),\n import(\"https://esm.sh/@turf/envelope\"),\n import(\"https://esm.sh/@turf/rewind@7\"),\n import(\"https://esm.sh/@turf/boolean-point-in-polygon@7\"),\n import(\"https://esm.sh/@turf/bbox-clip@7\"),\n import(\"https://esm.sh/@turf/great-circle@7\"),\n import(\"https://esm.sh/@turf/centroid@7\")\n]).then((modules) => Object.assign({}, ...modules))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3158,"value":"function getDistance(p1, p2, unit) {\n var point1 = {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: p1.split(\",\")\n }\n };\n var point2 = {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: p2.split(\",\")\n }\n };\n var units = unit;\n\n var points = {\n type: \"FeatureCollection\",\n features: [point1, point2]\n };\n\n //=points\n\n var distance = turf.distance(point1, point2, units);\n return distance;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4276,"value":"function getBufferedFeatureByName(\n collection,\n name,\n bufferDistance,\n units,\n key = \"NAME\"\n) {\n const feature = collection.find((d) => d.properties[key] === name);\n if (feature) {\n return turf.buffer(feature, bufferDistance, { units });\n } else {\n throw new Error(`Feature named ${name} not found.`);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4279,"value":"function bufferPOI(poi, bufferDistance, units) {\n return turf.buffer(turf.point([poi.lng, poi.lat]), bufferDistance, { units });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"topojson = Object.assign({}, ...await Promise.all([\n \"topojson-client@3\",\n \"topojson-simplify\",\n \"topojson-server\",\n ].map(name => import(`https://esm.sh/${name}`))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":" polylabel = (await import(\"https://esm.sh/polylabel@1.1.0\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2878,"value":"MiddleEast_Labels = [\n \"MA\",\n \"LY\",\n \"TN\",\n \"Algeria\",\n \"Egypt\",\n \"IL\",\n \"IS\",\n \"IR\",\n \"IQ\",\n \"Syria\",\n \"Lebanon\",\n \"JO\",\n \"Turkey\",\n \"Saudi Arabia\"\n].map((d) => {\n return getCountryLabels([isoQ(d)[0][1]])[0];\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3227,"value":"CentralAmerica_Labels = [\"SV\"].map((d) => {\n return getCountryLabels([isoQ(d)[0][1]])[0];\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3214,"value":"Europe_Labels = [\n \"MA\",\n \"LY\",\n \"TN\",\n \"Algeria\",\n \"Egypt\",\n \"IL\",\n \"IS\",\n \"IR\",\n \"IQ\",\n \"Syria\",\n \"Lebanon\",\n \"JO\",\n \"Turkey\",\n \"Saudi Arabia\"\n].map((d) => {\n return getCountryLabels([isoQ(d)[0][1]])[0];\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2730,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"countries","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2845,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4102,"value":"places\n .filter((d) => d.properties.ISO_A2 == \"RU\" && d.properties.ADM0CAP != \"1\")\n .sort((a, b) => b.properties.POP2020 - a.properties.POP2020)\n .slice(0, 3)\n .map((d) => d.properties.NAME)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3217,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2863,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2861,"value":"function isoQ(input) {\n for (const country of countryData) {\n if (\n country.name === input ||\n country.ISO2 === input ||\n country.ISO3 === input\n ) {\n const result = { ...country };\n delete result[input];\n if (result) {\n return [[result.name, result.ISO2, result.ISO3]];\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":"countryLabels = getmyCentroid(\n countries.filter((d) => [\"US\"].indexOf(d.properties.ISO_A2) > -1),\n \"NAME_EN\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2848,"value":"function getCountryLabels([iso]) {\n return getmyCentroid(\n countries.filter((d) => iso.indexOf(d.properties.ISO_A2) > -1),\n \"NAME_EN\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3056,"value":"function scaleRange(start, end, breaks) {\n if (breaks < 1) {\n throw new Error(\"Number of breaks must be at least 1\");\n }\n\n const stepSize = (end - start) / (breaks - 1);\n const scaleRange = [];\n\n for (let i = 0; i < breaks; i++) {\n scaleRange.push(start + i * stepSize);\n }\n\n return scaleRange;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3060,"value":"function scaleBreak(start, end, breakValue) {\n if (breakValue <= 0) {\n throw new Error(\"Break value must be greater than 0\");\n }\n\n const scaleRange = [];\n let currentValue = start;\n\n while (currentValue <= end) {\n scaleRange.push(currentValue);\n currentValue += breakValue;\n }\n\n return scaleRange;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3151,"value":"function scaleCircle(vi, vl, rl) {\n if (vi > 1) {\n if (Math.sqrt(vi / vl) * rl > 1) {\n return Math.sqrt(vi / vl) * rl;\n } else {\n return 1;\n }\n } else {\n return 1;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3153,"value":"function osmBbox(bbox) {\n // bbox is in the format [w, s, e, n]\n return [bbox[1], bbox[0], bbox[3], bbox[2]];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3058,"value":"scaleRange(-90, 90, 9)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3065,"value":"scaleBreak(-90, 90, 25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2034,"value":"states = getmyCentroid(\n provinces.filter((d) => d.properties.iso_a2 == \"UA\"),\n \"name\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1421,"value":"provinces","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"countries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2890,"value":"function addOSM(mytarget) {\n var x = 0;\n console.log(mytarget);\n function myLoop() {\n setTimeout(function () {\n var target = mytarget[x];\n queryOverpass(\n \"[out:json][timeout:900];(\" + target + \";);out body;>;out skel qt;\",\n function (err, geojson) {\n if (err) {\n console.log(err);\n } else {\n // console.log(geojson)\n var options = { tolerance: 0.01, highQuality: false };\n var simplified = turf.simplify(\n geojsonrewind(geojson, true),\n options\n );\n return simplified.features;\n }\n }\n );\n x++;\n if (x < mytarget.length) {\n myLoop();\n }\n }, 1000);\n }\n myLoop();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2922,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3143,"value":"/*results = await getOSM(\n \"relation(1657491)(50.7,7.1,50.8,7.25)\",\n \"json\",\n true,\n 0.05\n)*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2906,"value":"// data = await overPass(\"json\", \"node[amenity=cafe](50.7,7.1,50.8,7.25);\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3006,"value":"//https://overpass-api.de/api/interpreter?data=[out:csv(::elements::type)][timeout:900];node[amenity=cafe](31.711374814898388,35.11316299438477,31.829294755049954,35.3536605834961);out:csv;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2954,"value":"way\\[\"highway\"\\]\$50.7,7.1,50.8,7.25\$","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3005,"value":"`https://overpass-api.de/api/interpreter?data=[out:csv(...fields...)][timeout:900];(your_query);out body;`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3004,"value":"async function overPass(format, query, simplified, tolerance) {\n try {\n let api = \"https://overpass-api.de/api/interpreter\";\n let encodedQuery = `[out:${format}][timeout:900];(${query});out;`;\n let url = `${api}?data=${encodedQuery}`;\n console.log(url);\n let response;\n if (format === \"csv\") {\n response = await d3.csv(url);\n } else if (format === \"json\") {\n response = await d3.json(url);\n } else {\n throw new Error(\"Invalid format specified\");\n }\n\n console.log(response); // Process your data here\n return response; // Optionally return the data\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"2","titling":"auto"}} 33:"$32:body"