Terrain Exploration 2 / Michael Bricknell

Public

Edited

Jan 16, 2024

# Terrain Exploration 2

import {defaultWorld, mapParam, projectionName, rotate, myfeatures_simple, mylakes_simple,colorWater,colorLand,colorBorder, juice,turf} from '@mbrickmaps/make-a-map'

geojsonrewind = require('https://bundle.run/geojson-rewind@0.3.1')

import {viewof bounder as bounder1, style} from '@mbrickmaps/bounder'

dynamicExtent = geojsonrewind(turf.rewind(turf.envelope(turf.polygon(

bounder1.bounds

))),true)

bounder1.bounds

JSON.stringify(dynamicExtent.geometry.coordinates)

savedCoordinates = [[[-81.79161184434227,4.408755837563981],[-81.79161184434227,12.121662418893825],[-73.87161184434227,12.121662418893825],[-73.87161184434227,4.408755837563981],[-81.79161184434227,4.408755837563981]]]

savedMapExtent = [{type:"Feature", geometry:{type:"Polygon",coordinates: savedCoordinates},properties:{color:null}}]

bluemarble2 = FileAttachment("world.200412.3x21600x10800.jpg").image()

grayscale = FileAttachment("SR_LR.jpg").image()

ne1_lr_lc_sr = FileAttachment("NE1_LR_LC_SR.jpg").image()

`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`

d3.geoBounds(map680.projection.clipping)

d3.geoCentroid(map680.projection.bounds)

d3.geoBounds(map680.projection.bounds)

JSON.stringify(map680.projection.bounds)

JSON.stringify(map680.projection.clipping)

map680.projection.clipping

loam = require('loam@1.1.0/lib/loam.js')

map680.projection

map680.style

getTerrain(25,map680,grayscale)

getTerrain(25,map680,bluemarble2)

getTerrain(25, map680, ne1_lr_lc_sr)

map680.projection.bounds

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)) <<

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;

}

globe = new Mapa(

500, //width

400, //height

'geoMiller',

{

extent:"bounds",

margin:0,

include: dynamicExtent

//typically would be like below

//include: dynamicExtent

//include: savedMapExtent

{'geo':land,'iso':'ADM0_A3','name':'NAME_LONG'},

null,

{...demoSettings.custom},

{...demoSettings.colors},

demoSettings.scale,

{...demoSettings.fit, ...{clip:true, extent : 'extent'}},

demoSettings.points,

demoSettings.label

)

viewof bounder1

globe.style

globe.projection.proj

getTiles('test', globe)

function getTiles(name,p){

console.log('hi')

let [[x0, y0], [x1, y1]] = d3.geoBounds(p.bounds)

let svg = d3.create('svg').attr('width',p.projection.width).attr('height',p.projection.height)

let tiles = svg.append('g')

let slippy = geoTile(p.projection.width,p.projection.height)

.size(svg)

.tileSet(tileSets[name])

slippy.projection(p.project)

tiles.call(slippy.tile);

return svg.node()

}

function mercatorφ(y) {

return Math.atan(Math.exp(-y * Math.PI / 180)) * 360 / Math.PI - 90;

}

function noop() {}

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')

import {land, demoSettings,Mapa,cartoSvg, cartoSvgEmbed} from "@mbrickmaps/mapa"

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more