2c:null 2d:["$","title",null,{"children":"Terrain Exploration 2 | Michael Bricknell | Observable"}] 32:T9e1,map680 = new Mapa(680, 600, //'+proj=aea +lon_0=32.1679688 +lat_1=38.9787634 +lat_2=54.7738318 +lat_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs', '+proj=laea +lon_0=-79.0136719 +lat_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs', { extent:"proj4", //usa48 'predefined to usa48', bounds 'provide bounding extent', custom 'provide list of states', world [size|extent] margin:30, include:savedMapExtent[0] }, -37, null, // default is low res, can remap to own shapes null, { show:true, addCustom:{ show:true, geom:savedMapExtent, style:{ fill:'red', stroke:'blue', 'stroke-width':0.5 }, type:'polyline' }, genRoutes:{show:false}, adminRegionName:{ name:['Darién Province','Chocó Department'], style:{ fill:'orange', stroke:'white' }, label:false }, adminRegionCountry:{ name:['Ukraine'], style:{ fill:'#ebe4d0', stroke:'none', 'stroke-width':0, opacity:1 }, label:false}, marineRegionName:{ name:['Black Sea','Azov Sea','Baltic Sea'], style:{ fill:'none', stroke:'blue' , 'stroke-width':0, opacity:0 }, label:true }, landRegionName:{ name:['Darian Gap'], style:{fill:'red'}, label:true }, addDisputed:{ show:true, style:{ 'stroke-width':1, stroke:'red', 'stroke-dash-array':'4 4' } }, graticule:{ default:true, step:25,show:false,h:[],v:[],east:0,west:-361,style:{stroke:'red' ,'stroke-width':1, 'stroke-dasharray':'none'} } }, { land : '#fffff9', water : '#f2f2f2', border : '#dedede', highlight : '#8CB574', country : { } //specify individual country colors }, { show : true, topValue : 250, topUnit :'km', bottomValue : 250, bottomUnit : 'mi', offset : [680-40, 50] }, { extent : 'proj4' , render : ['UKR','TUR'] , clip:true, clipBuffer:-200 }, { show : true, data : [{name: " ", lat: 38.5920151, lng: 48.1036841, type: "custom", dir: "E", size: 3848.4510006474966, color: "green", stroke: "#bd3823", 'stroke-width': 1, opacity: "1", shape: "square"}] }, { // countries to label method:'centroid', show : true, country:['Ukraine','Russia','Georgia','Romania','Bulgaria','Moldova', 'Belarus', 'Poland','Latvia','Estonia','Lithuania','Slovakia','Hungary'] })33:T77a,function getTerrain(factor, mapa, terrain) { let imageWidth = mapa.projection.width * factor; let imageHeight = mapa.projection.height * factor; var image = new Image(); image.onload = onload; image.crossOrigin = "anonymous"; image.src = terrain.src; console.log(image.src); let width = mapa.projection.width; // clipping width let height = mapa.projection.height; // clipping height // Get the size of the canvas in CSS pixels. const projection = mapa.projection.projection; const context = DOM.context2d(imageWidth, imageHeight, 1); const clipped = DOM.context2d(width, height, 1); clipped.canvas.width = width; clipped.canvas.height = height; context.canvas.width = width * factor; context.canvas.height = height * factor; context.clearRect(0, 0, width, height); const path = d3.geoPath(projection, context); function onload() { var dx = +width * factor; var dy = +height * factor; //console.log(width,height,dx,dy,dpr) context.drawImage(image, 0, 0, dx, dy); var sourceData = context.getImageData(0, 0, dx, dy).data; var target = context.createImageData(width, height); var targetData = target.data; for (var y = 0, i = -1; y < height; ++y) { for (var x = 0; x < width; ++x) { var p = projection.invert([x, y]), p0 = p[0], p1 = p[1]; if (p0 > 180 || p0 < -180 || p1 > 90 || p1 < -90) { i += 4; continue; } var q = (((((90 - p1) / 180) * dy) | 0) * dx + ((((180 + p0) / 360) * dx) | 0)) << 2; targetData[++i] = sourceData[q]; targetData[++i] = sourceData[++q]; targetData[++i] = sourceData[++q]; targetData[++i] = 255; } } context.clearRect(0, 0, width, height); context.putImageData(target, 0, 0); clipped.putImageData(target, 0, 0); } return clipped.canvas; }34:T748,d3.quadTiles = function(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); console.log(tiles) 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); } } }35:T2865,function geoTile(width,height) { // Basic Constants const tau = Math.PI * 2; var lim = 85.05113; var tileSize = 256; // Map Properties: var w = width; var h = 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 = 1; // 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 = 1; var z1 = 13; 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 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(d3.quadTiles(p, z).length > maxTiles) { z--; } console.log(d3.quadTiles(p, z).length); p.clipExtent(e); return z; } // Zoom extent methods: // Default translate extent: geoTile.zoomTranslateExtent = function(_) { var e = extent(); if (arguments.length) { e.left = _[0][0]; e.top = _[0][1]; e.right = _[1][0]; e.bottom = _[1][1]; return geoTile; } else { var x0 = p([e.left-pr,e.top])[0] - tx; var y0 = p([e.left-pr,e.top])[1] - ty; var x1 = p([e.right-pr,e.bottom])[0] - tx; var y1 = p([e.right-pr,e.bottom])[1] - ty; return [[x0,y0],[x1,y1]]; } } // 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 = d3.quadTiles(p, Math.max(z0,Math.min(z,z1))); // stay within tile bounds. console.log(set.length); p.clipExtent(e); return set; } // Assign Tiles to a Selection: geoTile.tile = function(g) { // Geopath for the reprojected tiles - in order to get pixel bounds: var path = d3.geoPath(p); // p is the ultimate projection; // Update the tiles in the provided tile layer: var tile = g.selectAll(".tile") .data(geoTile.tiles()); var enter = tile.enter() .append("image") .merge(tile) // could be adjusted so that on pan events the images are just re-translated. .attr("class", "tile") .attr("id", function(d) { return "tile-" + 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 && newCanvas.height) { 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: d3.select(that) .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(_) { 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; } 36:T1cc1,tileSets = ({ test : { type:"tileset", attribution: "", source: function(d) { return "https://api.maptiler.com/tiles/hillshade/"+d.z+"/"+d.x+"/"+d.y+".webp?key=NnFzE21CFaHwB7PNhdmc"; }}, CartoDB_Positron : { type:"tileset", attribution: "© OpenStreetMap © CartoDB", source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_all/"+d.z+"/"+d.x+"/"+d.y+".png"; } }, CartoDB_PositronNoLabels : { type:"tileset", attribution: "© OpenStreetMap © CartoDB", source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_nolabels/"+d.z+"/"+d.x+"/"+d.y+".png"; } }, CartoDB_PositronOnlyLabels : { type: "tileset", attribution: "© OpenStreetMap © CartoDB", source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_only_labels/"+d.z+"/"+d.x+"/"+d.y+".png"; } }, CartoDB_DarkMatter : { type: "tileset", attribution: "© OpenStreetMap © CartoDB", source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_all/"+d.z+"/"+d.x+"/"+d.y+".png"; } }, CartoDB_DarkMatterNoLabels : { type: "tileset", attribution: "© OpenStreetMap © CartoDB", source: function(d) {return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_nolabels/"+d.z+"/"+d.x+"/"+d.y+".png"; } }, CartoDB_DarkMatterOnlyLabels : { type: "tileset", attribution: "© OpenStreetMap © CartoDB", source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_only_labels/"+d.z+"/"+d.x+"/"+d.y+".png"; } }, CartoDB_Voyager : { type: "tileset", attribution: "© OpenStreetMap © CartoDB", source: function(d) { return "https://cartodb-basemaps-b.global.ssl.fastly.net/rastertiles/voyager/"+d.z+"/"+d.x+"/"+d.y+".png";} }, ESRI_WorldTerrain : { type: "tilset", attribution: "Tiles © Esri - Source: USGS, Esri, TANA, DeLorme, and NPS", source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";} }, ESRI_WorldShadedRelief : { type: "tileset", attribution: "Tiles © Esri - Source: Esri", source: function(d) {return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, ESRI_WorldPhysical : { type:"tileset", attribution: "Tiles © Esri - Source: US National Park Service", source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, ESRI_WorldStreetMap : { type:"tileset", attribution:"Tiles © Esri - Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom", source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, ESRI_WorldTopoMap : { type: "tileset", attribution: "Tiles © Esri - Source: Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community", source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, ESRI_WorldImagery : { type:"tileset", attribution: "Tiles © Esri - Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community", source : function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, ESRI_OceanBasemap : { type: "tileset", attribution:"Tiles © Esri - Source: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri", source: function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, ESRI_NGWorld : { type: "tileset", attribution: "Tiles © Esri - Source: National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC", source : function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, ESRI_Gray : { type: "tileset", attribution: "Tiles © Esri - Source: Esri, DeLorme, NAVTEQ", source : function(d) { return "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png"; } }, OSM_Topo : { type: "tileset", attribution: "Tiles © OpenStreetMap contributors", source: function(d) { return "https://tile.opentopomap.org/"+d.z+"/"+d.x+"/"+d.y+".png"; } }, OSM: { type:"tileset", attribution: "Tiles © OpenStreetMap contributors", source: function(d) { return "https://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_Toner : { type: "tileset", attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_TonerBackground : { type:"tileset", attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner-background/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_TonerLines : { type:"tileset", attribution:"Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner-lines/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_TonerLite : { type:"tileset", attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/toner-lite/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_Terrain : { type:"tileset", attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/terrain/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_TerrainBackground : { type:"tileset", attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/terrain-background/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_TerrainLines : { type:"tileset", attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", source: function(d) { return "https://stamen-tiles.a.ssl.fastly.net/terrain-lines/" + d.z + "/" + d.x + "/" + d.y + ".png"; } }, Stamen_Watercolor: { type:"tileset", attribution:"Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.", source: function(d) {return "https://stamen-tiles.a.ssl.fastly.net/watercolor/" + d.z + "/" + d.x + "/" + d.y + ".png"; } } })37:[{"id":"e657bd78b8114f8e513678fd4af66c04a721401c0219617fe176d3a518b5dcdf08cfe50c4285081b04e98265c24ca9c661b044dd07f3242ca23d93740a3a4584","href":"https://static.observableusercontent.com/files/e657bd78b8114f8e513678fd4af66c04a721401c0219617fe176d3a518b5dcdf08cfe50c4285081b04e98265c24ca9c661b044dd07f3242ca23d93740a3a4584","name":"world.200412.3x21600x10800.jpg","type":"image/jpeg","lastModified":1657377463742.484,"size":23931114},{"id":"fa1af78fc939dcd508ad524b8fbdeca9c37a5893c44d3f57c7a0c821b4f69f358e16c1559806f929c8675cffc138b4a13b7cfce4c11865e7feba693a09ca3bd0","href":"https://static.observableusercontent.com/files/fa1af78fc939dcd508ad524b8fbdeca9c37a5893c44d3f57c7a0c821b4f69f358e16c1559806f929c8675cffc138b4a13b7cfce4c11865e7feba693a09ca3bd0","name":"NE1_LR_LC_SR.jpg","type":"image/jpeg","lastModified":1657383324138.777,"size":22181075},{"id":"f35b0211370d53ba74c3a1bbc31261610a49dec109fd75c847dd5b23d6227d8aafab7b354a12a02084583a9594187819db7bb232785f0ab078743029ab9b9670","href":"https://static.observableusercontent.com/files/f35b0211370d53ba74c3a1bbc31261610a49dec109fd75c847dd5b23d6227d8aafab7b354a12a02084583a9594187819db7bb232785f0ab078743029ab9b9670","name":"SR_LR.jpg","type":"image/jpeg","lastModified":1657378302512.997,"size":13706951}] 30:{"id":"0d1e5a6bbf4dda50","slug":null,"title":"Terrain Exploration 2","thumbnail":null,"access_level":"public","create_time":"$D2022-07-09T14:37:43.742Z","update_time":"$D2024-01-16T20:03:43.325Z","view_time":null,"first_public_time":"$D2025-04-09T13:29:44.733Z","has_unpublished_edits":null,"fork":true,"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":1607,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Terrain Exploration 2","cells":[{"id":0,"value":"# Terrain Exploration 2","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"import {defaultWorld, mapParam, projectionName, rotate, myfeatures_simple, mylakes_simple,colorWater,colorLand,colorBorder, juice,turf} from '@mbrickmaps/make-a-map'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"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":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"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":77,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"dynamicExtent = geojsonrewind(turf.rewind(turf.envelope(turf.polygon(\n bounder1.bounds\n ))),true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"bounder1.bounds","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"JSON.stringify(dynamicExtent.geometry.coordinates)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"savedCoordinates = [[[-81.79161184434227,4.408755837563981],[-81.79161184434227,12.121662418893825],[-73.87161184434227,12.121662418893825],[-73.87161184434227,4.408755837563981],[-81.79161184434227,4.408755837563981]]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"savedMapExtent = [{type:\"Feature\", geometry:{type:\"Polygon\",coordinates: savedCoordinates},properties:{color:null}}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"bluemarble2 = FileAttachment(\"world.200412.3x21600x10800.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"grayscale = FileAttachment(\"SR_LR.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"ne1_lr_lc_sr = FileAttachment(\"NE1_LR_LC_SR.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"`gdalwarp -overwrite -ts 1080 1000 -t_srs '+proj=aea +lon_0=32.1679688 +lat_1=38.9787634 +lat_2=54.7738318 +lat_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs' -cutline cut_extent.shp -crop_to_cutline -dstalpha NE1_HR_LC_SR_W.tif proj.tif`","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"d3.geoBounds(map680.projection.clipping)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"d3.geoCentroid(map680.projection.bounds)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3.geoBounds(map680.projection.bounds)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"JSON.stringify(map680.projection.bounds)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"JSON.stringify(map680.projection.clipping)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"map680.projection.clipping","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"loam = require('loam@1.1.0/lib/loam.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"map680.projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"map680.style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"getTerrain(25,map680,grayscale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"getTerrain(25,map680,bluemarble2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"getTerrain(25, map680, ne1_lr_lc_sr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"map680.projection.bounds","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"globe = new Mapa(\n 500, //width\n 400, //height\n 'geoMiller',\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 {'geo':land,'iso':'ADM0_A3','name':'NAME_LONG'}, \n null,\n {...demoSettings.custom},\n {...demoSettings.colors},\n demoSettings.scale,\n {...demoSettings.fit, ...{clip:true, extent : 'extent'}},\n demoSettings.points, \n demoSettings.label \n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof bounder1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"globe.style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"globe.projection.proj","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"function getGrid(){\n /*\n let td = []\n for (const t of mytiles){\n //console.log(`tile ${t} is at ${project.invert(position(t, mytiles))}`);\n td.push([project.invert(position(t, mytiles))])\n }\n //console.log(td)\n let pt1 = turf.point(td[0][0])\n let pt2 = turf.point(td[1][0])\n let dist = turf.distance(pt1,pt2,{units:'degrees'})\n //console.log(dist)\n let end = turf.point(td[td.length-1][0])\n let NEpt = turf.transformTranslate(end, dist, 90)\n let SEpt = turf.transformTranslate(NEpt, dist, 180)\n let bbox = [pt1.geometry.coordinates[0],pt1.geometry.coordinates[0],SEpt.geometry.coordinates[0],SEpt.geometry.coordinates[1]]\n let grid = turf.squareGrid(bbox, dist*18, {units:'degrees'});\n console.log(grid)*/\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1565,"value":"Need to add scale and zoom to main map as an attribute?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1563,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1221,"value":"### Andrew Reid 2019","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1371,"value":"getTiles('test', globe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"globe.projection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"function getTiles(name,p){\n console.log('hi')\n let [[x0, y0], [x1, y1]] = d3.geoBounds(p.bounds)\n let svg = d3.create('svg').attr('width',p.projection.width).attr('height',p.projection.height)\n \n let tiles = svg.append('g')\n let slippy = geoTile(p.projection.width,p.projection.height)\n\t .size(svg)\n\t .tileSet(tileSets[name])\n \n slippy.projection(p.project)\n tiles.call(slippy.tile);\n\t\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"function mercatorφ(y) {\n return Math.atan(Math.exp(-y * Math.PI / 180)) * 360 / Math.PI - 90;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"function noop() {}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"d3 = require('d3-shape', 'd3-fetch', 'd3-format', 'd3-selection', 'd3-scale', 'd3-zoom', 'd3-geo', 'd3-geo-projection', 'd3-svg-legend', 'd3-geo-scale-bar', 'd3-svg-annotation', 'd3-random', 'd3-array', 'd3-geo-polygon','d3@v4')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"import {land, demoSettings,Mapa,cartoSvg, cartoSvgEmbed} from \"@mbrickmaps/mapa\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"