2e:null 2f:["$","title",null,{"children":"Make A Map - Mapa | Michael Bricknell | Observable"}] 34:T234b,class Mapa { constructor( width, height, projection, fit, rotate, land, lake, custom, color, scale, focus, city, label, tiles ) { this.w = width ? width : 1152; this.h = height ? height : 845; this.proj = projection ? projection : "geoMiller"; this.fit = fit ? fit : { extent: "size", margin: 0, include: [] }; this.rotate = rotate ? rotate : -0.01; this.land = land ? land : { geo: myfeatures_simple, iso: "GID_0", name: "NAME_0" }; this.lake = lake ? lake : mylakes_simple; this.custom = custom ? custom : { show: false, genRoutes: { show: false }, graticule: { step: 10, default: false, show: false, v: [], h: [], east: -35, west: -165, style: { stroke: "red", "stroke-width": 1, opacity: 1, "stroke-dasharray": "none" } } }; this.color = color ? color : { grid: "black", land: colorLand, water: colorWater, background: "#ffffff", border: colorBorder, country: {}, highlight: "red" }; this.scale = scale ? scale : { show: false, topValue: 200, topUnit: "km", bottomValue: 200, bottomUnit: "mi", offset: [120, 50] }; this.focus = focus ? focus : { extent: "world", render: "world", clip: false, clipBuffer: 0 }; this.cities = city ? city : { show: false, data: cities }; this.labels = label ? label : { show: false, country: [] }; this.tiles = tiles ? tiles : { show: false, terrain: false, level: null, type: null }; // this.interactive = interactive ? interactive : false } //other functions get style() { return svg`${juice( makeGraphicSVG( "style", "", cartoSvgEmbed( this.w, this.h, this.proj, { adjust: this.fit.extent, buff: this.fit.margin, fit: this.fit.include }, this.rotate, { geo: this.land.geo, iso: this.land.iso, name: this.land.name }, this.lake, this.custom, { water: this.color.water, grid: this.color.grid, land: this.color.land, border: this.color.border, country: this.color.country, highlight: this.color.highlight, background: this.color.background }, { show: this.scale.show, topValue: this.scale.topValue, topUnit: this.scale.topUnit, bottomValue: this.scale.bottomValue, bottomUnit: this.scale.bottomUnit, offset: this.scale.offset }, this.focus, this.cities, { show: this.labels.show, method: this.labels.method, country: this.labels.country }, this.tiles ), "", "", "", this.w, this.h ).outerHTML )}`; } get projection() { let project = ""; let projection = ""; let filteredFeatures = ""; let filter = ""; let bounds = ""; let clip = null; let image = [this.w, this.h]; let imagesize = ""; if (this.focus.extent == "world") { if (this.fit.extent == "size") { //console.log('2') project = d3[this.proj]() .rotate([this.rotate, 0, 0]) .fitSize([+this.w, +this.h], focusBuffer); bounds = focusBuffer; } else if (this.fit.extent == "extent") { //console.log('3') project = d3[this.proj]() .rotate([this.rotate, 0, 0]) .fitExtent( [ [this.fit.margin, this.fit.margin], [this.w - this.fit.margin, this.h - this.fit.margin] ], countries_simple ); bounds = countries_simple; } else { //console.log('4') project = d3[this.proj]().rotate([this.rotate, 0, 0]); } projection = project; } else if (this.focus.extent == "proj4") { function degreesToRadians(degrees) { return (degrees * Math.PI) / 180; } function radiansToDegrees(radians) { return (radians * 180) / Math.PI; } let projTarget = proj4(this.proj); let project4 = function (lambda, phi) { return projTarget.forward([lambda, phi].map(radiansToDegrees)); }; project4.invert = function (x, y) { return projTarget.inverse([x, y]).map(degreesToRadians); }; project = d3.geoProjection(project4).fitExtent( [ [this.fit.margin, this.fit.margin], [this.w - this.fit.margin, this.h - this.fit.margin] ], this.fit.include ); let n = 10; let p = this.focus.clipBuffer; let clipping = { type: "Polygon", properties: { color: null }, coordinates: [ [ ...Array.from({ length: n }, (_, t) => [ p + ((this.w - p * 2) * t) / n, p ]), ...Array.from({ length: n }, (_, t) => [ this.w - p, ((this.h - p * 2) * t) / n + p ]), ...Array.from({ length: n }, (_, t) => [ p + ((this.w - p * 2) * (n - t)) / n, this.h - p ]), ...Array.from({ length: n }, (_, t) => [ p, ((this.h - p * 2) * (n - t)) / n + p ]), [p, p] ].map((p) => project.invert(p)) ] }; imagesize = [this.w + Math.abs(p * 2), this.h + +Math.abs(p * 2)]; let clipping2 = { type: "Feature", geometry: { type: "Polygon", coordinates: [ clipping.coordinates[0].map(d3.geoRotation(project.rotate())) ] }, properties: { color: null } }; let project2 = d3.geoProjection(project4).fitExtent( [ [this.fit.margin, this.fit.margin], [this.w - this.fit.margin, this.h - this.fit.margin] ], this.fit.include ); bounds = this.fit.include; clip = clipping2; image = imagesize; projection = project2; } else { if (this.fit.extent == "size") { //console.log('6') project = d3[this.proj]() .rotate([this.rotate, 0, 0]) .fitSize( [+this.w, +this.h], turf.bbox(turf.featureCollection(filteredFeatures)) ); } else if (this.fit.extent == "extent") { //console.log('7') project = d3[this.proj]() .rotate([this.rotate, 0, 0]) .fitExtent( [ [this.fit.margin, this.fit.margin], [this.w - this.fit.margin, this.h - this.fit.margin] ], turf.featureCollection(filteredFeatures) ); } else if (this.fit.extent == "usa48") { //console.log('8') project = d3[this.proj]() .rotate([this.rotate, 0, 0]) .fitExtent( [ [this.fit.margin, this.fit.margin], [this.w - this.fit.margin, this.h - this.fit.margin] ], turf.featureCollection(filter) ); } else if (this.fit.extent == "custom") { //console.log('9') if (this.custom.genRoutes.show) { //console.log('routes') filter = state_topo.features.filter( (d) => this.custom.genRoutes.extent.indexOf(d.properties.name_en) > -1 ); } else { //console.log('no routes') filter = state_topo.features.filter( (d) => this.fit.include.indexOf(d.properties.name_en) > -1 ); } //console.log('10') project = d3[this.proj]() .rotate([this.rotate, 0, 0]) .fitExtent( [ [this.fit.margin, this.fit.margin], [this.w - this.fit.margin, this.h - this.fit.margin] ], turf.featureCollection(filter) ); bounds = filter; } else if (this.fit.extent == "bounds") { //console.log('11') project = d3[this.proj]() .rotate([0, 0, 0]) .fitExtent( [ [this.fit.margin, this.fit.margin], [this.w - this.fit.margin, this.h - this.fit.margin] ], this.fit.include ); bounds = this.fit.include; } } return { obj: this, proj: this.proj, bounds: [bounds], clipping: clip, size: image, width: this.w, height: this.h, projection: projection, project: project }; } }35:T12e6,function cartoSvg (w, h, proj, fit, r, land, lakes, colors, poi) { // sorted for svg export layers let sortedFeatures = land.geo.sort((a, b) => d3.descending(encodeURIComponent(a.properties.NAME_0), encodeURIComponent(b.properties.NAME_0))); let sortedLakes = lakes.sort((a, b) => d3.descending(a.properties.name_en, b.properties.name_en)); let project = '' if (poi == 'world') { if (fit['adjust'] == 'size') { project = d3[proj]().rotate([r, 0, 0]).fitSize([+w, +h], focusBuffer) } else if (fit['adjust'] == 'extent') { project = d3[proj]().rotate([r, 0, 0]).fitExtent([[fit['buff'], fit['buff']], [w - fit['buff'], h - fit['buff']]], countries_simple) } else { project = d3[proj]().rotate([r,0, 0]) } } else { const filteredFeatures = land.geo.filter(function(d,i){ if (poi.indexOf(d.properties.NAME_0) > -1){ return d } }) // console.log(turf.bbox(turf.featureCollection(filteredFeatures))) if (fit['adjust'] == 'size') { project = d3[proj]().rotate([r, 0, 0]).fitSize([+w, +h], turf.bbox(turf.featureCollection(filteredFeatures))) } else if (fit['adjust'] == 'extent') { project = d3[proj]().rotate([r, 0, 0]).fitExtent([[fit['buff'], fit['buff']], [w - fit['buff'], h - fit['buff']]], turf.featureCollection(filteredFeatures)) } } // project.preclip(d3.geoClipAntimeridian) // project.preclip(clipPolygon) let gp = d3.geoPath(project) /* sortedFeatures = sortedFeatures.filter(function(d,i){ var b = gp.bounds(d) var bounds = turf.bboxPolygon(turf.bbox(turf.lineString([project.invert(b[0]),project.invert(b[1])]))) var checkbounds = turf.bboxPolygon(turf.bbox(turf.featureCollection(features))) // console.log(turf.booleanIntersects(bounds, checkbounds)) if (turf.booleanIntersects(bounds, checkbounds)){ return d } })*/ // console.log(sortedFeatures) d3.selection.prototype.moveToFront = function () { return this.each(function () { this.parentNode.appendChild(this); }); } const svg = d3.create("svg") .style("display", "block") .attr("id", "map") .attr('preserveAspectRatio', 'xMinYMin meet') .attr('width',w) .attr('height',h) .attr("viewBox", [0, 0, w, h]); const defs = svg.append("defs"); const group = svg.append('g').attr('id', 'group-map') group.append('path') .datum({ type: 'Sphere' }) .attr('class', 'sphere') .attr('id', 'id-sphere') .attr('d', gp) .attr('fill', colors['water']) .attr('stroke', 'none'); group.append('g') .attr('class', 'country-fill') .attr('id', 'id-country-fill') .selectAll('path') .data(sortedFeatures) .enter().append('path') .attr('d', gp) .attr('vector-effect', 'non-scaling-stroke') .attr('stroke-linejoin', 'round') .attr('fill', function(d, i){ if(colors['land']){ return colors['land'] } else{ if (Object.keys(countries).indexOf(d.properties.GID_0) > -1) { return countries[d.properties.GID_0] } else { return '#fffff9' } } }) .attr('stroke-linejoin', 'round') .attr('stroke', colors['border']) .attr('stroke-width', colors['border-width']) .attr('class', 'country') .attr('data-link', function (d, i) { return d.properties.GID_0 }) .attr('id', function (d, i) { return d.properties.NAME_0.toLowerCase().replaceAll(" ","-") }) /* group.append('g') .attr('class', 'country-borders') .attr('id', 'id-country-borders') .selectAll('path') .data(sortedFeatures) .enter().append('path') .attr('d', path) .attr('stroke-linejoin', 'round') .attr('stroke', colorBorder) .attr('fill', 'none') .attr('stroke-width', 0.75) .attr('vector-effect', 'non-scaling-stroke') .attr('id', function (d, i) { return d.properties.NAME_0.replaceAll(" ","-") }) */ group.append('g') .attr('class', 'lakes-borders') .attr('id', 'id-lakes-borders') .selectAll('path') .data(sortedLakes) .enter().append('path') .attr('vector-effect', 'non-scaling-stroke') .attr('stroke-linejoin', 'round') .attr('d', gp) .attr('stroke', colors['border']) .attr('fill', colors['water']) .attr('stroke-width', colors['border-width']) .attr('id', function (d, i) { return d.properties.name_en.toLowerCase().replaceAll(" ","-") }) /* .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut) .on('mousemove', function (event) { handleMouseMove(event) }) */ /*group_a.attr("class", "annotation-group") .call(makeAnnotations)*/ return svg.node(); }36:Td65c,function cartoSvgEmbed( w, h, proj, fit, r, land, lakes, custom, colors, scale, poi, cities, label, tiles ) { const uid = Math.random().toString(36).substr(2, 5); const sortedFeatures = land.geo.sort((a, b) => d3.descending( encodeURIComponent(a.properties.NAME_0), encodeURIComponent(b.properties.NAME_0) ) ); if (tiles == undefined) { tiles = {}; } let centers = {}; let filteredFeatures = ""; let filter = []; const sortedLakes = lakes.sort((a, b) => d3.descending(a.properties.name_en, b.properties.name_en) ); let project = ""; let projRaster = ""; if (!(r instanceof Array)) { r = [r, 0, 0]; } if (poi.extent == "world") { if (fit["adjust"] == "size") { project = d3[proj]() .rotate(r) .fitSize([+w, +h], focusBuffer); } else if (fit["adjust"] == "extent") { project = d3[proj]() .rotate(r) .fitExtent( [ [fit["buff"], fit["buff"]], [w - fit["buff"], h - fit["buff"]] ], countries_simple ); } else { project = d3[proj]().rotate(r); } } else if (poi.extent == "proj4") { function degreesToRadians(degrees) { return (degrees * Math.PI) / 180; } function radiansToDegrees(radians) { return (radians * 180) / Math.PI; } let projTarget = proj4(proj); let project4 = function (lambda, phi) { return projTarget.forward([lambda, phi].map(radiansToDegrees)); }; project4.invert = function (x, y) { return projTarget.inverse([x, y]).map(degreesToRadians); }; //console.log(projTarget, project4,proj,proj4.default) project = d3.geoProjection(project4).fitExtent( [ [fit["buff"], fit["buff"]], [w - fit["buff"], h - fit["buff"]] ], fit["fit"] ); } else { filteredFeatures = land.geo.filter(function (d, i) { if (poi.render != "world") { if (poi.render.indexOf(d.properties[land.iso]) > -1) { return d; } } }); if (fit["adjust"] == "size") { project = d3[proj]() .rotate(r) .fitSize([+w, +h], turf.bbox(turf.featureCollection(filteredFeatures))); } else if (fit["adjust"] == "extent") { project = d3[proj]() .rotate(r) .fitExtent( [ [fit["buff"], fit["buff"]], [w - fit["buff"], h - fit["buff"]] ], turf.featureCollection(filteredFeatures) ); } else if (fit["adjust"] == "usa48") { project = d3[proj]() .rotate(r) .fitExtent( [ [fit["buff"], fit["buff"]], [w - fit["buff"], h - fit["buff"]] ], turf.featureCollection(filter) ); } else if (fit["adjust"] == "custom") { if (custom.genRoutes.show) { //console.log('routes') filter = state_topo.features.filter( (d) => custom.genRoutes.extent.indexOf(d.properties.name_en) > -1 ); } else { //console.log('no routes') filter = state_topo.features.filter( (d) => fit["fit"].indexOf(d.properties.name_en) > -1 ); } project = d3[proj]() .rotate(r) .fitExtent( [ [fit["buff"], fit["buff"]], [w - fit["buff"], h - fit["buff"]] ], turf.featureCollection(filter) ); } else if (fit["adjust"] == "bounds") { //console.log('bounds', fit['fit']) project = d3[proj]() .rotate(r) .fitExtent( [ [fit["buff"], fit["buff"]], [w - fit["buff"], h - fit["buff"]] ], fit["fit"] ); } } projRaster = project; if (poi.clip) { function viewport() { let n = 15; let p = poi.clipBuffer; return { type: "Polygon", coordinates: [ [ ...Array.from({ length: n }, (_, t) => [ p + ((w - p * 2) * t) / n, p ]), ...Array.from({ length: n }, (_, t) => [ w - p, ((h - p * 2) * t) / n + p ]), ...Array.from({ length: n }, (_, t) => [ p + ((w - p * 2) * (n - t)) / n, h - p ]), ...Array.from({ length: n }, (_, t) => [ p, ((h - p * 2) * (n - t)) / n + p ]), [p, p] ].map((p) => project.invert(p)) ] }; } let v = { type: "Polygon", coordinates: [ viewport().coordinates[0].map(d3.geoRotation(project.rotate())) ] }; let clipPolygon = d3.geoClipPolygon(v); //project.preclip(d3.geoClipAntimeridian) project.preclip(clipPolygon); } let gp = d3.geoPath(project); // d3.geoPath().projection(project); ? d3.selection.prototype.moveToFront = function () { return this.each(function () { this.parentNode.appendChild(this); }); }; function wrap(text, width) { text.each(function () { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems y = text.attr("y"), dy = parseFloat(text.attr("dy")), tspan = text .text(null) .append("tspan") .attr("x", 0) .attr("y", y) .attr("dy", dy + "em"); while ((word = words.pop())) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text .append("tspan") .attr("x", 0) .attr("y", y) .attr("dy", `${++lineNumber * lineHeight + dy}em`) .text(word); } } }); } const gm = d3.create("g").attr("id", "mymap"); const gt = d3.create("g").attr("id", "group-tile"); const defs = gm.append("defs"); defs .append("path") .datum({ type: "Sphere" }) .attr("id", "sphere_" + uid) .attr("d", gp); //use land to mask out water? /* defs.append("clipPath") .attr("id", "clipLand_" + uid) .append("use") .attr("xlink:href", "#land_"+ uid); */ defs .append("clipPath") .attr("id", "clip_" + uid) .append("use") .attr("xlink:href", "#sphere_" + uid); /* defs.append("clipPath") .attr("id", "land_" + uid) .append("use") .attr("xlink:href", "#sphere_"+ uid) */ defs .append("clipPath") .attr("id", "myClip_" + uid) .append("rect") .attr("width", w) .attr("height", h); //lowest layer let mytiles = gm.append("g").attr("id", "group-tiles"); let group = ""; //I don'tr remmeber why there are different clipping masks if (poi.extent == "world") { //this is used to clip with a "sphere diecut" group = gm .append("g") .attr("id", "group-map") .attr("clip-path", `url(#clip_${uid})`); } else { //this is used to clip with a "rectangle diecut" group = gm .append("g") .attr("id", "group-map") .attr("clip-path", `url(#myClip_${uid})`); } const gscale = gm.append("g").attr("id", "group-scale"); const gsymbol = gm.append("g").attr("id", "group-use"); const gannotation = gm .append("g") .attr("class", "group-annotation") .attr("clip-path", `url(#myClip_${uid})`); const overlay = gm .append("g") .attr("id", "group-overlay") .attr("clip-path", `url(#myClip_${uid})`); gsymbol .append("defs") .append("marker") .attr("id", "triangle") .attr("viewBox", "0 0 10 10") .attr("refX", "1") .attr("refY", "5") .attr("markerUnits", "strokeWidth") .attr("markerWidth", "10") .attr("markerHeight", "10") .attr("orient", "auto") .append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z"); gsymbol.append("defs") .html(` `); gsymbol .append("defs") .append("g") .attr("id", "iconCity") .append("g") .html( `` ); group .append("g") .attr("id", "id-background") .append("rect") .attr("width", w) .attr("height", h) .attr("fill", colors["background"]); if (tiles.show) { //console.log('this') let raster = mytiles.append("g").attr("id", "id-tiles-" + uid); //loadTiles('id-tiles-'+uid,'hs') //all the tile credit goes to Andrew Reid, 2018 let tileset = ""; if (tiles.type == "uk") { tileset = { type: "tileset", attribution: "", source: function (d) { return ( "https://api.maptiler.com/tiles/uk-osgb1888/" + d.z + "/" + d.x + "/" + d.y + "?key=3MnK8cjFYeRCExoIzTpo" ); } }; } if (tiles.type == "hs") { tileset = { type: "tileset", attribution: "", source: function (d) { return ( "https://api.maptiler.com/tiles/hillshade/" + d.z + "/" + d.x + "/" + d.y + ".webp?key=NnFzE21CFaHwB7PNhdmc" ); } }; } if (tiles.type == "sat") { tileset = { type: "tileset", attribution: "", source: function (d) { return ( "https://api.maptiler.com/tiles/satellite-v2/" + d.z + "/" + d.x + "/" + d.y + ".jpg?key=3MnK8cjFYeRCExoIzTpo" ); } }; } if (tiles.type == "hs1") { tileset = { type: "tileset", attribution: "", source: function (d) { return ( "https://raw.githubusercontent.com/mbrickmaps/tiles/master/convert/" + d.z + "/" + d.x + "/" + ((1 << d.z) - d.y - 1) + ".png" ); } }; } if (tiles.type == "levels") { tileset = { type: "tileset", attribution: "", source: function (d) { return ( "https://raw.githubusercontent.com/mbrickmaps/tiles/master/levels/" + d.z + "/" + d.x + "/" + ((1 << d.z) - d.y - 1) + ".png" ); } }; } ////////////////////////////////// if (tiles.type == "GRAY_HR_SR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/GRAY_HR_SR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "GRAY_HR_SR_OB") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/GRAY_HR_SR_OB/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "GRAY_HR_SR_OB_DR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/GRAY_HR_SR_OB_DR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "GRAY_HR_SR_W") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/GRAY_HR_SR_W/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } //////////////////////////////// if (tiles.type == "HYP_HR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/HYP_HR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "HYP_HR_SR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/HYP_HR_SR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "HYP_HR_SR_OB_DR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/HYP_HR_SR_OB_DR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "HYP_HR_SR_W") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/HYP_HR_SR_W/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "HYP_HR_SR_W_DR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/HYP_HR_SR_W_DR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "NASA_BLUEMARBLE") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/NASA_BLUEMARBLE/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } ///////////////////// if (tiles.type == "NE2_HR_LC") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/NE2_HR_LC/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "NE2_HR_LC_SR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/NE2_HR_LC_SR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "NE2_HR_LC_SR_W") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/NE2_HR_LC_SR_W/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } if (tiles.type == "NE2_HR_LC_SR_W_DR") { tileset = { source: function (d) { return `https://raw.githubusercontent.com/mbrickmaps/tiles/master/NE2_HR_LC_SR_W_DR/${ d.z }/${d.x}/${(1 << d.z) - d.y - 1}.png`; } }; } let slippy = geoTile({ width: w, height: h }).size([w, h]).tileSet(tileset); if (typeof tiles.level == "number") { console.log(tiles.level, typeof tiles.level); slippy = geoTile({ width: w, height: h }, tiles.level) .size([w, h]) .tileSet(tileset); } slippy.projection(projRaster); //var path = d3.geoPath().projection(projection); //let path = d3.geoPath(projRaster) //slippy.fit(mapa.projection.bounds[0]); // convenience method, take a geojson feature. //console.log(slippy) // Apply given the projection: //console.log(slippy.tile) raster.call(slippy.tile); //path = d3.geoPath(projRaster) //path = d3.geoPath().projection(projection); } group .append("g") .append("path") .datum({ type: "Sphere" }) .attr("class", "sphere") .attr("id", "id-sphere") .attr("d", gp) .attr("fill", colors["water"]) .attr("stroke", "none"); if (custom.graticule.default) { group .append("g") .append("path") .datum( d3.geoGraticule().step([custom.graticule.step, custom.graticule.step]) ) .attr("d", gp) .attr("stroke", colors["grid"]) .attr("fill", "none"); } group .append("g") .attr("class", "country-fill") .attr("id", "id-country-fill") .selectAll("path") .data(sortedFeatures) .enter() .append("path") .attr("d", gp) .attr("vector-effect", "non-scaling-stroke") .attr("stroke-linejoin", "round") .attr("fill", function (d, i) { let color = colors["land"]; if (poi.extent == "world") { if ("country" in colors) { if ( Object.keys(colors["country"]).indexOf(d.properties[land.iso]) > -1 ) { color = colors["country"][d.properties[land.iso]]; } } else { color = colors["land"]; } } else { //console.log(poi.extent, d.properties[land.iso]) if (poi.extent.indexOf(d.properties[land.iso]) > -1) { //console.log(colors, land.name) if ( Object.keys(colors["country"]).indexOf(d.properties[land.iso]) > -1 ) { color = colors["country"][d.properties[land.iso]]; } else { color = colors["highlight"]; } } else { color = colors["land"]; } } return color; }) .attr("class", "country") .attr("data-link", function (d, i) { return d.properties[land.iso]; }) .attr("id", function (d, i) { if (d.properties[land.iso]) { return d.properties[land.name].toLowerCase().replaceAll(" ", "-"); } }) .append("title") .text(function (d, i) { if (d.properties[land.iso]) { return d.properties[land.name]; } }); /* group.append('g') .attr('class', 'land-outline') .attr('id', 'id-land-outline') .selectAll('path') .data(sortedLakes) .enter().append('path') .attr('d', gp) .attr('fill', 'red') */ group .append("g") .attr("class", "lakes-borders") .attr("id", "id-lakes-borders") .selectAll("path") .data(sortedLakes) .enter() .append("path") .attr("stroke-linejoin", "round") .attr("d", gp) .attr("stroke", colors["border"]) .attr("fill", colors["water"]) .attr("stroke-width", 0.75) .attr("id", function (d, i) { if (d.properties.name_en) { return d.properties.name_en.toLowerCase().replaceAll(" ", "-"); } }) .append("title") .text(function (d, i) { if (d.properties.name_en) { return d.properties.name_en; } }); let regionLabels = []; let pathLabels = []; if (custom.show) { let wregionsName = []; let wregionsID = []; let lregionsName = []; let aregionsName = []; let aregionsCountry = []; let histRegion = []; let histName = []; let geoRegion = []; let geoName = []; if (custom.addCustom.show) { //console.log(custom) let topo = custom.addCustom.geom ? custom.addCustom.geom : custom_topo; let color = "none"; topo.forEach(function (d, i) { if (!d.properties.color) { let color = custom.addCustom.style.fill; } else { color = d.properties.color; } if (d.properties.color === "light-yellow") { color = "#D8CCAF"; } if (d.properties.color === "yellow") { color = "#F0B061"; } if (d.properties.color === "red") { color = "#EF7564"; } if (d.properties.color === "blue") { color = "#73B2B2"; } if (d.properties.color === "green") { color = "#8CB574"; } if (d.properties.color === "purple") { color = "#B27495"; } //console.log(d.geometry.type) if (custom.addCustom.type == "polygon") { new Layer( [d], { fill: custom.addCustom.style.fill ? custom.addCustom.style.fill : color, stroke: custom.addCustom.style.stroke ? custom.addCustom.style.stroke : "black", "stroke-width": custom.addCustom.style["stroke-width"] ? custom.addCustom.style["stroke-width"] : 1, opacity: 1 }, null, null, group, gp ).add; } else if (custom.addCustom.type == "polyline") { new Layer( [d], { fill: "none", stroke: custom.addCustom.style.stroke ? custom.addCustom.style.stroke : "black", "stroke-width": custom.addCustom.style["stroke-width"] ? custom.addCustom.style["stroke-width"] : 1, opacity: 1 }, null, null, group, gp ).add; } else { new Layer( [d], { fill: color ? color : custom.addCustom.style.fill, stroke: custom.addCustom.style.stroke ? custom.addCustom.style.stroke : "black", "stroke-width": custom.addCustom.style["stroke-width"] ? custom.addCustom.style["stroke-width"] : 0.5, opacity: 1 }, null, null, group, gp ).add; } }); } if (custom.addCustomLayers) { //console.log(custom) for (let x in custom.addCustomLayers.layers) { let topo = custom.addCustomLayers.layers[x].geom ? custom.addCustomLayers.layers[x].geom : custom_topo; let color = "none"; console.log(topo); topo.forEach(function (d, i) { if (!d.properties.color) { let color = custom.addCustomLayers.layers[x].style.fill; } else { color = d.properties.color; } if (d.properties.color === "light-yellow") { color = "#D8CCAF"; } if (d.properties.color === "yellow") { color = "#F0B061"; } if (d.properties.color === "red") { color = "#EF7564"; } if (d.properties.color === "blue") { color = "#73B2B2"; } if (d.properties.color === "green") { color = "#8CB574"; } if (d.properties.color === "purple") { color = "#B27495"; } //console.log(d.geometry.type) if (custom.addCustomLayers.layers[x].type == "polygon") { new Layer( [d], { fill: custom.addCustomLayers.layers[x].style.fill ? custom.addCustomLayers.layers[x].style.fill : color, stroke: custom.addCustomLayers.layers[x].style.stroke ? custom.addCustomLayers.layers[x].style.stroke : "black", "stroke-width": custom.addCustomLayers.layers[x].style[ "stroke-width" ] ? custom.addCustomLayers.layers[x].style["stroke-width"] : 1, opacity: custom.addCustomLayers.layers[x].style["fill-opacity"] ? custom.addCustomLayers.layers[x].style["fill-opacity"] : 1 }, null, null, group, gp ).add; } else if (custom.addCustomLayers.layers[x].type == "polyline") { new Layer( [d], { fill: "none", stroke: custom.addCustomLayers.layers[x].style.stroke ? custom.addCustomLayers.layers[x].style.stroke : "black", "stroke-width": custom.addCustomLayers.layers[x].style[ "stroke-width" ] ? custom.addCustomLayers.layers[x].style["stroke-width"] : 1, opacity: 1 }, null, null, group, gp ).add; } else { new Layer( [d], { fill: color ? color : custom.addCustomLayers.layers[x].style.fill, stroke: custom.addCustomLayers.layers[x].style.stroke ? custom.addCustomLayers.layers[x].style.stroke : "black", "stroke-width": custom.addCustomLayers.layers[x].style[ "stroke-width" ] ? custom.addCustomLayers.layers[x].style["stroke-width"] : 0.5, opacity: 1 }, null, null, group, gp ).add; } }); } } //landRegionID,landRegionName, marineRegionID, marineRegionName, adminRegionName, adminRegionGroup // console.log((custom.landRegion.length > 0),(custom.waterRegion.length > 0)) if (custom.landRegionName) { lregionsName = regions_land_topo.features.filter(function (d, i) { if (custom.landRegionName.name.indexOf(d.properties.name_en) > -1) { return d; } }); if (custom.landRegionName.label) { lregionsName.forEach(function (d, i) { // var c = project(polylabel(d.geometry.coordinates,1.0)) var c = gp.centroid(d); regionLabels.push({ x: c[0], y: c[1], label: d.properties.name_en, style: "v-text-land" }); }); } let landStyle = custom.landRegionName.style ? custom.landRegionName.style : null; new Layer(lregionsName, landStyle, null, null, group, gp).add; } if (custom.marineRegionID) { wregionsID = regions_marine_topo.features.filter(function (d, i) { if (custom.marineRegionName.id.indexOf(d.properties.ne_id) > -1) { return d; } }); if (custom.marineRegionID.label) { wregionsID.forEach(function (d, i) { var c = project(polylabel(d.geometry.coordinates, 1.0)); regionLabels.push({ x: c[0], y: c[1], label: d.properties.name_en, style: "v-text-water" }); }); } let marineStyle = custom.marineRegionName.style ? custom.marineRegionName.style : null; new Layer(wregionsName, marineStyle, null, null, group, gp).add; } if (custom.marineRegionName) { wregionsName = regions_marine_topo.features.filter(function (d, i) { if (custom.marineRegionName.name.indexOf(d.properties.name_en) > -1) { return d; } }); if (custom.marineRegionName.label) { wregionsName.forEach(function (d, i) { var c = gp.centroid(d); //project(polylabel(d.geometry.coordinates,1.0)) regionLabels.push({ x: c[0], y: c[1], label: d.properties.name_en, style: "v-text-water" }); }); } let marineStyle = custom.marineRegionName.style ? custom.marineRegionName.style : null; new Layer(wregionsName, marineStyle, null, null, group, gp).add; } if (custom.adminRegionName) { aregionsName = state_topo.features.filter(function (d, i) { if (custom.adminRegionName.name.indexOf(d.properties.name_en) > -1) { return d; } }); if (custom.adminRegionName.label) { aregionsName.forEach(function (d, i) { var c = project(polylabel(d.geometry.coordinates, 1.0)); regionLabels.push({ x: c[0], y: c[1], label: d.properties.name_en, style: "v-text-region" }); }); } let adminStyle = custom.adminRegionName.style ? custom.adminRegionName.style : null; new Layer(aregionsName, adminStyle, null, null, group, gp).add; } if (custom.adminRegionCountry) { aregionsCountry = state_topo.features.filter(function (d, i) { if (custom.adminRegionCountry.name.indexOf(d.properties.admin) > -1) { return d; } }); if (custom.adminRegionCountry.label) { aregionsCountry.forEach(function (d, i) { var c = project(polylabel(d.geometry.coordinates, 1.0)); regionLabels.push({ x: c[0], y: c[1], label: d.properties.name_en, style: "v-text-province" }); }); } let regionStyle = custom.adminRegionCountry.style ? custom.adminRegionCountry.style : null; new Layer(aregionsCountry, regionStyle, null, null, group, gp).add; } if (custom.genRoutes.show) { let first = []; let labelpos = []; custom.genRoutes.ids.forEach(function (d, i1) { geoName = hist_topo.features.filter(function (d, i2) { if (custom.genRoutes.ids[i1].indexOf(d.properties.ID_NUM) > -1) { return d; } }); let mid = []; let p = []; custom.genRoutes.ids[i1].forEach(function (d1, i) { //console.log(d,i) let tar = geoName.filter(function (d2, i) { if (d2.properties.ID_NUM == d1) { return d1; } }); p.push(turf.center(tar[0]).geometry.coordinates); }); first.push(p.slice()); let distance = 0; //measure distance between points p.forEach(function (d, i, array) { if (i !== array.length - 1) { //console.log(i) let from = turf.point(p[i]); let to = turf.point(p[i + 1]); let dist = turf.distance(from, to, { units: "miles" }); let l = turf.lineString([p[i], p[i + 1]]); //console.log(dist) //path of first half mid.push( turf.lineChunk(l, dist / 2, { units: "miles" }).features[0] ); //path of second half mid.push( turf.lineChunk(l, dist / 2, { units: "miles" }).features[1] ); labelpos.push( turf.lineChunk(l, dist / 2, { units: "miles" }).features[0] ); distance += dist; } //turf.lineChunk([p], 15, {units: 'miles'}) }); //console.log(first) //let chunk = turf.lineChunk([p], 15, {units: 'miles'}); let multiLine = turf.featureCollection(mid); //let multiLine = turf.multiLineString([p]); let lineStyle = custom.genRoutes.style ? custom.genRoutes.style : null; if (custom.genRoutes.colors) { //console.log(lineStyle) lineStyle.stroke = custom.genRoutes.colors[i1]; lineStyle.color = custom.genRoutes.colors[i1]; } gm.append("defs") .append("marker") .attr("id", "triangle_" + custom.genRoutes.colors[i1]) .attr("viewBox", "0 0 10 10") .attr("refX", "1") .attr("refY", "5") .attr("markerUnits", "strokeWidth") .attr("markerWidth", "10") .attr("markerHeight", "10") .attr("orient", "auto") .append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("fill", custom.genRoutes.colors[i1]); new Layer( [multiLine], lineStyle, null, null, group, gp, "#triangle_" + custom.genRoutes.colors[i1] ).add; }); if (custom.genRoutes.label) { let p = []; //console.log(mid) custom.genRoutes.labels.forEach(function (d, i) { //console.log(i,labelpos) pathLabels.push({ x: project(first[i][0])[0], y: project(first[i][0])[1], label: d, style: "v-text-province", anchor: "middle" }); }); //console.log(pathLabels) addGenLabels(pathLabels); } } if (custom.histRegionName) { histName = hist_topo.features.filter(function (d, i) { if (custom.histRegionName.name.indexOf(d.properties.ID_NUM) > -1) { return d; } }); let adminStyle = custom.histRegionName.style ? custom.histRegionName.style : null; new Layer(histName, adminStyle, null, null, group, gp).add; } if (custom.addDisputed.show) { var stroke = custom.addDisputed.style.stroke ? custom.addDisputed.style.stroke : "#dedede"; var strokewidth = custom.addDisputed.style["stroke-width"] ? custom.addDisputed.style["stroke-width"] : "1"; var strokedasharray = custom.addDisputed.style["stroke-dash-array"] ? custom.addDisputed.style["stroke-dash-array"] : ""; new Layer( disputed_topo, { fill: "none", "stroke-dasharray": strokedasharray, stroke: stroke, "stroke-width": strokewidth, opacity: 1 }, null, null, group, gp ).add; } if (custom.graticule.show) { var stroke = custom.graticule.style.stroke ? custom.graticule.style.stroke : "#dedede"; var strokewidth = custom.graticule.style["stroke-width"] ? custom.graticule.style["stroke-width"] : "1"; var strokedasharray = custom.graticule.style["stroke-dash-array"] ? custom.graticule.style["stroke-dash-array"] : ""; let g = []; let x = []; let y = []; if (custom.graticule.h.length > 0) { let start = custom.graticule.east; let end = custom.graticule.west; let l = Math.abs(Math.abs(start) - Math.abs(end)); let a = Array.from({ length: l }, (v, k) => k + 1); for (let h in custom.graticule.h) { let c = custom.graticule.h[h]; let a1 = a.map((x) => [-(x + Math.abs(start)), c]); x.push({ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: a1 } }); } //{type: 'Feature', geometry: {type: 'LineString', coordinates: [[0.1278, 51.5074], [-74.0059, 40.7128]]}} } if (custom.graticule.v.length > 0) { //-80,80 for (let v in custom.graticule.v) { y.push({ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: [ [custom.graticule.v[v], -90], [custom.graticule.v[v], 90] ] } }); } } let lines = [].concat(y, x); g.push({ type: "FeatureCollection", features: lines }); new Layer( [g[0]], { fill: "none", "stroke-dasharray": strokedasharray, stroke: stroke, "stroke-width": strokewidth, opacity: 1 }, null, null, overlay, gp ).add; } } // end custom show let labels = []; sortedFeatures .filter((d) => label.country.indexOf(d.properties[land.name]) > -1) .forEach(function (d, i) { //console.log(d.properties.NAME_0, d) var c; if (d.geometry) { let lengths = d.geometry.coordinates.map(function (a) { return a[0].length; }); if (d.geometry.type) { if (d.geometry.type == "MultiPolygon") { if (label.method === "polylabel") { c = project( polylabel( d.geometry.coordinates[ lengths.indexOf(Math.max.apply(Math, lengths)) ], 1.0 ) ); } if (label.method === "centroid") { c = gp.centroid(d); } //console.log('that',c) } else { if (label.method === "polylabel") { c = project(polylabel(d.geometry.coordinates, 1.0)); } if (label.method === "centroid") { c = gp.centroid(d); } //console.log('this',c) } } } else { c = gp.centroid(d); } var style = ""; if (poi.extent.indexOf(d.properties[land.iso]) > -1) { style = "v-text-focal-country"; } else { style = "v-text-nonfocal-country"; } labels.push({ x: c[0], y: c[1], label: d.properties[land.name].toUpperCase(), style: style }); }); function addGenLabels(labels) { //console.log(labels) gannotation .selectAll(".place-label") .data(labels) .enter() .append("text") .text(function (d, i) { return d.label; }) .attr("class", function (d, i) { return d.style; }) .attr("text-anchor", function (d, i) { return d.anchor; }) .attr("transform", "translate(0, 6.5)") .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }); } function addCountryLabels(labels) { gannotation .selectAll(".place-label") .data(labels) .enter() .append("text") .text(function (d, i) { return d.label; }) .attr("class", function (d, i) { return d.style; }) .attr("text-anchor", "middle") .attr("transform", "translate(0, 6.5)") .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }); } function addRegionLabels(labels) { gannotation .selectAll(".place-label") .data(labels) .enter() .append("text") .text(function (d, i) { return d.label; }) .attr("class", function (d, i) { return d.style; }) .attr("text-anchor", "middle") .attr("transform", "translate(0, 6.5)") .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }); // gannotation.enter().selectAll('text.v-text-water').call(wrap, 175) } if (label.show) { addCountryLabels(labels); addRegionLabels(regionLabels); } // console.log(d3.select('#group-scale').node().getBBox()) if (scale.show) { const mapUnits = { km: d3.geoScaleKilometers, mi: d3.geoScaleMiles, ft: d3.geoScaleFeet, m: d3.geoScaleMeters }; const mapScale = gscale .append("g") .attr("id", "mapScale") .attr( "transform", `translate(${w - scale.offset[0]}, ${h - scale.offset[1]})` ); var stop = 0; var sleft = 0; const scaleBarTop = d3 .geoScaleBar() .projection(project) .size([w, h]) .orient(d3.geoScaleTop) .units(mapUnits[scale.topUnit]) .distance(scale.topValue) .left(sleft) .top(stop) .label(null) .tickPadding(3) // How far the tick text labels are from the lines .tickFormat((d, i, e) => i === e.length - 1 ? `${d} ${scale.topUnit}` : d ) .tickValues([0, scale.topValue]); const scaleBarBottom = d3 .geoScaleBar() .projection(project) .size([w, h]) .units(mapUnits[scale.bottomUnit]) // Other options are d3.geoScaleFeet, d3.geoScaleKilometers, and d3.geoScaleMeters .orient(d3.geoScaleBottom) .distance(scale.bottomValue) .left(sleft) .top(stop) .label(null) .tickPadding(3) // How far the tick text labels are from the lines .tickFormat((d, i, e) => i === e.length - 1 ? `${d} ${scale.bottomUnit}` : d ) .tickValues([0, scale.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(); 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", 14); 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); } function addPoints(data) { //Latitude is the Y axis, longitude is the X axis. //longitude (x) can be -180 to +180 //latitude (y) can be -90 to +90 if (data[0].name !== "") { var z = ""; //default var labelClass = "v-text-contextual-city"; var anchorPoint = "start"; let unit = 0; var dx = 0; var dy = 0; for (z in data) { if (data[z].x && data[z].y) { data[z].lng = data[z].x; data[z].lat = data[z].y; } if (data[z].latlng) { data[z].lng = data[z].latlng.split(",")[0].trim(); data[z].lat = data[z].latlng.split(",")[1].trim(); } if (data[z].name.length > 0) { unit = 4; let symbol = ""; let shape = data[z].shape ? data[z].shape : "circle"; let adjustLabel = data[z].dir.indexOf("-") > -1 ? true : false; let dir = data[z].dir.trim().split("-")[0]; let type = data[z].type.trim(); if (["city1", "capital", "Admin-0 capital"].indexOf(type) > -1) { labelClass = "v-text-capital-city"; symbol = "#iconStar"; } if (["city2", "focal", "Admin-1 capital"].indexOf(type) > -1) { labelClass = "v-text-focal-city"; symbol = "#iconCity"; } if (["city3", "context", "Populated place"].indexOf(type) > -1) { labelClass = "v-text-contextual-city"; symbol = "#iconCity"; } if (["custom"].indexOf(type) > -1) { shape = data[z].shape ? data[z].shape : "circle"; } else { labelClass = "v-text-contextual-city"; } if (adjustLabel) { unit = data[z].dir.split("-")[1]; } //console.log(dir, adjustLabel,unit) if (["N"].indexOf(dir) > -1) { anchorPoint = "middle"; dx = 0; dy = -unit * 2; } if (["NE"].indexOf(dir) > -1) { anchorPoint = "start"; dx = unit + 5; dy = -unit; } if (["E"].indexOf(dir) > -1) { anchorPoint = "start"; dx = unit + 5; dy = 4; } if (["SE"].indexOf(dir) > -1) { anchorPoint = "start"; dx = unit + 5; dy = unit * 3; } if (["S"].indexOf(dir) > -1) { anchorPoint = "middle"; dx = 0; dy = unit * 3 + 3; } if (["SW"].indexOf(dir) > -1) { anchorPoint = "end"; dx = -unit - 5; dy = unit * 3; } if (["W"].indexOf(dir) > -1) { anchorPoint = "end"; dx = -unit - 5; dy = 4; } if (["NW"].indexOf(dir) > -1) { anchorPoint = "end"; dx = -unit - 5; dy = -unit; } let groupText = gannotation.append("g").attr("id", data[z].dir); groupText .append("text") .attr("id", `${data[z].dir}${z}`) .attr("class", labelClass) .attr("text-anchor", anchorPoint) .text(data[z].name) .attr("transform", `translate(${dx}, ${dy})`) // .attr("dx", dx) // .attr("dy", dy) .attr( "x", (function () { return project([data[z].lat, data[z].lng])[0]; })() ) .attr( "y", (function () { return project([data[z].lat, data[z].lng])[1]; })() ); if (symbol == "") { if (shape == "circle") { groupText .append("circle") .attr("r", data[z].size ? data[z].size : 5) .attr("fill", data[z].color ? data[z].color : "#412c26") .attr("stroke", data[z].stroke ? data[z].stroke : "none") .attr( "stroke-width", data[z]["stroke-width"] ? data[z]["stroke-width"] : 0 ) .attr("opacity", data[z].opacity ? data[z].opacity : 1) .attr( "cx", (function () { return project([data[z].lat, data[z].lng])[0]; })() ) .attr( "cy", (function () { return project([data[z].lat, data[z].lng])[1]; })() ); } if (shape == "square") { let customIcon = d3 .symbol() .type(d3.symbolSquare) .size(data[z].size ? data[z].size : 5)(); groupText .append("path") .attr("d", customIcon) .attr("fill", data[z].color ? data[z].color : "#412c26") .attr("stroke", data[z].stroke ? data[z].stroke : "none") .attr( "stroke-width", data[z]["stroke-width"] ? data[z]["stroke-width"] : 0 ) .attr("opacity", data[z].opacity ? data[z].opacity : 1) .attr( "transform", `translate(${project([data[z].lat, data[z].lng])[0]},${ project([data[z].lat, data[z].lng])[1] })` ); } if (shape == "triangle") { let customIcon = d3 .symbol() .type(d3.symbolTriangle) .size(data[z].size ? data[z].size : 5)(); groupText .append("path") .attr("d", customIcon) .attr("fill", data[z].color ? data[z].color : "#412c26") .attr("stroke", data[z].stroke ? data[z].stroke : "none") .attr( "stroke-width", data[z]["stroke-width"] ? data[z]["stroke-width"] : 0 ) .attr("opacity", data[z].opacity ? data[z].opacity : 1) .attr( "transform", `translate(${project([data[z].lat, data[z].lng])[0]},${ project([data[z].lat, data[z].lng])[1] })` ); } if (shape == "cross") { let customIcon = d3 .symbol() .type(d3.symbolCross) .size(data[z].size ? data[z].size : 5)(); groupText .append("path") .attr("d", customIcon) .attr("fill", data[z].color ? data[z].color : "#412c26") .attr("stroke", data[z].stroke ? data[z].stroke : "none") .attr( "stroke-width", data[z]["stroke-width"] ? data[z]["stroke-width"] : 0 ) .attr("opacity", data[z].opacity ? data[z].opacity : 1) .attr( "transform", `translate(${project([data[z].lat, data[z].lng])[0]},${ project([data[z].lat, data[z].lng])[1] })` ); } if (shape == "diamond") { let customIcon = d3 .symbol() .type(d3.symbolDiamond) .size(data[z].size ? data[z].size : 5)(); groupText .append("path") .attr("d", customIcon) .attr("fill", data[z].color ? data[z].color : "#412c26") .attr("stroke", data[z].stroke ? data[z].stroke : "none") .attr( "stroke-width", data[z]["stroke-width"] ? data[z]["stroke-width"] : 0 ) .attr("opacity", data[z].opacity ? data[z].opacity : 1) .attr( "transform", `translate(${project([data[z].lat, data[z].lng])[0]},${ project([data[z].lat, data[z].lng])[1] })` ); } if (shape == "star") { let customIcon = d3 .symbol() .type(d3.symbolStar) .size(data[z].size ? data[z].size : 5)(); groupText .append("path") .attr("d", customIcon) .attr("fill", data[z].color ? data[z].color : "#412c26") .attr("stroke", data[z].stroke ? data[z].stroke : "none") .attr( "stroke-width", data[z]["stroke-width"] ? data[z]["stroke-width"] : 0 ) .attr("opacity", data[z].opacity ? data[z].opacity : 1) .attr( "transform", `translate(${project([data[z].lat, data[z].lng])[0]},${ project([data[z].lat, data[z].lng])[1] })` ); } if (shape == "wye") { let customIcon = d3 .symbol() .type(d3.symbolWye) .size(data[z].size ? data[z].size : 5)(); groupText .append("path") .attr("d", customIcon) .attr("fill", data[z].color ? data[z].color : "#412c26") .attr("stroke", data[z].stroke ? data[z].stroke : "none") .attr( "stroke-width", data[z]["stroke-width"] ? data[z]["stroke-width"] : 0 ) .attr("opacity", data[z].opacity ? data[z].opacity : 1) .attr( "transform", `translate(${project([data[z].lat, data[z].lng])[0]},${ project([data[z].lat, data[z].lng])[1] })` ); } } else { groupText .append("use") .attr("href", symbol) .attr( "x", (function () { return project([data[z].lat, data[z].lng])[0]; })() ) .attr( "y", (function () { return project([data[z].lat, data[z].lng])[1]; })() ) .attr("transform", "translate(-7.5,-7.5)"); } } if (data[z].leader) { let tar = d3.select("text#" + `${data[z].dir}${z}`).node(); let w = tar.getBBox().width; let h = tar.getBBox().height; let x1 = tar.getBBox().x + tar.getCTM().e / tar.getCTM().a; let y1 = tar.getBBox().y + tar.getCTM().f / tar.getCTM().d; let x3 = tar.getBBox().x + tar.getCTM().e / tar.getCTM().a + w; let y3 = tar.getBBox().y + tar.getCTM().f / tar.getCTM().d + h; let aNW = [x1, y1]; let aNE = [x3, y1]; let aSW = [x1, y3]; let aSE = [x3, y3]; let aN = [(x1 + x3) / 2, y1]; let aE = [x3, (y3 + y1) / 2]; let aS = [(x1 + x3) / 2, y3]; let aW = [x1, (y3 + y1) / 2]; function getAnchor(dir) { dir = dir.split("-")[0] ? dir.split("-")[0] : dir; let anchor = [0, 0]; switch (dir) { case "NW": anchor = aSE; break; case "N": anchor = aS; break; case "NE": anchor = aSW; break; case "E": anchor = aW; break; case "SE": anchor = aNW; break; case "S": anchor = aN; break; case "SW": anchor = aNE; break; case "W": anchor = aE; break; } return anchor; } //console.log(tar.getBBox()) gannotation .append("line") .attr("y1", project([data[z].lat, data[z].lng])[1]) .attr("y2", getAnchor(data[z].dir)[1]) .attr("x1", project([data[z].lat, data[z].lng])[0]) .attr("x2", getAnchor(data[z].dir)[0]) .attr("stroke", "#999"); } } } else { // console.log('nothing here') } } if (cities.show) { addPoints(cities.data); } function addCenters() { var y; for (y in centers) { gannotation .append("g") .append("circle") .attr("r", 3) .attr("fill", "green") .attr( "cx", project([centers[y].centerofmass[0], centers[y].centerofmass[1]])[0] ) .attr( "cy", project([centers[y].centerofmass[0], centers[y].centerofmass[1]])[1] ); } } group .append("g") .attr("class", "country-border") .attr("id", "id-country-border") .selectAll("path") .data(sortedFeatures) .enter() .append("path") .attr("d", gp) .attr("vector-effect", "non-scaling-stroke") .attr("fill", "none") .attr("stroke-linejoin", "round") .attr("stroke", colors["border"]) .attr("stroke-width", 0.75); group .append("g") .append("path") .datum({ type: "Sphere" }) .attr("class", "sphere") .attr("id", "id-sphere-outline") .attr("d", gp) .attr("fill", "none") .attr("stroke", "#808080"); return gm.node(); }37:T181d,carto = new Mapa( 680, //width 440, //height 'geoMercator', //projection support proj4 def or most d3 geo projection { extent:"extent", /* refered to as 'fit' in my code, options can be usa48, bounds, custom, size, extent (usa48 predefined extent, bounds , custom uses bounder from above) ie "size" uses .fitSize([+this.w, +this.h], focusBuffer) will fit the width and height of the map to the geojson bounding box given using a FeatureCollection polygon feature ie "extent" uses .fitExtent([[this.fit.margin, this.fit.margin],[this.w - this.fit.margin, this.h - this.fit.margin]], countries_simple) will fit to the extent of the filtered countries with an optional margin. "usa48" - uses fitExtent using a prefiltered geojson to the lower48 of the US "custom" - uses only state or provience names as bounding boxes used the state_topo layer, mainly used for states in the US or areas in the UK for geneaology. "bounds" - used fitExtent and bounder */ margin:50, // postive or negative values to add or reduce viewport padding include: null // where the bounding box [] goes for "bounds" }, 0, //map rotation null, /* default land geojson is generalized, however can remapped another json. using {'geo':myfeatures_simple, 'iso':'GID_0', 'name':'NAME_0'} where myfeatures_simple is an array of features. The other settings need to know what the iso or similar unique key and what the nameing attribute should be when using labeling, the labels need to be spelled as they are listed in this column if they are to be labeled correctly using the section country: ['Brazil'] below. */ null, // default lakes an array of features could be anything. { show:false, // this section is for highlighting state(s), or country(ries), disputed regions, marine regions, or land mass regions, also adding a custom graticule or lines at specific x, y. set to true to toggle addCustom:{ // can add custom polygon (fill), polyline (no fill), or neither for both (border and fill) and custom coloring, geom can have custom coloring defined the geojson with a column called color ('yellow','light-yellow','red','blue','green','purple', or hex code, or color html alias) show:false, geom:null, style:{ fill:'red', stroke:'blue', 'stroke-width':0.5 }, type:'polyline' }, genRoutes:{ //only used for geneaology for showing paths... see https://observablehq.com/@mbrickmaps/genealogy-migration-map show:false, extent:['Missouri', 'Louisiana','Virginia'], //overrides extent custom from above? labels:['Family1','Family2'], ids: [], //family1 = [15933, 15899, 16481, 15899, 9983, 4303, 3665, 1441, 6042, 12154, 5774, 15403, 6821, 8345], family2 = [6449, 6451, 5325, 5117, 5791, 5774], routes= [family1, family2] these are uids for historical counties data set from NHGIS //overrides color // colors of routes colors: ['blue', 'red'], // customize colors of each line symbols? //colors: null //default style style:{ fill: 'none', stroke: 'red' }, label: false // will use labels from above }, histRegionName:{ name: [], // will highlight regions as listed above in ids and label them. style:{ fill: 'pink', stroke: 'red' }, label: true }, adminRegionName:{ //add a singular state or provice by its name name:['Missouri'], style:{ fill:'orange', stroke:'white' }, label:false }, adminRegionCountry:{ // add all states and provices by country name name:['United States of America'], style:{ fill:'none', stroke:'gray', 'stroke-width':1, opacity:1 }, label:false}, marineRegionName:{ //add body of water highlight and label name:[], style:{ fill:'none', stroke:'blue' , 'stroke-width':0, opacity:0 }, label:true }, landRegionName:{ // add land mass label and highlight name:[], style:null, label:false }, addDisputed:{ // add disputed territory lines and customize dash array show:false, style:{ 'stroke-width':1, stroke:'red', 'stroke-dash-array':'0' } }, graticule:{ // add 'straight lines at specifc intervals as listed in the array for horizontal or vertical and a specific style' show:false,h:[38,36],v:[],east:0,west:-361,style:{stroke:'red' ,'stroke-width':1, 'stroke-dasharray':'none'} }, terrain:{ clip:false } }, // end of custom layers (this section was for highlighting state(s), or country(ries), disputed regions, marine regions, or land mass regions, also adding a custom graticule) { // global settings simple compared to previous section was is much more customizable land : colorLand, water : colorWater, border : colorBorder, highlight : colorLand, // used below in the extent setting to highlight them country : { } //specify individual country colors based on iso as the key "USA":"blue" not used in the exent below, but an override of all other settings. }, { // add a scale bar show : false, topValue : 250, topUnit :'km', // supports ft, m, mi, km? bottomValue : 250, bottomUnit : 'mi', offset : [680-40, 50] }, { extent : [], //highlights all the same color and used for using focal country label render : ['SLV','VEN','BRA'] , //sets the extent if using extent from above extent:"extent" clip:true, //turns on clipping of map vector outside of viewport clipBuffer:0 // positve or negative buffer to clip outside of the viewport }, { show : false, //dots, cities, markers, custom points and labeling cardinal directions etc. data : [] //{name:' ',lng:51.711952, lat:36.315112,dir:'NE',color:'#bd3823',size: 64, type:'custom', shape:'triangle'} type is city('circle') or custom d3.shape. label is name attribute or blank if no label }, { // countries to label method:'polylabel', show : true, country:[] //spelled out correctly to match the source })38:T541,{ await visibility; return new Mapa( 500, 400, "+proj=eqdc +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", //+x_0=0 +y_0=0 //+proj=cea +lon_0=3.0322266 +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs { ...demoSettings.bounds, ...{ extent: "proj4", margin: -50, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [109.44, 14.05985666617488], [109.44, 59.792852411381496], [169.2, 59.792852411381496], [169.2, 14.05985666617488], [109.44, 14.05985666617488] ] ] } } //include: {type:"Feature",geometry:{type:"Polygon", coordinates:[[[-19.112139365514206,-10.665520058587184],[-19.112139365514206,16.735764490040015],[18.51921874418869,16.735764490040015],[18.51921874418869,-10.665520058587184],[-19.112139365514206,-10.665520058587184]]]}} } }, 0, null, null, { ...demoSettings.custom }, { ...demoSettings.colors }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, demoSettings.points, demoSettings.label ).style; }39:T540,{ await visibility; return new Mapa( 500, 400, "+proj=eqdc +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", //+x_0=0 +y_0=0 //+proj=cea +lon_0=3.0322266 +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs { ...demoSettings.bounds, ...{ extent: "proj4", margin: 50, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [109.44, 14.05985666617488], [109.44, 59.792852411381496], [169.2, 59.792852411381496], [169.2, 14.05985666617488], [109.44, 14.05985666617488] ] ] } } //include: {type:"Feature",geometry:{type:"Polygon", coordinates:[[[-19.112139365514206,-10.665520058587184],[-19.112139365514206,16.735764490040015],[18.51921874418869,16.735764490040015],[18.51921874418869,-10.665520058587184],[-19.112139365514206,-10.665520058587184]]]}} } }, 0, null, null, { ...demoSettings.custom }, { ...demoSettings.colors }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, demoSettings.points, demoSettings.label ).style; }3a:T53f,{ await visibility; return new Mapa( 500, 400, "+proj=eqdc +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", //+x_0=0 +y_0=0 //+proj=cea +lon_0=3.0322266 +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs { ...demoSettings.bounds, ...{ extent: "proj4", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [109.44, 14.05985666617488], [109.44, 59.792852411381496], [169.2, 59.792852411381496], [169.2, 14.05985666617488], [109.44, 14.05985666617488] ] ] } } //include: {type:"Feature",geometry:{type:"Polygon", coordinates:[[[-19.112139365514206,-10.665520058587184],[-19.112139365514206,16.735764490040015],[18.51921874418869,16.735764490040015],[18.51921874418869,-10.665520058587184],[-19.112139365514206,-10.665520058587184]]]}} } }, 0, null, null, { ...demoSettings.custom }, { ...demoSettings.colors }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, demoSettings.points, demoSettings.label ).style; }3b:T541,{ await visibility; return new Mapa( 500, 400, "+proj=eqdc +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", //+x_0=0 +y_0=0 //+proj=cea +lon_0=3.0322266 +lat_ts=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs { ...demoSettings.bounds, ...{ extent: "proj4", margin: -50, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [109.44, 14.05985666617488], [109.44, 59.792852411381496], [169.2, 59.792852411381496], [169.2, 14.05985666617488], [109.44, 14.05985666617488] ] ] } } //include: {type:"Feature",geometry:{type:"Polygon", coordinates:[[[-19.112139365514206,-10.665520058587184],[-19.112139365514206,16.735764490040015],[18.51921874418869,16.735764490040015],[18.51921874418869,-10.665520058587184],[-19.112139365514206,-10.665520058587184]]]}} } }, 0, null, null, { ...demoSettings.custom }, { ...demoSettings.colors }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, demoSettings.points, demoSettings.label ).style; }3c:T571,{ await visibility; return new Mapa( 600, 400, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [19.786548591257393, 44.39061297949091], [19.786548591257393, 52.95086748209625], [42.50791829328622, 52.95086748209625], [42.50791829328622, 44.39061297949091], [19.786548591257393, 44.39061297949091] ] ] } } //typically would be like below //include: dynamicExtent //include: savedMapExtent }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom, ...{ show: true, adminRegionName: { //add a singular state or provice by its name name: [ "Autonomous Republic of Crimea", "Luhansk Oblast", "Donetsk Oblast", "Sevastopol" ], style: { fill: "orange", stroke: "white" }, label: false } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true } }, demoSettings.points, demoSettings.label ).style; }3d:T528,{ await visibility; return new Mapa( 600, 400, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [19.786548591257393, 44.39061297949091], [19.786548591257393, 52.95086748209625], [42.50791829328622, 52.95086748209625], [42.50791829328622, 44.39061297949091], [19.786548591257393, 44.39061297949091] ] ] } } //typically would be like below //include: dynamicExtent //include: savedMapExtent }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom, ...{ show: true, adminRegionCountry: { // add all states and provices by country name name: ["Ukraine"], style: { fill: "#dccdba", stroke: "gray", "stroke-width": 1, opacity: 1 }, label: false } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true } }, demoSettings.points, demoSettings.label ).style; }3e:T4c2,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [87.78380409350731, -9.260105122479642], [87.78380409350731, 45.1572600623982], [139.62131066816298, 45.1572600623982], [139.62131066816298, -9.260105122479642], [87.78380409350731, -9.260105122479642] ] ] } } }, 0, { geo: land, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom, ...{ show: true, marineRegionName: { //add body of water highlight and label name: ["South China Sea"], style: { fill: "blue", stroke: "white", "stroke-width": 0, opacity: 0.25 }, label: false } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true } }, demoSettings.points, demoSettings.label ).style; }3f:T48e,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-22.976961082461855, 6.529979518751249], [-22.976961082461855, 31.322288466207002], [42.77453275756844, 31.322288466207002], [42.77453275756844, 6.529979518751249], [-22.976961082461855, 6.529979518751249] ] ] } } }, 0, null, null, { ...demoSettings.custom, ...{ show: true, landRegionName: { //add body of water highlight and label name: ["Sahara"], style: { fill: "red", stroke: "white", "stroke-width": 0, opacity: 0.25 }, label: true } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true } }, demoSettings.points, demoSettings.label ).style; }40:T5af,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [70.03146049330185, 27.984180364764487], [70.03146049330185, 39.93604016731178], [83.67290959189542, 39.93604016731178], [83.67290959189542, 27.984180364764487], [70.03146049330185, 27.984180364764487] ] ] } } }, 0, null, null, { ...demoSettings.custom, ...{ show: true, landRegionName: { //add body of water highlight and label name: [], style: { fill: "red", stroke: "white", "stroke-width": 0, opacity: 0.25 }, label: true }, addDisputed: { // add disputed territory lines and customize dash array show: true, style: { "stroke-width": 1, stroke: "red", "stroke-dash-array": "2 2" } } } }, { ...demoSettings.colors, ...{ border: "gray", "stroke-width": 0.5 } }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true } }, demoSettings.points, demoSettings.label ).style; }41:T52a,{ await visibility; return new Mapa( 400, 500, "geoStereographic", { extent: "bounds", margin: 80, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-88.56, 70.72062365865541], [-88.56, 84.86628521909407], [82.8, 84.86628521909407], [82.8, 70.72062365865541], [-88.56, 70.72062365865541] ] ] } } }, 0, { geo: land, iso: "ADM0_A3", name: "NAME_LONG" }, topojson .feature(lakes, lakes.objects.lakes) .features.filter(function (d, i) { if (d.properties.name !== "Great Salt Lake") { return d; } }), { ...demoSettings.custom, ...{ show: true, graticule: { default: true, step: 5, show: true, h: [66], v: [], east: 0, west: -361, style: { stroke: "blue", "stroke-dash-array": "", "stroke-width": 2 } } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ extent: "custom", clip: true } }, demoSettings.points, demoSettings.label ).style; }42:T54e,{ await visibility; return new Mapa( 400, 500, "geoOrthographic", { extent: "extent", margin: 15, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-88.56, 70.72062365865541], [-88.56, 84.86628521909407], [82.8, 84.86628521909407], [82.8, 70.72062365865541], [-88.56, 70.72062365865541] ] ] } } }, 0, { geo: land, iso: "ADM0_A3", name: "NAME_LONG" }, topojson .feature(lakes, lakes.objects.lakes) .features.filter(function (d, i) { if (d.properties.name !== "Great Salt Lake") { return d; } }), { ...demoSettings.custom, ...{ show: true, graticule: { default: true, step: 5, show: true, h: [66, 0, -66], v: [], east: 0, west: -361, style: { stroke: "blue", "stroke-dash-array": "", "stroke-width": 2 } } } }, { ...demoSettings.colors, ...{ border: "none" } }, demoSettings.scale, { ...demoSettings.fit, ...{ extent: "world", clip: true } }, demoSettings.points, demoSettings.label ).style; }43:T55c,{ await visibility; return new Mapa( 500, 400, "+proj=eqdc +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", { ...demoSettings.bounds, ...{ extent: "proj4", margin: -20, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [123.81346129009142, 36.00585182915321], [123.81346129009142, 40.96755097373471], [129.67928440248673, 40.96755097373471], [129.67928440248673, 36.00585182915321], [123.81346129009142, 36.00585182915321] ] ] } } } }, 0, null, null, { ...demoSettings.custom, ...{ show: true, graticule: { default: true, step: 1, show: true, h: [39], v: [], east: 0, west: -361, style: { stroke: "black", "stroke-dash-array": "5 5", "stroke-width": 3 } } } }, { ...demoSettings.colors }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, demoSettings.points, demoSettings.label ).style; }44:T713,{ await visibility; return new Mapa( 500, //width 300, //height "geoMiller", { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-75.9920651585852, -33.38244619188333], [-75.9920651585852, 6.298157611406187], [-36.39206515858519, 6.298157611406187], [-36.39206515858519, -33.38244619188333], [-75.9920651585852, -33.38244619188333] ] ] } } }, 0, null, null, { ...demoSettings.custom, ...{ show: true, landRegionName: { //add body of water highlight and label name: ["Amazon Forest"], style: { fill: "red", stroke: "white", "stroke-width": 0, opacity: 0.25 }, label: true }, graticule: { default: true, step: 10, show: false, h: [], v: [], east: 0, west: -361, style: { stroke: "red", "stroke-width": 1, "stroke-dasharray": "none" } } } }, { ...demoSettings.colors, ...{ land: "#eeeeee", water: "none", border: "gray", background: "#dddddd", highlight: "orange" /*default color if set below*/, grid: "white", country: { PER: "pink", BRA: "#90EE90" /*overwride by country*/ } } }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: ["BRA", "PER", "BOL", "ARG"], render: [] } }, demoSettings.points, demoSettings.label ).style; }45:T43a,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-74.7489598020137, 40.3370569711068], [-74.7489598020137, 41.476343690203706], [-71.56520980201371, 41.476343690203706], [-71.56520980201371, 40.3370569711068], [-74.7489598020137, 40.3370569711068] ] ] } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, demoSettings.custom, { ...demoSettings.colors, ...{ border: "none" } }, { ...demoSettings.scale, ...{ show: true, topValue: 50, topUnit: "km", bottomValue: 50, bottomUnit: "mi", offset: [400 - 50, 50] } }, { ...demoSettings.fit, ...{ clip: true } }, demoSettings.points, demoSettings.label ).style; }46:T435,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-74.7489598020137, 40.3370569711068], [-74.7489598020137, 41.476343690203706], [-71.56520980201371, 41.476343690203706], [-71.56520980201371, 40.3370569711068], [-74.7489598020137, 40.3370569711068] ] ] } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, demoSettings.custom, { ...demoSettings.colors, ...{ border: "none" } }, { ...demoSettings.scale, ...{ show: true, topValue: 50, topUnit: "km", bottomValue: 50, bottomUnit: "mi", offset: [175, 50] } }, { ...demoSettings.fit, ...{ clip: true } }, demoSettings.points, demoSettings.label ).style; }47:T408,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-74.7489598020137, 40.3370569711068], [-74.7489598020137, 41.476343690203706], [-71.56520980201371, 41.476343690203706], [-71.56520980201371, 40.3370569711068], [-74.7489598020137, 40.3370569711068] ] ] } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, demoSettings.custom, { ...demoSettings.colors, ...{ border: "none" } }, { ...demoSettings.scale, ...{ show: true, topValue: 50000, topUnit: "m", bottomValue: 150000, bottomUnit: "ft", offset: [400 - 50, 50] } }, demoSettings.fit, demoSettings.points, demoSettings.label ).style; }48:T480,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-74.7489598020137, 40.3370569711068], [-74.7489598020137, 41.476343690203706], [-71.56520980201371, 41.476343690203706], [-71.56520980201371, 40.3370569711068], [-74.7489598020137, 40.3370569711068] ] ] } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, demoSettings.custom, { ...demoSettings.colors, ...{ border: "none" } }, { ...demoSettings.scale, ...{ show: false, topValue: 50000, topUnit: "m", bottomValue: 150000, bottomUnit: "ft", offset: [400 - 50, 50] } }, { ...demoSettings.fit, ...{ extent: [], render: [], clip: true, clipBuffer: 0 } }, demoSettings.points, demoSettings.label ).style; }49:T480,{ await visibility; return new Mapa( 400, 300, demoSettings.projection, { extent: "bounds", margin: 0, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-74.7489598020137, 40.3370569711068], [-74.7489598020137, 41.476343690203706], [-71.56520980201371, 41.476343690203706], [-71.56520980201371, 40.3370569711068], [-74.7489598020137, 40.3370569711068] ] ] } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, demoSettings.custom, { ...demoSettings.colors, ...{ border: "none" } }, { ...demoSettings.scale, ...{ show: false, topValue: 50000, topUnit: "m", bottomValue: 150000, bottomUnit: "ft", offset: [400 - 50, 50] } }, { ...demoSettings.fit, ...{ extent: [], render: [], clip: true, clipBuffer: 0 } }, demoSettings.points, demoSettings.label ).style; }4a:T5cd,northkorea = { await visibility; return new Mapa( 500, 400, "+proj=eqdc +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", { ...demoSettings.bounds, ...{ extent: "proj4", margin: -20, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [123.81346129009142, 36.00585182915321], [123.81346129009142, 40.96755097373471], [129.67928440248673, 40.96755097373471], [129.67928440248673, 36.00585182915321], [123.81346129009142, 36.00585182915321] ] ] } } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom, ...{ show: true, graticule: { default: true, step: 1, show: true, h: [38], v: [], east: 0, west: -361, style: { stroke: "black", "stroke-dash-array": "5 5", "stroke-width": 3 } } } }, { ...demoSettings.colors, ...{ border: "white" } }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, { ...demoSettings.points, ...{ show: true, data: poi } }, demoSettings.label ); }4b:T59a,{ await visibility; return new Mapa( 600, 400, demoSettings.projection, { extent: "bounds", margin: -80, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [19.786548591257393, 44.39061297949091], [19.786548591257393, 52.95086748209625], [42.50791829328622, 52.95086748209625], [42.50791829328622, 44.39061297949091], [19.786548591257393, 44.39061297949091] ] ] } } //typically would be like below //include: dynamicExtent //include: savedMapExtent }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom, ...{ show: true, adminRegionName: { //add a singular state or provice by its name name: [ "Autonomous Republic of Crimea", "Luhansk Oblast", "Donetsk Oblast", "Sevastopol" ], style: { fill: "orange", stroke: "white" }, label: false } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true } }, { ...demoSettings.points, ...{ show: true, data: towns } }, demoSettings.label ).style; }4c:T598,{ await visibility; return new Mapa( 600, 400, demoSettings.projection, { extent: "bounds", margin: -40, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [34.11815481429166, 46.09590271540325], [34.11815481429166, 50.9677058903087], [42.10980898535007, 50.9677058903087], [42.10980898535007, 46.09590271540325], [34.11815481429166, 46.09590271540325] ] ] } } //typically would be like below //include: dynamicExtent //include: savedMapExtent }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom, ...{ show: true, adminRegionName: { //add a singular state or provice by its name name: [ "Autonomous Republic of Crimea", "Luhansk Oblast", "Donetsk Oblast", "Sevastopol" ], style: { fill: "orange", stroke: "white" }, label: false } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true } }, { ...demoSettings.points, ...{ show: true, data: villages } }, demoSettings.label ).style; }4d:T4a1,new Mapa( 600, 400, demoSettings.projection, { extent:"bounds", margin:-80, include: ({type:"Feature", geometry:{type:"Polygon",coordinates: [[[19.786548591257393,44.39061297949091],[19.786548591257393,52.95086748209625],[42.50791829328622,52.95086748209625],[42.50791829328622,44.39061297949091],[19.786548591257393,44.39061297949091]]]}}) //typically would be like below //include: dynamicExtent //include: savedMapExtent }, 0, {'geo':ne10m,'iso':'ADM0_A3','name':'NAME_LONG'}, null, {...demoSettings.custom, ...{show:true, adminRegionName:{ //add a singular state or provice by its name name:['Autonomous Republic of Crimea','Luhansk Oblast','Donetsk Oblast','Sevastopol'], style:{ fill:'orange', stroke:'white' }, label:false }}}, {...demoSettings.colors, ...{country : {UKR:demoSettings.colors.land }}}, demoSettings.scale, {...demoSettings.fit,...{ clip:true, extent:['UKR'],//sets dark labels render:[] } }, {...demoSettings.points,...{show : true, data : towns}}, {...demoSettings.label ,...{method:'polylabel',show:true,country : ['Ukraine']}} ).style4e:T456,{ await visibility; return new Mapa( 500, //width 500, //height "geoMercator", { ...demoSettings.bounds, ...{ margin: 0, extent: "extent", include: { type: "Feature", properties: { color: null }, geometry: { type: "Polygon", coordinates: [ [ [-84.27715517308519, 3.833580192673256], [-84.27715517308519, 12.523440422322318], [-74.42043107961167, 12.523440422322318], [-74.42043107961167, 3.833580192673256], [-84.27715517308519, 3.833580192673256] ] ] } } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom }, { ...demoSettings.colors, ...{ water: "none", land: "none", background: "none" } }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: false, extent: "world" } }, demoSettings.points, demoSettings.label, { show: true, type: "hs1" } ).style; }4f:T476,{ await visibility; return new Mapa( 680, //width 500, //height "geoMercator", { ...demoSettings.bounds, ...{ margin: -100, extent: "bounds", include: { type: "Feature", properties: { color: null }, geometry: { type: "Polygon", coordinates: [ [ [-84.27715517308519, 3.833580192673256], [-84.27715517308519, 12.523440422322318], [-74.42043107961167, 12.523440422322318], [-74.42043107961167, 3.833580192673256], [-84.27715517308519, 3.833580192673256] ] ] } } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom }, { ...demoSettings.colors, ...{ water: "none", land: "none", background: "none", border: "none" } }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: false, extent: "extent" } }, demoSettings.points, demoSettings.label, { show: true, type: "HYP_HR_SR_OB_DR" } ).style; }50:T45e,{ await visibility; return new Mapa( 500, //width 500, //height "geoMercator", { ...demoSettings.bounds, ...{ margin: -500, extent: "bounds", include: { type: "Feature", properties: { color: null }, geometry: { type: "Polygon", coordinates: [ [ [-65.4799590233285, -12.349236506057052], [-65.4799590233285, -11.388108211489689], [-64.13598194798197, -11.388108211489689], [-64.13598194798197, -12.349236506057052], [-65.4799590233285, -12.349236506057052] ] ] } } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom }, { ...demoSettings.colors, ...{ water: "none", land: "none", background: "none" } }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: false, extent: "extent" } }, demoSettings.points, demoSettings.label, { show: true, type: "hs" } ).style; }51:T45f,{ await visibility; return new Mapa( 500, //width 500, //height "geoMercator", { ...demoSettings.bounds, ...{ margin: -500, extent: "bounds", include: { type: "Feature", properties: { color: null }, geometry: { type: "Polygon", coordinates: [ [ [-65.4799590233285, -12.349236506057052], [-65.4799590233285, -11.388108211489689], [-64.13598194798197, -11.388108211489689], [-64.13598194798197, -12.349236506057052], [-65.4799590233285, -12.349236506057052] ] ] } } } }, 0, { geo: ne10m, iso: "ADM0_A3", name: "NAME_LONG" }, null, { ...demoSettings.custom }, { ...demoSettings.colors, ...{ water: "none", land: "none", background: "none" } }, demoSettings.scale, { ...demoSettings.fit, ...{ clip: false, extent: "extent" } }, demoSettings.points, demoSettings.label, { show: true, type: "sat" } ).style; }52:T41f,europe = { await visibility; return new Mapa( 800, 400, "+proj=lcc +lon_0=16.875 +lat_1=38.9244425 +lat_2=54.6249868 +lat_0=46.7747147 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", { ...demoSettings.bounds, ...{ extent: "proj4", margin: 30, include: { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-10.90538624665913, 48.47383732692094], [-10.90538624665913, 59.803110609706735], [4.386761773158833, 59.803110609706735], [4.386761773158833, 48.47383732692094], [-10.90538624665913, 48.47383732692094] ] ] } } } }, 0, null, null, { ...demoSettings.custom, ...{ graticule: { step: 25, default: true } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, demoSettings.points, demoSettings.label ); }53:T447,cuba = { await visibility; return new Mapa( 800, 400, "+proj=aea +lon_0=-79.453125 +lat_1=9.8052011 +lat_2=26.5620625 +lat_0=18.1836318 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", { ...demoSettings.bounds, ...{ extent: "proj4", margin: 30, include: { type: "Feature", properties: { color: null }, geometry: { type: "Polygon", coordinates: [ [ [-86.05144630414286, 16.81642800905534], [-86.05144630414286, 25.58815387424116], [-71.92057585640764, 25.58815387424116], [-71.92057585640764, 16.81642800905534], [-86.05144630414286, 16.81642800905534] ] ] } } } }, 0, null, null, { ...demoSettings.custom, ...{ graticule: { step: 25, default: true } } }, demoSettings.colors, demoSettings.scale, { ...demoSettings.fit, ...{ clip: true, extent: "proj4" } }, demoSettings.points, demoSettings.label ); }54:T732, function d3quadTiles(projection, zoom) { var tiles = [], width = 1 << (zoom = Math.max(0, zoom)), step = Math.max(.2, Math.min(1, zoom * .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, .5 * (y1 + y2)]]) .concat(d3.range(x2, x1 - δ / 2, -δ).map(function(x) { return [x, y2]; })) .concat([[x1, .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: [.5 * (x1 + x2), .5 * (m1 + m2)]}); } } else if (!invisible) { var x = .5 * (x1 + x2), y = .5 * (y1 + y2); visit(x1, y1, x, y); visit(x, y1, x2, y); visit(x1, y, x, y2); visit(x, y, x2, y2); } } }55:T2a1b,function geoTile(mapa,delta) { // Basic Constants const tau = Math.PI * 2; var lim = 85.05113; var tileSize = 256; // Map Properties: var w = mapa.width; var h = mapa.height; // Projection Values: var pk = w/tau; // projection scale k var pc = [0,0] // projection geographic center var pr = 0 // central longitude for rotation. // Zoom Transform Values: var tk = 2; // zoom transform scale k var tx = w/2; // zoom transform translate x var ty = h/2; // zoom transform translate y // The Projection: var p = d3.geoMercator() .scale(pk) .center(pc); // Tile wrapping and zoom limits: var z0 = 0; var z1 = 15; var extent = function() { return {left:-179.99999,top:lim,right:179.9999,bottom:-lim}; }; var wrap = true; // Tile size: var tileWidth = 256; var tileHeight = 256; // Tile ordering var xyz = true; // Tile source & attribution 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"; // Tile ordering: geoTile.xyz = function(_) { return arguments.length ? (xyz = _, geoTile): xyz; } function geoTile(_) { return p(_); } // General Methods 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(_) { } // Projection methods: geoTile.invert = function(_) { return p.invert(_); } geoTile.center = function(_) { // Need to account for any rotation (divergence from d3.geoProjection typical behavior // 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"; } // Zoom Methods: 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(z) { // rough starting value, needs improvement: var a = [w/2-1,h/2]; // points in pixels var b = [w/2+1,h/2]; var dx = d3.geoDistance(p.invert(a), p.invert(b)) ; // distance between in radians var scale = 20/dx*tk*pk/200; // magic, needs to be clearer. var z = Math.max(Math.log(scale) / Math.LN2 - 8, 2); z = Math.min(z,15) | 0; // Refine: var maxTiles = w*h/256/128; var e = p.clipExtent(); p.clipExtent([[0,0],[w,h]]) while(d3quadTiles(p, z).length > maxTiles) { z--; } if (delta){ z = z + delta } p.clipExtent(e); return z; } // Zoom extent methods: // Default translate extent: geoTile.zoomTranslateExtent = function(_) { var e = extent(); console.log('zoomTranslateExtent', arguments.length); 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]]; } } // Return visible map extent: 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]]; } // Tile Methods: // Calculate Tiles: geoTile.tiles = function() { // Use Jason Davies' quad tree method to find out what tiles intercept the viewport: var z = geoTile.tileDepth(); //var e = p.clipExtent(); p.clipExtent([[0,0],[w,h]]) var set = d3quadTiles(p, Math.max(z0,Math.min(z,z1))); // stay within tile bounds. //p.clipExtent(e); return set; } // Assign Tiles to a Selection: geoTile.tile = function(g) { let uid = g.attr('id').split('-')[2] // Geopath for the reprojected tiles - in order to get pixel bounds: var path = d3.geoPath(p); // p is the ultimate projection; //console.log(geoTile.tiles()) // Update the tiles in the provided tile layer: var tile = g.selectAll(".tiles") .data(geoTile.tiles()) var enter = tile.enter() .append("image") // could be adjusted so that on pan events the images are just re-translated. .attr("class", "tile") .attr("id", function(d) { return "tile-" + 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); // Get the address of each image. d.image.onload = function() {onload(d, that) }; }); //tile.exit().remove(); // Every time we load an image from the tile service: function onload(d, that) { // Create and fill a canvas to work with. 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); // move the source tile to a canvas. // var k = d.key; // the tile address. var tilesAcross = 1 << k[2]; // how many tiles is the map across at a given tile's zoom depth? // Reference projection: var webMercator = d3.geoMercator() .scale(tilesAcross/Math.PI/2) // reference projection fill square tilesAcross units wide/high. .translate([0,0]) .center([0,0]) // Reprojected tile boundaries in pixels. 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; // Get the tile bounds: // Tile bounds in latitude/longitude: var λ0 = k[0] / tilesAcross * 360 - 180, // left λ1 = (k[0] + 1) / tilesAcross * 360 - 180, // right φ1 = webMercator.invert([0,(k[1] - tilesAcross/2) ])[1], // top φ0 = webMercator.invert([0,(k[1] + 1 - tilesAcross/2) ])[1]; // bottom. // Create a new canvas to hold the what will become the reprojected tile. var newCanvas = d3.create("canvas").node(); newCanvas.width = x1 - x0, // pixel width of reprojected tile. newCanvas.height = y1 - y0; // pixel height of reprojected tile. 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 every pixel in the reprojected tile's bounding box: for (var y = y0, i = -1; y < y1; ++y) { for (var x = x0; x < x1; ++x) { // Invert a pixel in the new tile to find out it's lat long var pt = p.invert([x, y]), λ = pt[0], φ = pt[1]; // Make sure it falls in the bounds: if (λ > λ1 || λ < λ0 || φ > φ1 || φ < φ0) { i += 4; targetData[i] = 0; continue; } // Find out what pixel in the source tile matches the destination tile: var top = (((tilesAcross + webMercator([0,φ])[1]) * tileHeight | 0) % 256 | 0) * tileWidth; var q = (((λ - λ0) / (λ1 - λ0) * tileWidth | 0) + (top)) * 4; // Take the data from a pixel in the source tile and assign it to a pixel in the new tile. targetData[++i] = sourceData[q]; targetData[++i] = sourceData[++q]; targetData[++i] = sourceData[++q]; targetData[++i] = 255; } } // Draw the image. if(target) newContext.putImageData(target, 0, 0); } // Add the data to the image in the SVG: //console.log(d3.select('#'+d3.select(that).attr('id')).size()) // pass uid somehow? d3.select('#'+d3.select(that).attr('id')) .attr("xlink:href", newCanvas.toDataURL()) // convert to a dataURL so that we can embed within the SVG. .attr("x", x0) .attr("width", newCanvas.width) .attr("height",newCanvas.height) .attr("y", y0); } } geoTile.tileSet = function(_) { console.log(arguments.length) if(arguments.length) { a = _.attribution ? _.attribution : "Unknown"; // p = _.projection ? _.projection.scale(960/tau).translate([0,0]) : d3.geoMercator().scale(960/tau).translate([0,0]); 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; // tile ordering } return geoTile; } return geoTile; }56:T854,demoSettings = ({ bounds:{ extent:null, margin:0, include: null }, width: 680, height: 360, projection: null, fit:{ extent : [], render : ['SLV','VEN','BRA'] , clip:false, clipBuffer:0 }, points: { show : false, data : [] }, label:{ method:'polylabel', show : true, country:[] }, scale:{ show : false, topValue : 250, topUnit :'km', bottomValue : 250, bottomUnit : 'mi', offset : [680-40, 50] }, colors:{ land : '#d3bfa8', grid: '#74cafc', water : '#a8dfff', background:'#ffffff', border : 'black', highlight : colorLand, country : { } }, custom: { show:false, addCustom:{ show:false, geom:null, style:{ fill:'red', stroke:'blue', 'stroke-width':0.5 }, type:'polyline' }, genRoutes:{ show:false, extent:['Missouri', 'Louisiana','Virginia'], labels:['Family1','Family2'], ids: [], colors: ['blue', 'red'], style:{ fill: 'none', stroke: 'red' }, label: false }, histRegionName:{ name: [], style:{ fill: 'pink', stroke: 'red' }, label: true }, adminRegionName:{ name:[],//['Missouri'], style:{ fill:'orange', stroke:'white' }, label:false }, adminRegionCountry:{ name:[],//['United States of America'], style:{ fill:'none', stroke:'gray', 'stroke-width':1, opacity:1 }, label:false}, marineRegionName:{ name:[], style:{ fill:'none', stroke:'blue' , 'stroke-width':0, opacity:0 }, label:true }, landRegionName:{ name:[], style:null, label:false }, addDisputed:{ show:false, style:{ 'stroke-width':1, stroke:'red', 'stroke-dash-array':'0' } }, graticule:{ default:false, step:25,show:false,h:[],v:[],east:0,west:-361,style:{stroke:'red' ,'stroke-width':1, 'stroke-dasharray':'none'} } } })57:[{"id":"c2f90902f8838408eeb9a710d9b85e63266dc6048616dc164140bbf3b10e880d8f3ae42c6ad9073afddfa5d1d9e6eb036aacc4a91b7e90cd3d1dec1725f91d6d","href":"https://static.observableusercontent.com/files/c2f90902f8838408eeb9a710d9b85e63266dc6048616dc164140bbf3b10e880d8f3ae42c6ad9073afddfa5d1d9e6eb036aacc4a91b7e90cd3d1dec1725f91d6d","name":"ne_10m_rivers_lake_centerlines.json","type":"application/json","lastModified":1659283349732.23,"size":28663},{"id":"b9440458df9b7c2cee6c8c1b461893e60c6fe5802154ab5df7c1429bbd45907426a0f248fc0f25ced735cc6bb85b492e023b668f1983b57068a92e1617da7c0f","href":"https://static.observableusercontent.com/files/b9440458df9b7c2cee6c8c1b461893e60c6fe5802154ab5df7c1429bbd45907426a0f248fc0f25ced735cc6bb85b492e023b668f1983b57068a92e1617da7c0f","name":"Screenshot 2022-07-31 152705.jpg","type":"image/jpeg","lastModified":1659295688559.942,"size":60183},{"id":"72911d894ab642cd9e70eedc2c1f583c3fc8bf09cfa4116145602dd275c5eca45febda98fb258b9cec536dd46de1d83de4709d55647ec83a537afef7a5e822c6","href":"https://static.observableusercontent.com/files/72911d894ab642cd9e70eedc2c1f583c3fc8bf09cfa4116145602dd275c5eca45febda98fb258b9cec536dd46de1d83de4709d55647ec83a537afef7a5e822c6","name":"Screenshot 2022-07-31 152753.jpg","type":"image/jpeg","lastModified":1659295688548.237,"size":35958},{"id":"6ba3415337d4e78b1c6014584b01e046c29a922ad40730b6f4c0fae1e9aa1bf7c0c9f72a2c507a96cc77cd5026fa88c193d9dd965cbac2b14f581776d0125c02","href":"https://static.observableusercontent.com/files/6ba3415337d4e78b1c6014584b01e046c29a922ad40730b6f4c0fae1e9aa1bf7c0c9f72a2c507a96cc77cd5026fa88c193d9dd965cbac2b14f581776d0125c02","name":"land (1).json","type":"application/json","lastModified":1659397641024.48,"size":3710494},{"id":"a7973df006bca6959ca8264f8e74569ed16dce21171a270019ccf8508e235ec84e6460c2ba026f8bd677465439324b52e750c4f3f32137b2458205312806590f","href":"https://static.observableusercontent.com/files/a7973df006bca6959ca8264f8e74569ed16dce21171a270019ccf8508e235ec84e6460c2ba026f8bd677465439324b52e750c4f3f32137b2458205312806590f","name":"ne10m@1.json","type":"application/json","lastModified":1659393962339.658,"size":4838743},{"id":"e5c3fe1b61c6ace8d3050af0ad5ce32c42c421de75499d8e01e7ef41d18bd6c481d014aecd4cde2d14a7ac1b28eb087bb7291a154ae6d28794038fb2ce88e632","href":"https://static.observableusercontent.com/files/e5c3fe1b61c6ace8d3050af0ad5ce32c42c421de75499d8e01e7ef41d18bd6c481d014aecd4cde2d14a7ac1b28eb087bb7291a154ae6d28794038fb2ce88e632","name":"land@1.json","type":"application/json","lastModified":1659453422420.919,"size":85140},{"id":"62bc4762492228443e60c2e5740f6153c84c7b2599eff35491127c08bae44ed6251198bbd07b4210d9073d7193c1faa84f769c483750835e279261925a9fa5df","href":"https://static.observableusercontent.com/files/62bc4762492228443e60c2e5740f6153c84c7b2599eff35491127c08bae44ed6251198bbd07b4210d9073d7193c1faa84f769c483750835e279261925a9fa5df","name":"Screen Shot 2022-08-09 at 1.41.47 PM.png","type":"image/png","lastModified":1660066924106.676,"size":300764},{"id":"ce2e45c5668dd63ebb26cfceff2ae464c196a37b4969d58c4020282d9773deef6b1ee87d2d6df216dba72c9347191b859abb15017d9cb2b7d19c9706344d11d5","href":"https://static.observableusercontent.com/files/ce2e45c5668dd63ebb26cfceff2ae464c196a37b4969d58c4020282d9773deef6b1ee87d2d6df216dba72c9347191b859abb15017d9cb2b7d19c9706344d11d5","name":"Screen Shot 2022-08-09 at 1@2.25.19 PM.png","type":"image/png","lastModified":1676901458692.077,"size":189148}] 32:{"id":"25bf9b9528f62c9e","slug":"mapa","title":"Make A Map - Mapa","thumbnail":"a99d9e7faf5c52ae5aff9691335f117b299f3bb2b63d8f60a9b54eae3727a6d4","access_level":"public","create_time":"$D2022-06-12T12:03:12.865Z","update_time":"$D2026-01-13T14:18:35.048Z","view_time":null,"first_public_time":"$D2023-02-20T13:54:40.628Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":3711,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Make A Map - Mapa","cells":[{"id":0,"value":"# Make A Map - Mapa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3621,"value":"*There is a newer improved version which is currently under development. Feb 2023*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"Nothing but the kitchen sink
\nWhy do everything, when you can do just what you want?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":782,"value":"Mapa is inspired by the spirit of a former associate web developer, \"why do more when you can do less?\" Or as I like to say \"less is more\". No need to download shapefiles, terrain, having to layout a map is tedious and time consuming. Who wants to maintain another folder or data? not me. And who is going to train people how to use QGIS or ESRI products, those tools are too complicated for the task at hand. Sometimes you just want a Map.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3078,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3076,"value":"So what is Mapa? It's the new prototype of makeamap version 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3086,"value":"\nhtml`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"Mapa is JavaScript. Mapa is a constructor class. Mapa constructs maps based on parameters passed to it. Define it once and use it again and again, to output multiple sizes, add or remove, without loading a program. Have a custom style, set it and forget it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"You can click the above > to check under the hood or scroll down for examples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":814,"value":"Mapa began as a basic JavaScript function called cartoSvg","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"### Basic function\nReturns an SVG map of an area of interest, with a basic style. All of the properties are passed through a function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"Soon I wanted more, like cities, scale bars, labeling, and custom extensions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"### Advanced function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"Returns an SVG map, with more options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"## Basic\n\n### Pros\n- several map projections to choose from\n- ability to add a positive or negative buffer\n- customize country fill, country border and water colors\n- ability to include a list of focal countries\n- download entire global as an SVG\n \n### Cons\n- no labeling\n- no custom colors\n- no custom shapes\n- no points, polygons, or polylines\n- no scale bar\n- no custom layers\n- no custom extents\n- no graticule\n- no states/provinces\n- no clipping\n- no disputed territories","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":820,"value":"An example of the cartoSVG output","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"cartoSvg(680, 440, 'geoMercator', {'adjust':'extent', 'buff':50}, 70, {'geo': myfeatures}, mylakes_simple, {'water': colorWater,'land': colorLand, 'border': colorBorder}, ['El Salvador','Venezuela','Brazil'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"## Advanced","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":642,"value":"All of the properties are passed through a Class which has a constructor and methods, currently only showing the method style.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":822,"value":"An example of Mapa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"carto.style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":868,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":972,"value":"#### width [px], height [px]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1058,"value":"{\n await visibility;\n return new Mapa(\n 400, //width\n 300, //height\n \"geoRobinson\",\n { ...demoSettings.bounds, ...{ margin: 5, extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"## Projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":968,"value":"### Supports d3-geo-projection,\n- https://github.com/d3/d3-geo-projection#api-reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1329,"value":"### geoMiller","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1134,"value":"{\n await visibility;\n return new Mapa(\n 300, //width\n 275, //height\n \"geoMiller\",\n { ...demoSettings.bounds, ...{ extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"### geoMercator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1140,"value":"{\n await visibility;\n return new Mapa(\n 300, //width\n 300, //height\n \"geoMercator\",\n { ...demoSettings.bounds, ...{ margin: 10, extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"### geoInterruptedMollweideHemispheres","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1143,"value":"{\n await visibility;\n return new Mapa(\n 300, //width\n 200, //height\n \"geoInterruptedMollweideHemispheres\",\n { ...demoSettings.bounds, ...{ margin: 10, extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"### geoGingery","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1149,"value":"{\n await visibility;\n return new Mapa(\n 400, //width\n 300, //height\n \"geoGingery\",\n { ...demoSettings.bounds, ...{ margin: 10, extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"### Supports proj4 projections,\n- https://projectionwizard.org/\n- PROJ (formerly proj4) is a library for performing conversions between cartographic projections.\n- +proj=aea +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +datum=WGS84 +units=m +no_defs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1257,"value":"Add an origin for this to work +x_0=0 +y_0=0\n-

+proj=aea +lon_0=-249.609375 +lat_1=11.4971877 +lat_2=39.865514 +lat_0=25.6813508 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1262,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":870,"value":"## Bounds and Margin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":977,"value":"#### extent [size, extent, usa48, custom, bounds]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1047,"value":"- size, will set the map to prioritize width and height, does not fit the map extent to width and height","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1081,"value":" - extent, will set the map to prioritize the map extent, the geometry will fit the greatest dimensions (width, height) to the entire map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1087,"value":" - usa48, will set the map to the lower 48 states, intended as an example to show predefined values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1101,"value":" - custom, will set the map extent based on a list of states/provinces as the bounding references.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1095,"value":"- bounds, will set the map based on a bounding box, in this format or by using the Bounder tool,

\\{type:\"Feature\",geometry:{type:\"Polygon\", coordinates:[[[-10.90538624665913,48.47383732692094],[-10.90538624665913,59.803110609706735],[4.386761773158833,59.803110609706735],[4.386761773158833,48.47383732692094],[-10.90538624665913,48.47383732692094]]]}}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":980,"value":"#### margin [+/- int]\n - a postive value adds pixel space around the extent, zooming out\n - a negative value subtracts pixel space around the extent, zooming in","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2991,"value":"### (+) margin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2980,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2994,"value":"### 0 margin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2987,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2997,"value":"### (-) margin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2984,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"#### include","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1398,"value":"State and Province names can be listed in an array whose bounding extent will act as the focus of the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1391,"value":"viewof searchProvinces = Search(provinces.objects.ne_10m_admin_1_states_provinces.geometries.map(d => d.properties))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"viewof selectionProvinces = Table(searchProvinces, {required: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"['Florida']","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 20,\n include: [\"Florida\"]\n },\n 0,\n null,\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"['Washington','California','Florida','Maine']","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1405,"value":"['Province of Trapani','Province of Messina','Province of Ragusa']","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1377,"value":"{\n await visibility;\n return new Mapa(\n 200,\n 200,\n demoSettings.projection,\n //fit\n {\n extent: \"custom\",\n margin: 40,\n include: [\n \"Province of Trapani\",\n \"Province of Messina\",\n \"Province of Ragusa\"\n ]\n },\n 0,\n null,\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"#### using the Bounder tool","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"Interact with 'Bounder' to set a custom zoom and map extent, copy and paste value to savedCoordinate or link to dynamicExtent to update map mapExtent ${mapExtent} ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"viewof bounder1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"{\n await visibility;\n return new Mapa(\n 300,\n 200,\n demoSettings.projection,\n {\n extent: \"bounds\",\n margin: 0,\n include: dynamicExtent\n //typically would be like below\n //include: dynamicExtent\n //include: savedMapExtent\n },\n 0,\n null,\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"bounder1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"dynamicExtent = geojsonrewind(turf.envelope(turf.polygon(bounder1.bounds)),true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"mapExtent = JSON.stringify(dynamicExtent.geometry.coordinates)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2697,"value":"insetExtent = [[[1.808179772739636,30.346129776436253],[1.808179772739636,54.79880779927873],[33.2365667654585,54.79880779927873],[33.2365667654585,30.346129776436253],[1.808179772739636,30.346129776436253]]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"savedCoordinates = [[[62.79736814422501,5.447989017448247],[62.79736814422501,37.540369865362635],[93.75736814422501,37.540369865362635],[93.75736814422501,5.447989017448247],[62.79736814422501,5.447989017448247]]]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"savedMapExtent = ({type:\"Feature\", geometry:{type:\"Polygon\",coordinates: savedCoordinates}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2703,"value":"savedInsetExtent = ({type:\"Feature\",properties:{color:null}, geometry:{type:\"Polygon\",coordinates: insetExtent}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2830,"value":"//[[[-84.27715517308519,3.833580192673256],[-84.27715517308519,12.523440422322318],[-74.42043107961167,12.523440422322318],[-74.42043107961167,3.833580192673256],[-84.27715517308519,3.833580192673256]]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"## Rotation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1301,"value":"This supports positive/negative rotation around the polar axis in degrees.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1291,"value":"{\n await visibility;\n return new Mapa(\n 300, //width\n 300, //height\n \"geoMiller\",\n { ...demoSettings.bounds, ...{ margin: 0, extent: \"size\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors, ...{ border: \"#c8af93\" } },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"{\n await visibility;\n return new Mapa(\n 300, //width\n 300, //height\n \"geoMiller\",\n { ...demoSettings.bounds, ...{ margin: 0, extent: \"extent\" } },\n 180,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors, ...{ border: \"#c8af93\" } },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":875,"value":"## Land","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1321,"value":"- the geometry used to represent the land mass, also is used for it's attributes for labeling features.\n- the default is Natural Earth (modified for CFR boundaries)\n- can be overwritten with another geojson object.\n- requires an array of features, a unique field with no spaces like an ISO code, and a field for labeling\n- {'geo':ne10m,'iso':'ADM0_A3','name':'NAME_LONG'}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1413,"value":"ne10mdata = FileAttachment(\"ne10m@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"ne10m = topojson.feature(ne10mdata, ne10mdata.objects.ne10m).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2536,"value":"landdata = await FileAttachment(\"land@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"land = topojson.feature(landdata, landdata.objects.World_ADMIN0).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2223,"value":"ne10m.filter(x=> x.properties.NAME=='Brazil')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"### Default geojson showing Long Island","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1419,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"bounds\",\n margin: 0,\n include: {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [-74.7489598020137, 40.3370569711068],\n [-74.7489598020137, 41.476343690203706],\n [-71.56520980201371, 41.476343690203706],\n [-71.56520980201371, 40.3370569711068],\n [-74.7489598020137, 40.3370569711068]\n ]\n ]\n }\n }\n },\n 0,\n null,\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"### Higher detailed geojson showing Long Island","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1423,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"bounds\",\n margin: 0,\n include: {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [-74.7489598020137, 40.3370569711068],\n [-74.7489598020137, 41.476343690203706],\n [-71.56520980201371, 41.476343690203706],\n [-71.56520980201371, 40.3370569711068],\n [-74.7489598020137, 40.3370569711068]\n ]\n ]\n }\n }\n },\n 0,\n { geo: ne10m, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2574,"value":"### Lower detailed geojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2576,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"bounds\",\n margin: 0,\n include: {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [-74.7489598020137, 40.3370569711068],\n [-74.7489598020137, 41.476343690203706],\n [-71.56520980201371, 41.476343690203706],\n [-71.56520980201371, 40.3370569711068],\n [-74.7489598020137, 40.3370569711068]\n ]\n ]\n }\n }\n },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":879,"value":"## Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1457,"value":"This is an overlay, in this case these are lakes, in theory could be replaced with any list of features. Will inherit the water color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1467,"value":"lakes = d3.json(\"https://gist.githubusercontent.com/mbrickmaps/1e1977624c04bd2fcf44c4d05864029b/raw/lakes.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"topojson.feature(lakes, lakes.objects.lakes).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"Default","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1469,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n topojson.feature(lakes, lakes.objects.lakes).features,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"Remove the Great Salt Lake","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1474,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n topojson\n .feature(lakes, lakes.objects.lakes)\n .features.filter(function (d, i) {\n if (d.properties.name !== \"Great Salt Lake\") {\n return d;\n }\n }),\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"Or add one, like the Louisiana Purchase","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1491,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n exampleLake, //shape into the lake files\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":888,"value":"## Custom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1524,"value":"This is a smörgåsbord of style, layers, grids, and tiles. Sometimes there is a request to highlight administration regions within a country, or regions of land and water, that don't really have a defined border, like The Rocky Mountains, or the Gulf of Mexico. We can also turn on disputed regions, and apply a custom style.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"### custom layers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1526,"value":"Upload your own geojson polyline or polygon. Coloring can be applied by adding a column to the data called color and a hex, rgba, or named color can be used. This ideally would be a region (the Donbass), river (the Nile), historical area (Republika Srpska), or could be a choropleth calculated in a mapping program or R.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1538,"value":"states = state_topo.features.filter(function(d,i){if(d.properties.admin == 'United States of America'){return d}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n topojson\n .feature(lakes, lakes.objects.lakes)\n .features.filter(function (d, i) {\n if (d.properties.name !== \"Great Salt Lake\") {\n return d;\n }\n }),\n {\n ...demoSettings.custom,\n ...{\n show: true,\n addCustom: {\n show: true,\n geom: states,\n style: {\n fill: \"none\",\n stroke: \"blue\",\n \"stroke-width\": 0.5\n },\n type: \"polyline\"\n }\n }\n },\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"StatesThatStartWithM = state_topo.features.filter(function(d,i){if(d.properties.admin == 'United States of America' && d.properties.name_en[0] == 'M'){return d}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1551,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n topojson\n .feature(lakes, lakes.objects.lakes)\n .features.filter(function (d, i) {\n if (d.properties.name !== \"Great Salt Lake\") {\n return d;\n }\n }),\n {\n ...demoSettings.custom,\n ...{\n show: true,\n addCustom: {\n show: true,\n geom: StatesThatStartWithM,\n style: {\n fill: \"orange\",\n stroke: \"none\",\n \"stroke-width\": 0.5\n },\n type: \"polygon\"\n }\n }\n },\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"south = ['Alabama',\n'Arkansas',\n'Florida',\n'Georgia',\n'Louisiana',\n'Maryland',\n'Mississippi',\n'North Carolina',\n'Oklahoma',\n'South Carolina',\n'Tennessee',\n'Texas',\n'Virginia']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"border = ['Delaware', 'Maryland', 'Kentucky', 'Missouri', 'West Virginia']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"union = ['California',\n'Connecticut',\n'Delaware',\n'Illinois',\n'Indiana',\n'Iowa',\n'Kansas',\n'Maine',\n'Maryland',\n'Massachusetts',\n'Michigan',\n'Minnesota',\n'Nevada',\n'New Hampshire',\n'New Jersey',\n'New York',\n'Ohio',\n'Oregon',\n'Pennsylvania',\n'Rhode Island',\n'Vermont',\n'West Virginia',\n'Wisconsin',]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"usa = state_topo.features.filter(d => {return d.properties.admin == 'United States of America'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"civilwar = {\n let obj = []\n usa.forEach(function(state){\n if (union.indexOf(state.properties.name_en) > -1){\n state.properties.color = \"blue\"\n }\n if (south.indexOf(state.properties.name_en) > -1){\n state.properties.color = \"red\"\n }\n if (border.indexOf(state.properties.name_en)>-1){\n state.properties.color = \"purple\"\n }\n obj.push(state)\n})\n return obj\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n topojson\n .feature(lakes, lakes.objects.lakes)\n .features.filter(function (d, i) {\n if (d.properties.name !== \"Great Salt Lake\") {\n return d;\n }\n }),\n {\n ...demoSettings.custom,\n ...{\n show: true,\n addCustom: {\n show: true,\n geom: civilwar,\n style: {\n fill: null,\n stroke: \"white\",\n \"stroke-width\": 1\n },\n type: \"polygon\"\n }\n }\n },\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"ne_10m_rivers_lake_centerlines = FileAttachment(\"ne_10m_rivers_lake_centerlines.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1874,"value":"rivers = topojson.feature(ne_10m_rivers_lake_centerlines, ne_10m_rivers_lake_centerlines.objects.ne_10m_rivers_lake_centerlines).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1860,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Washington\", \"California\", \"Florida\", \"Maine\"]\n },\n 0,\n null,\n topojson\n .feature(lakes, lakes.objects.lakes)\n .features.filter(function (d, i) {\n if (d.properties.name !== \"Great Salt Lake\") {\n return d;\n }\n }),\n {\n ...demoSettings.custom,\n ...{\n show: true,\n addCustom: {\n show: true,\n geom: rivers,\n style: {\n fill: null,\n stroke: \"blue\",\n \"stroke-width\": 1\n },\n type: \"polygon\"\n }\n }\n },\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":" ### subregions by individual administration name","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1899,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"viewof searchProvinces1 = Search(provinces.objects.ne_10m_admin_1_states_provinces.geometries.map(d => d.properties))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1904,"value":"viewof selectionProvinces1 = Table(searchProvinces1, {required: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"### subregions by country name\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1881,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"### maritime regions by name ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1922,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"### land regions by name","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1940,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"### show disputed regions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1948,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"### grids and graticules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2092,"value":"25 degrees","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1961,"value":"{\n await visibility;\n return new Mapa(\n 400, //width\n 300, //height\n \"geoMiller\",\n { ...demoSettings.bounds, ...{ extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n {\n ...demoSettings.custom,\n ...{\n graticule: {\n default: true,\n step: 25,\n show: false,\n h: [],\n v: [],\n east: 0,\n west: -361,\n style: {\n stroke: \"red\",\n \"stroke-width\": 1,\n \"stroke-dasharray\": \"none\"\n }\n }\n }\n },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2094,"value":"10 degrees","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1973,"value":"{\n await visibility;\n return new Mapa(\n 400, //width\n 300, //height\n \"geoMiller\",\n { ...demoSettings.bounds, ...{ extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n {\n ...demoSettings.custom,\n ...{\n graticule: {\n default: true,\n step: 10,\n show: false,\n h: [],\n v: [],\n east: 0,\n west: -361,\n style: {\n stroke: \"red\",\n \"stroke-width\": 1,\n \"stroke-dasharray\": \"none\"\n }\n }\n }\n },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2086,"value":"Tropic of Cancer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1985,"value":"{\n await visibility;\n return new Mapa(\n 400,\n 300,\n demoSettings.projection,\n {\n extent: \"custom\",\n margin: 0,\n include: [\"Florida\", \"Maine\", \"Yucatán\"]\n },\n 0,\n null,\n topojson\n .feature(lakes, lakes.objects.lakes)\n .features.filter(function (d, i) {\n if (d.properties.name !== \"Great Salt Lake\") {\n return d;\n }\n }),\n {\n ...demoSettings.custom,\n ...{\n show: true,\n graticule: {\n default: true,\n step: 5,\n show: true,\n h: [23.43636],\n v: [],\n east: 0,\n west: -361,\n style: {\n stroke: \"red\",\n \"stroke-dash-array\": \"4 4\",\n \"stroke-width\": 3\n }\n }\n }\n },\n demoSettings.colors,\n demoSettings.scale,\n {\n ...demoSettings.fit,\n ...{\n clip: true\n }\n },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2088,"value":"Arctic Circle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2054,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2331,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2345,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":885,"value":"## Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2111,"value":"Default","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2103,"value":"{\n await visibility;\n return new Mapa(\n 300, //width\n 300, //height\n \"geoMiller\",\n { ...demoSettings.bounds, ...{ margin: 0, extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n null,\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2119,"value":"Override with a global project style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2114,"value":"{\n await visibility;\n return new Mapa(\n 300, //width\n 300, //height\n \"geoMiller\",\n { ...demoSettings.bounds, ...{ margin: 0, extent: \"extent\" } },\n 0,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2152,"value":"Or customize by map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2121,"value":"{\n await visibility;\n return new Mapa(\n 500, //width\n 300, //height\n \"geoMiller\",\n {\n extent: \"bounds\",\n margin: 0,\n include: {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [44.15027978787119, 21.864158535822238],\n [44.15027978787119, 31.63220026631549],\n [58.72726191278357, 31.63220026631549],\n [58.72726191278357, 21.864158535822238],\n [44.15027978787119, 21.864158535822238]\n ]\n ]\n }\n }\n },\n 0,\n null,\n null,\n { ...demoSettings.custom },\n {\n ...demoSettings.colors,\n ...{ border: \"#FFBF00\", water: \"navy\", land: \"#333333\" }\n },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: true, extent: \"custom\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"There is both a background color and a water color, make the background white to save a step.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2196,"value":"{\n await visibility;\n return new Mapa(\n 500, //width\n 300, //height\n \"geoMiller\",\n {\n extent: \"bounds\",\n margin: 0,\n include: {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [-75.9920651585852, -33.38244619188333],\n [-75.9920651585852, 6.298157611406187],\n [-36.39206515858519, 6.298157611406187],\n [-36.39206515858519, -33.38244619188333],\n [-75.9920651585852, -33.38244619188333]\n ]\n ]\n }\n }\n },\n 0,\n null,\n null,\n { ...demoSettings.custom },\n { ...demoSettings.colors, ...{ water: \"none\", background: \"none\" } },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: true, extent: \"custom\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2206,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":928,"value":"## Scale bar\n[Harry Stevens](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar) d3-geo-scale-bar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2156,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2190,"value":"Customizable position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2172,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2188,"value":"supports feet, meters, kilometers, miles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2177,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":930,"value":"## Clipping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2261,"value":"Can be used to remove all vector lines outside of the map view. Makes it easier to work with within Illustrator to get ride of extra data. Can also add a clipping buffer so it doesn't clip all the way to the edge but slightly beyond it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2263,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2271,"value":"unclipped file : 40,000 kb
\nclipped file : 124kb","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2303,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2318,"value":"Negative margin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2309,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2320,"value":"Positive margin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2311,"value":"\nhtml`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":932,"value":"## Points of interest, symbols, directional labeling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2412,"value":"poi =[\n //stack symbols\n {name:' ',lng:38.33093207006793, lat:126.40992488633022,dir:'NE',color:'black',size:10, type:'custom',shape:'circle'},\n {name:' ',lng:38.33093207006793, lat:126.40992488633022,dir:'NE',color:'yellow',size:8, type:'custom',shape:'circle'},\n {name:' ',lng:38.33093207006793, lat:126.40992488633022,dir:'NE',color:'black',size:100, type:'custom',shape:'wye'},\n {name:' ',lng:38.33093207006793, lat:126.40992488633022,dir:'NE',color:'yellow',size:2, type:'custom',shape:'circle'},\n //stack symbols capital\n {name:' ',lng:39.019444, lat:125.738056,dir:'NW-7',color:'black',size:10, type:'custom',shape:'circle'},\n {name:' ',lng:39.019444, lat:125.738056,dir:'NW-7',color:'white',size:9, type:'custom',shape:'circle'},\n //capitals\n {name:'Pyongyang',lng:39.019444, lat:125.738056,dir:'NW-7',color:'red',size:126, type:'custom',shape:'star'},\n {name:'Seoul',lng:'37.56', lat:'126.99',dir:'E-1',color:'black',size:126, type:'custom',shape:'star'}\n \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2398,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2498,"value":"north_korea_map = northkorea.style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2374,"value":"towns = [\n {name:'Kyiv',lng:50.45, lat:30.523333,type:'city',dir:'NE'},\n {name:'Moscow',lng:55.755833, lat:37.617222,type:'city',dir:'NE'},\n {name:'Kharkiv',lng:50.004444, lat:36.231389, type:'city',dir:'S'},\n {name:'Odesa',lng:46.485722, lat:30.743444, type:'city',dir:'N'},\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2389,"value":"villages =[ {name:'Dnipro',lng:48.45, lat:35.033333, type:'city',dir:'N',size:'3',color:'tomato'},\n {name:'Berdyansk',lng:46.756822, lat:\t36.78684, type:'city',dir:'NW',size:'3'},\n {name:'Donetsk',lng:48.001948, lat:\t37.828034, type:'city',dir:'W',size:'3'},\n {name:'Horlivka',lng:48.299647, lat:\t38.054669, type:'city',dir:'E',size:'3'},\n {name:'Kramatorsk',lng:48.719363, lat:\t37.534391, type:'city',dir:'N',size:'3'},\n {name:'Kupyansk',lng:49.721783, lat:\t37.598056, type:'city',dir:'S',size:'3'},\n {name:'Luhansk',lng:48.56976, lat:\t39.334384, type:'city',dir:'S',size:'3'},\n {name:'Lysychansk',lng:48.920411, lat:\t38.42736, type:'city',dir:'NE',size:'3'},\n {name:'Makiyivka',lng:48.029664, lat:\t37.974622, type:'city',dir:'E',size:'3'},\n {name:'Mariupol',lng:47.096181, lat:\t37.556198, type:'city',dir:'NW',size:'3'},\n {name:'Severodonetsk',lng:48.933333, lat: 38.5, type:'city',dir:'NW',size:'3'}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2362,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2382,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3025,"value":"ne10m.map(x=>x.properties['NAME_LONG']).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"## Labeling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3040,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2606,"value":"## Insets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2619,"value":"inset = new Mapa(\n 600, \n 400,\n demoSettings.projection,\n {\n extent:\"bounds\", \n margin:0, \n include: savedInsetExtent\n //typically would be like below\n //include: dynamicExtent\n //include: savedMapExtent\n },\n 0, \n null, \n null,\n demoSettings.custom, \n demoSettings.colors,\n demoSettings.scale,\n {...demoSettings.fit,...{\n clip:true,\n }\n },\n demoSettings.points, \n demoSettings.label \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3093,"value":"inset.projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2630,"value":"inset.projection.bounds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2711,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2633,"value":"inset.style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2625,"value":"{\n await visibility;\n return new Mapa(\n 150, //width\n 150, //height\n \"geoWinkel3\",\n { ...demoSettings.bounds, ...{ margin: 0, extent: \"extent\" } },\n -30,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n {\n ...demoSettings.custom,\n ...{\n show: true,\n addCustom: {\n show: true,\n geom: inset.projection.bounds, //needs to have{type:\"Feature\",properties:{color:null}, geometry:{type:\"Polygon\",coordinates: insetExtent}} or use dynamicExtent.\n style: {\n fill: \"rgba(255, 0, 0,0.5)\",\n stroke: \"red\",\n \"stroke-width\": 1\n },\n type: \"polygon\"\n }\n }\n },\n {\n ...demoSettings.colors,\n ...{ land: \"#ccc\", water: \"none\", border: \"none\" }\n },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"{\n await visibility;\n return new Mapa(\n 150, //width\n 150, //height\n \"geoOrthographic\",\n { ...demoSettings.bounds, ...{ margin: 0, extent: \"extent\" } },\n 80,\n { geo: land, iso: \"ADM0_A3\", name: \"NAME_LONG\" },\n null,\n {\n ...demoSettings.custom,\n ...{\n show: true,\n addCustom: {\n show: true,\n geom: cuba.projection.bounds, //needs to have{type:\"Feature\",properties:{color:null}, geometry:{type:\"Polygon\",coordinates: insetExtent}} or use dynamicExtent.\n style: {\n fill: \"rgba(255, 0, 0,0.5)\",\n stroke: \"red\",\n \"stroke-width\": 1\n },\n type: \"polygon\"\n }\n }\n },\n {\n ...demoSettings.colors,\n ...{ land: \"#ccc\", water: \"none\", border: \"none\" }\n },\n demoSettings.scale,\n { ...demoSettings.fit, ...{ clip: false, extent: \"world\" } },\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2787,"value":"inset.projection.project.translate()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3054,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3056,"value":"## Tiles and terrain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3629,"value":"[Jason Davies](https://www.jasondavies.com/) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2881,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3248,"value":"new Mapa(\n 500, //width\n 500, //height\n 'geoMercator',\n {...demoSettings.bounds, ...{margin:0,extent:\"extent\",include:({type:\"Feature\",properties:{color:null}, geometry:{type:\"Polygon\",coordinates: [[[-84.27715517308519,3.833580192673256],[-84.27715517308519,12.523440422322318],[-74.42043107961167,12.523440422322318],[-74.42043107961167,3.833580192673256],[-84.27715517308519,3.833580192673256]]]}})}},\n 0, \n {'geo':ne10m,'iso':'ADM0_A3','name':'NAME_LONG'}, \n null,\n {...demoSettings.custom},\n {...demoSettings.colors,...{water:'none',land:'none',background:'none'}},\n demoSettings.scale,\n {...demoSettings.fit, ...{clip:false, extent : 'world'}},\n demoSettings.points, \n demoSettings.label,\n {show:true,type:'NASA_BLUEMARBLE'}\n).style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2839,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2874,"value":"new Mapa(\n 500, //width\n 500, //height\n 'geoMercator',\n {...demoSettings.bounds, ...{margin:-100,extent:\"bounds\",include:({type:\"Feature\",properties:{color:null}, geometry:{type:\"Polygon\",coordinates: [[[-84.27715517308519,3.833580192673256],[-84.27715517308519,12.523440422322318],[-74.42043107961167,12.523440422322318],[-74.42043107961167,3.833580192673256],[-84.27715517308519,3.833580192673256]]]}})}},\n 0, \n {'geo':ne10m,'iso':'ADM0_A3','name':'NAME_LONG'}, \n null,\n {...demoSettings.custom},\n {...demoSettings.colors,...{water:'none',land:'none',background:'none'}},\n demoSettings.scale,\n {...demoSettings.fit, ...{clip:false, extent : 'extent'}},\n demoSettings.points, \n demoSettings.label,\n {show:true,type:'HYP_HR_SR_W'}\n).style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3243,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2603,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"globe = new Mapa(\n 800, //width\n 400, //height\n 'geoRobinson',\n {...demoSettings.bounds, ...{extent:\"size\"}},\n 0, //rotation\n null, \n null,\n {...demoSettings.custom, ...{graticule: {step:90, default:true }}}, //override\n {...demoSettings.colors, ...{grid:'green', water:'#89CFF0'}},\n demoSettings.scale,\n {...demoSettings.fit, ...{clip:false, extent : 'world'}},\n demoSettings.points, \n demoSettings.label \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"europe.style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"europe.projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"cuba","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"cuba.style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"cuba.projection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"new Mapa(\n 800, //width\n 400, //height\n '+proj=lcc +lon_0=16.875 +lat_1=38.9244425 +lat_2=54.6249868 +lat_0=46.7747147 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs',\n {...demoSettings.bounds, ...{\n extent:\"proj4\", //usa48 'predefined to usa48', bounds 'provide bounding extent', custom 'provide list of states', world [size|extent]\n margin:30,\n include: {type:\"Feature\",geometry:{type:\"Polygon\", coordinates:[[[-10.90538624665913,48.47383732692094],[-10.90538624665913,59.803110609706735],[4.386761773158833,59.803110609706735],[4.386761773158833,48.47383732692094],[-10.90538624665913,48.47383732692094]]],properties:{color:null}}}\n }},\n 0, //rotation\n null, \n null,\n {...demoSettings.custom, ...{graticule: {step:25, default:true }}}, //override\n {...demoSettings.colors, ...{grid:'pink', water:'#89CFF0'}},\n demoSettings.scale,\n {...demoSettings.fit, ...{clip:true, extent : 'proj4'}},\n demoSettings.points, \n demoSettings.label \n).projection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"### Advanced - custom extent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"{\n await visibility;\n return new Mapa(\n demoSettings.width,\n demoSettings.height,\n demoSettings.projection,\n {\n extent: \"bounds\",\n margin: 50,\n include: {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [62.79736814422501, 5.447989017448247],\n [62.79736814422501, 37.540369865362635],\n [93.75736814422501, 37.540369865362635],\n [93.75736814422501, 5.447989017448247],\n [62.79736814422501, 5.447989017448247]\n ]\n ]\n }\n }\n //typically would be like below\n //include: dynamicExtent\n //include: savedMapExtent\n },\n 0,\n null,\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n demoSettings.fit,\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"{\n await visibility;\n return new Mapa(\n demoSettings.width / 2,\n demoSettings.height,\n demoSettings.projection,\n {\n extent: \"bounds\",\n margin: 10,\n include: {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [2.272852945277668, 48.869832245908796],\n [2.272852945277668, 61.74775931692303],\n [34.03053749432029, 61.74775931692303],\n [34.03053749432029, 48.869832245908796],\n [2.272852945277668, 48.869832245908796]\n ]\n ]\n }\n }\n //typically would be like below\n //include: dynamicExtent\n //include: savedMapExtent\n },\n 0,\n null,\n null,\n demoSettings.custom,\n demoSettings.colors,\n demoSettings.scale,\n demoSettings.fit,\n demoSettings.points,\n demoSettings.label\n ).style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"globe.projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"cuba.projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":666,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3171,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3182,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3178,"value":"function mercatorφ(y) {\n return Math.atan(Math.exp(-y * Math.PI / 180)) * 360 / Math.PI - 90;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3180,"value":"function noop() {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"mapStyle = ({\n 'water': colorWater,\n 'land': colorLand,\n 'border': colorBorder\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"style //needs to be added for bounder styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"import {colorWater, colorLand, colorBorder, myfeatures_simple, myfeatures,mylakes_simple,disputed_topo,focusBuffer,countries_simple,countries,proj4,turf,state_topo,custom_topo,Layer, regions_land_topo,regions_marine_topo,polylabel,hist_topo,cities,d3,makeGraphicSVG,juice} from \"@mbrickmaps/make-a-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"geojsonrewind = require('https://bundle.run/geojson-rewind@0.3.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"import {viewof bounder as bounder1, style} from '@mbrickmaps/bounder'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"import {provinces, Table, Search} from '@mbrickmaps/geography'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"import {exampleLake} from \"@mbrickmaps/historic-boundaries\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W57","stdlib":"1","titling":"auto"}} 33:"$32:body"