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; // Point features (lat/lng → circle) 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" ); } // TopoJSON 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" ); } // Single FeatureCollection (one ) if (geometry.type === "FeatureCollection") { return applyStyle( group.append("path").datum(geometry).attr("d", path), style, "path" ); } // Array of features (default) 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) { 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) { 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) { // outer rect (clockwise) + feature (counterclockwise) = hole 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); 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().size([width, height]).tileSet(tileset); if (typeof tiles[t].delta == "number") { slippy = geoTile(tiles[t].delta) .size([width, height]) .tileSet(tileset); } 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}`; } }; } return tileset; } function geoTile(delta) { 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 (_) {}; 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) { let uid = g.attr("id").split("-")[1]; let type = g.attr("id").split("-")[2]; var path = d3.geoPath(p); var tile = g.selectAll("tiles").data(geoTile.tiles()); var enter = tile .enter() .append("image") .attr("class", "tile") .attr("id", function (d) { return "tile-" + type + "-" + uid + "-" + d.key.join("-"); }) .each(function (d) { var k = d.key; var that = this; d.image = new Image(); d.image.crossOrigin = true; var location = { x: k[0], y: k[1], z: k[2] }; d.image.src = source(location); d.image.onload = function () { onload(d, that); }; }); function onload(d, that) { var mercatorCanvas = d3 .create("canvas") .attr("width", tileWidth) .attr("height", tileHeight); var mercatorContext = mercatorCanvas.node().getContext("2d"); mercatorContext.drawImage(d.image, 0, 0, tileWidth, tileHeight); var k = d.key; var tilesAcross = 1 << k[2]; var webMercator = d3 .geoMercator() .scale(tilesAcross / Math.PI / 2) .translate([0, 0]) .center([0, 0]); var reprojectedTileBounds = path.bounds(d), x0 = reprojectedTileBounds[0][0] | 0, y0 = reprojectedTileBounds[0][1] | 0, x1 = (reprojectedTileBounds[1][0] + 1) | 0, y1 = (reprojectedTileBounds[1][1] + 1) | 0; var λ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]; var newCanvas = d3.create("canvas").node(); (newCanvas.width = x1 - x0), (newCanvas.height = y1 - y0); var newContext = newCanvas.getContext("2d"); if (newCanvas.width > 0 && newCanvas.height > 0) { var sourceData = mercatorContext.getImageData( 0, 0, tileWidth, tileHeight ).data, target = newContext.createImageData( newCanvas.width, newCanvas.height ), targetData = target.data; for (var y = y0, i = -1; y < y1; ++y) { for (var x = x0; x < x1; ++x) { var pt = p.invert([x, y]), λ = pt[0], φ = pt[1]; if (λ > λ1 || λ < λ0 || φ > φ1 || φ < φ0) { i += 4; targetData[i] = 0; continue; } var top = ((((tilesAcross + webMercator([0, φ])[1]) * tileHeight) | 0) % 256 | 0) * tileWidth; var q = (((((λ - λ0) / (λ1 - λ0)) * tileWidth) | 0) + top) * 4; let r = sourceData[q]; let g = sourceData[++q]; let b = sourceData[++q]; let a = 255; targetData[++i] = r; targetData[++i] = g; targetData[++i] = b; targetData[++i] = a; } } if (target) newContext.putImageData(target, 0, 0); } d3.select("#" + d3.select(that).attr("id")) .attr("xlink:href", newCanvas.toDataURL(tileMime, tileQuality)) .attr("x", x0) .attr("width", Math.ceil(newCanvas.width) + 1) .attr("height", Math.ceil(newCanvas.height) + 1) .attr("y", y0); } }; 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 : 13; 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; 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); } } 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 }) => { 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); } } ); 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); }); 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()) ); } }); if (!document.getElementById("mapa-styles")) { const s = styles.cloneNode(true); s.id = "mapa-styles"; document.head.appendChild(s); } console.log(this.overlay); 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") { // merge into parent SVG 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})`); if (item.show) inline(item.src, g); }); } return graphic.node(); } }