31:T486,md`On the [AGU Mountain Beltway blog](https://blogs.agu.org/mountainbeltway/category/friday-fold/), [Callan Bentley](https://twitter.com/callanbentley) shares beautiful pictures of outcrops from all over the world, every week! Here's an attempt to visualize them on an interactive map.

This notebook helps build a geojson file of the outcrops and then converts the geojson to vector tiles on-the-fly using [geojson-vt](https://github.com/mapbox/geojson-vt) so they can be displayed on this super responsive [vector Map](https://observablehq.com/@jjhembd/vector-map-rendering) by [Jeshurun](https://observablehq.com/@jjhembd).

Ideally, a piece of code should be able to gather all the outcrop images and put them on a map all at once, but very few pictures include geotag information so this must be done one picture at a time. I've added 16 of them to the map below (most lon/lat are estimated based on keywords in each blog post) for the period between Nov 22 2019 and May 29 2020, but there are hundreds more! Try adding more outcrops using the forms below and see them appear on the map! You can download the geojson file you create`32:T4de,viewof map = { const box = html`

`; const context = DOM.context2d(width, reactiveHeight); box.appendChild(context.canvas); console.log("map cell just ran"); //const attribution = html`

${parsedStyle.sources.openmaptiles.attribution}

`; //box.appendChild(attribution); const loadStatus = html`

`; box.appendChild(loadStatus); box.value = { context, loadStatus, drawMarker }; var pos = []; box.onclick = function(e) { var rect = context.canvas.getBoundingClientRect(); pos = [e.clientX - rect.left, e.clientY - rect.top]; console.log("click inside: " + pos); mutable coordXY = [e.clientX - rect.left, e.clientY - rect.top]; }; function drawMarker(click) { console.log("SVG loc: " + click); d3.select('svg').remove(); const svg = d3 .select(box) .append('svg') .style("position", "absolute") .style("z-index", 2) .attr("width", 12) .attr("height", 12) .style("top", click[1] - 6) .style("left", click[0] - 6); svg .append('circle') .attr("r", 6) .attr("cx", 6) .attr("cy", 6) .style("fill", "red"); } return box; }33:T5c2,function initGeoJsonLoader(key, source) { let layerId = source.vector_layers[0].id; function request({ z, x, y, callback }) { var data = [ { [layerId]: { type: "FeatureCollection", compressed: [{}], features: [{}] } } ][0]; //this is the structure the addPaths is expecting //console.log("z/x/y: " + z + "/" + x + "/" + y); var tile = source.tiles.getTile(z, x, y); //request tile var replacedTile = []; if ( tile && tile !== "null" && tile !== "undefined" && tile.features.length > 0 ) { for (let i = 0; i < tile.features.length; i++) { replacedTile[i] = replacer(tile.features[i]); } data[layerId].compressed = replacedTile; data[layerId].features = JSON.parse(JSON.stringify(replacedTile)); data[layerId] = addPaths(data[layerId]); } function addPaths(data2) { data2.compressed.forEach(feature => { feature.path = geomToPath(feature.geometry); delete feature.geometry; }); return data2; } const errMsg = "ERROR in GeojsonLoader for tile z,x,y = " + [z, x, y].join(","); if ( tile && tile !== "null" && tile !== "undefined" && tile.features.length > 0 ) { callback(null, data); } else { callback(errMsg); } function abort() { //img.src = ""; } return { abort }; } return { request }; }34:T567,function geomToPath(geometry) { // Converts a GeoJSON Feature geometry to a Path2D object function pointPath(path, point) { // Draws a Point geometry, which is an array of two coordinates //console.log("Inside the pointPath function"); path.moveTo(point[0], point[1]); path.lineTo(point[0], point[1]); } function linePath(path, points) { // Draws a LineString geometry, which is an array of Points. var p = points[0], i = 0, n = points.length; path.moveTo(p[0], p[1]); while (++i < n) p = points[i], path.lineTo(p[0], p[1]); } function polygonPath(path, lines) { // Draws a Polygon geometry, which is an array of LineStrings //console.log("Inside the polygonPath function"); var i = -1, n = lines.length; while (++i < n) linePath(path, lines[i]); } const pathFuncs = { Point: pointPath, LineString: linePath, Polygon: polygonPath, }; var type = geometry.type; var isMulti = type.substring(0, 5) === "Multi"; if (isMulti) type = type.substring(5); const pathFunc = pathFuncs[type]; const path = new Path2D(); const coords = geometry.coordinates; if (isMulti) { // While loops faster than forEach: https://jsperf.com/loops/32 var i = -1, n = coords.length; while (++i < n) pathFunc(path, coords[i]); } else { pathFunc(path, coords); } return path; }35:Tb45,function nearestFeature(clickXY, featureArray, transformArr) { console.log("nearestFeature function"); var sc = featureArray.scale; var tr = featureArray.translate; var tileIndex = [0, 0]; //x,y var tileCropParams = [0, 0, 0]; //sx,sy,sw var tileCorner = [0, 0]; //tileX, tileY var featureRelToTile = [0, 0]; //tileFeatureX,Y var searchDist = 5; var featureRelToCanvas = [0, 0]; //featureXY var feature = []; var sel = []; var snap = []; var nearest = []; for ( let index = 0; index < featureArray.length; index++ //outer loop for tiles ) { tileIndex = [featureArray[index].x, featureArray[index].y]; tileCropParams = [ featureArray[index].sx, featureArray[index].sy, featureArray[index].sw ]; tileCorner = [(tileIndex[0] + tr[0]) * sc, (tileIndex[1] + tr[1]) * sc]; for ( let i = 0; i < featureArray[index].tile.data.outcropFeatures.features.length; i++ //Inner loop for all features within a tile ) { featureRelToTile = featureArray[index].tile.data.outcropFeatures.features[i].geometry .coordinates; featureRelToCanvas = [ tileCorner[0] + ((featureRelToTile[0] - tileCropParams[0]) * sc) / tileCropParams[2], tileCorner[1] + ((featureRelToTile[1] - tileCropParams[1]) * sc) / tileCropParams[2] ]; if ( Math.abs(clickXY[0] - featureRelToCanvas[0]) < searchDist && Math.abs(clickXY[1] - featureRelToCanvas[1]) < searchDist ) { //console.log("selection updated"); // mutable selection = [ // (featureRelToCanvas[0] - transformArr.x) / transformArr.k, // (featureRelToCanvas[1] - transformArr.y) / transformArr.k // ]; // sel = [ // (featureRelToCanvas[0] - transformArr.x) / transformArr.k, // (featureRelToCanvas[1] - transformArr.y) / transformArr.k // ]; // snap = [ // parseInt(featureRelToCanvas[0]), // parseInt(featureRelToCanvas[1]) // ]; feature = JSON.parse( JSON.stringify( featureArray[index].tile.data.outcropFeatures.features[i] ) ); feature.properties.featureRelToCanvas = featureRelToCanvas; mutable transformAtClick = [ (featureRelToCanvas[0] - transformArr.x) / transformArr.k, (featureRelToCanvas[1] - transformArr.y) / transformArr.k ]; //mutable transformAtClick.x = transformArr.x; //mutable transformAtClick.y = transformArr.y; //nearest.value = { feature, sel, snap }; // nearest.dispatchEvent(new CustomEvent("input")); break; } } if (feature.length !== 0) { break; } } // console.log("feature: " + JSON.stringify(feature)); return feature; //return nearest; }36:T4b2,function showOutcrop(clickXY, featureArray, transformArr) { console.log("showOutcrop function"); const svgOutcrop = d3.select(DOM.svg(width, 600)); const error = md`Click on an outcrop on the map`; var data = nearestFeature(clickXY, featureArray, transformArr); console.log("nearest outcrop at " + clickXY + " is: " + JSON.stringify(data)); if (Object.keys(data).length !== 0) { mutable datacp = nearestFeature(clickXY, featureArray, transformArr); } svgOutcrop .append('a') .attr("target", "_blank") .attr("xlink:href", mutable datacp.properties.moreInfo) .append('image') .attr('xlink:href', mutable datacp.properties.imageLink) .attr('height', 600) .attr('width', width); const group = svgOutcrop.append('g'); group .append('a') .attr("xlink:href", mutable datacp.properties.moreInfo) .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", 40) .style("fill", "rgba(38, 12, 12, 0.5)"); group .append('text') .attr("x", 20) .attr("y", 30) .style("fill", "yellow") .attr("font-size", "20px") .text(mutable datacp.properties.name); return svgOutcrop.node(); }37:T521,function initSources(style) { const queue = chunkedQueue.init(); const { sources, layers } = style; const getters = {}; const workerMonitors = []; const listenerDiv = DOM.element("div"); Object.entries(sources).forEach(([key, source]) => { var loader; if(source.type === "vector"){ loader = initVectorLoader(key, source);} if(source.type === "geojson"){ loader = initGeoJsonLoader(key, source);} if(source.type === "raster"){ loader = initRasterLoader(source);} let tileFactory = buildFactory(loader, listenerDiv); getters[key] = initSource({ source, tileFactory }); }); function initVectorLoader(key, source) { let subset = layers.filter( l => l.source === key && l.type !== "fill-extrusion" ); let loader = tileMixer.initTileMixer({ source, layers: subset, queue }); workerMonitors.push(loader.workerTasks); return loader; } function getTilesets(viewpt, transfm) { const tilesets = {}; Object.entries(getters).forEach(([key, getter]) => { tilesets[key] = getter.getTiles(viewpt, transfm); }); queue.sortTasks(); return tilesets; } return { getTilesets, workerTasks: () => workerMonitors.reduce((sum, counter) => sum + counter(), 0), queuedTasks: () => queue.countTasks() }; }38:T712,function initSource({ source, tileFactory }) { const { type, tileSize = 512, minzoom, maxzoom } = source; const tileCache = tileRack.initCache(tileSize, tileFactory); var numTiles = 0; // Set up the tile layout const layout = d3tileAlternate .tile() .tileSize(tileSize * Math.sqrt(2)) // Don't let d3-tile squeeze the tiles // TODO: Don't order tiles if they won't be displayed at the current zoom!! // ALSO: fix tile-rack to limit how far back it will go in parent tiles, at least // don't go back before minzoom, possibly check priority of parent tile //.minZoom(minzoom) // BAD IDEA! Requests a huge number of tiles! .maxZoom(maxzoom) .clampX(false); // Allow panning across the antimeridian function getTiles(viewport, transform) { // Get the grid of tiles needed for the current viewport layout.size(viewport); let tiles = layout(transform); // Retrieve a tile box for every tile in the grid const grid = tiles.map(([x, y, z]) => { const [xw, yw, zw] = d3.tileWrap([x, y, z]); const box = tileCache.retrieve([zw, xw, yw]); if (!box) return; // Add tile indices to returned box return Object.assign(box, { x, y, z }); }); // Avoid seams between tiles: round coordinate transform to the nearest pixel // TODO: Problematic if different sources have different tile sizes! let tilePixels = Math.round(tiles.scale * devicePixelRatio); grid.scale = tilePixels / devicePixelRatio; grid.translate = tiles.translate.map( x => Math.round(x * tilePixels) / tilePixels ); // Prune the cache let metric = getTileMetric(layout, tiles, 1.5); numTiles = tileCache.trim(metric, 0.9); return grid; } return { getTiles, numTiles: () => numTiles }; }39:[{"id":"47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","href":"https://static.observableusercontent.com/files/47ba3fea956f52f84df48239baaa36543c414f638970418d5b729296ff3c9867fe4fb2cf74a692e082c1460074264429bda23850a5edb474d6328b27d2672e93","name":"osm-bright-style.json","type":"application/json","lastModified":1590080847025.243,"size":65903},{"id":"c11907343af9c891609aff443798ea48c65a2cc1fa5c14bd456a981fd7f7347edc47ee7a7cb8557b7c5e2b5a13e84757d6caf0b38dc70ca21a783b98dcdfbfde","href":"https://static.observableusercontent.com/files/c11907343af9c891609aff443798ea48c65a2cc1fa5c14bd456a981fd7f7347edc47ee7a7cb8557b7c5e2b5a13e84757d6caf0b38dc70ca21a783b98dcdfbfde","name":"osm-liberty-style.json","type":"application/json","lastModified":1590080847025.243,"size":44883},{"id":"fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","href":"https://static.observableusercontent.com/files/fadfb28887f29946b61ffcbb854378b66eb03e7542f6c80ab3862c3671057004ebf51f07cd3190dda6d71c7632a9969fffa543369c1618eabdfa6b9912879aa0","name":"positron-style.json","type":"application/json","lastModified":1590080847025.243,"size":45595},{"id":"2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","href":"https://static.observableusercontent.com/files/2191d60851541e6cde1e2607ecac41174d197baf39e92e45594dcf30b3e2892d1edcd170504b1ca4fbf346f8fd92d75639e3f7a00e4fcdc590599293e1c9dac3","name":"fiord-color-style.json","type":"application/json","lastModified":1590080847025.243,"size":42592},{"id":"5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","href":"https://static.observableusercontent.com/files/5062b7491b1c6514ecb9dc2d5828b2c87f46ff1063f633faac339fa56828aeb4c52f74bb7c62e8b5bc8de72764ea0eacf068369092ce616f7b3c5217d7152270","name":"dark-matter-style.json","type":"application/json","lastModified":1590080847025.243,"size":38184},{"id":"5e7cd150a2355987547a6ee65f15fce38360d7ea183131c599999710f64f8eeebb9f5b2c5db3b394195f8c57bb724f328d31d5bc2608ec83b841e713bbb1d443","href":"https://static.observableusercontent.com/files/5e7cd150a2355987547a6ee65f15fce38360d7ea183131c599999710f64f8eeebb9f5b2c5db3b394195f8c57bb724f328d31d5bc2608ec83b841e713bbb1d443","name":"klokantech-terrain-style.json","type":"application/json","lastModified":1590080847025.243,"size":34784},{"id":"195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","href":"https://static.observableusercontent.com/files/195a75df8e2204e1e886621472f631521ab95f1ec3ea1224b022a957bef98123889096c8dd29dc1e5d7a53cbc153e1fbac723ee648a9fbb5a0eed8d09ea0fa19","name":"klokantech-basic-style.json","type":"application/json","lastModified":1590080847025.243,"size":23138},{"id":"29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","href":"https://static.observableusercontent.com/files/29058bcc00c6ff5d6c5e1fc15ae86584f8599a209d9dff2b60bafb7ae3e2d09b6ca6665df2a32a3d543fbc72c801d608cde553cc83bb0a52e1641b569c4a7b8c","name":"toner-style.json","type":"application/json","lastModified":1590080847025.243,"size":16852},{"id":"db0aeadb0f043b8ad76be52c3e07c32f233a9be828ecb0f19f8167593b55309012376e00cb13f8d2cd036ee687b0210dfc122ca76706fa8018f91a5e264784a5","href":"https://static.observableusercontent.com/files/db0aeadb0f043b8ad76be52c3e07c32f233a9be828ecb0f19f8167593b55309012376e00cb13f8d2cd036ee687b0210dfc122ca76706fa8018f91a5e264784a5","name":"FridayFolds_init.json","type":"application/json","lastModified":1590986833759.71,"size":5300}] 2f:{"title":"Mapping Callan Bentley's Friday Folds","cells":[{"id":0,"value":"md`# Mapping Callan Bentley's Friday Folds`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4171,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"viewof styleChoice = {\n const form = html`\n `;\n form.i.onchange = () => {\n form.value = styleOptions[form.i.selectedIndex];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.i.selectedIndex = 0;\n form.value = styleOptions[form.i.selectedIndex];\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3982,"value":"showOutcrop(coordXY, tiles, transform)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4354,"value":"md`This image is a link to it's post on the AGU Mountain Beltway Blog. Click on it to read Callan Bentley's interpretation and reader comments.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4053,"value":"md`## Try adding more outcrops to the map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4256,"value":"md`This notebook fills out the geojson properties automatically and lets you add lng/lat by either searching the photo's metadata(it would be ideal if all pictures had GPS info, but most don't), or by doing a location keyword search powered by the [OpenStreetMaps Nominatim API](https://nominatim.openstreetmap.org/), or by entering them manually. The code for the metadata search comes from [this notebook](https://observablehq.com/@fil/hello-piexifjs) by Philippe Rivière`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4193,"value":"md`Pick a page from the Friday Fold Archives and an entry from that page:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4058,"value":"viewof page = number({\n value: \"4\",\n title: \"\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4082,"value":"viewof foldUrl = select({\n title: \"\",\n description: \"\",\n options: foldLinks,\n value: foldLinks[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4085,"value":"md`Here is my best guess for the outcrop picture from this page. \n
Doesn't look right? You can override with your own link: (Gigapan is not yet supported)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4087,"value":"viewof imageLink = text({title: \"Image link\", value: foldImageUrl, description: \"\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4089,"value":"{\n const svgQC = d3.select(DOM.svg(width, 300));\n svgQC\n .append('image')\n .attr('xlink:href', imageLink)\n .attr('height', 300)\n .attr('width', width)\n .style(\"top\", 0)\n .style(\"left\", 0);\n return svgQC.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4091,"value":"md`Here is the rest of the image information that will be added to the geojson properties:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4093,"value":"viewof imageName = text({\n title: \"Name\",\n value: foldNames[foldLinks.indexOf(foldUrl)],\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4095,"value":"viewof moreInfo = text({\n title: \"Link to the blog page\",\n value: foldUrl,\n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4097,"value":"md`Finally, we need to assign a location to the image. Select a method below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4122,"value":"viewof coordMethod = select({\n title: \"\",\n description: \"\",\n options: [\n \"Manually enter lng/lat\",\n \"Search using location keywords\",\n \"Use the picture's metadata\"\n ],\n value: \"Search using location keywords\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4132,"value":"md`If you selected the option for a keyword search, enter the keywords here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4124,"value":"viewof searchString = text({\n title: \"\",\n value: \"Calafia,State,Beach\",\n description: \"comma separated. Go to the post for clues: \" + foldUrl,\n submit: \"Go\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4126,"value":"viewof coords = coordinates({\n title: \"Coordinates of the outcrop\",\n description: \"\",\n value: loc,\n submit: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4131,"value":"md`All done? Now click on the button below to add this feature to the map!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4134,"value":"html2``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2441,"value":"outcropFeatures = FileAttachment(\"FridayFolds_init.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4205,"value":"md` ## Pieces of the Code:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4209,"value":"md`### Piece 1: Scraping data from [Callan Bentley's AGU blog](https://blogs.agu.org/mountainbeltway/):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4099,"value":"foldLinks = {\n var foldLinks = [];\n var temp = \"\";\n for (var i=5; i<=23; i=i+2){\n //link = $(\"#blog-archives\")[0].children[i].children[3].children[0].attribs.href;\n //name =$(\"#blog-archives\")[0].children[i].children[3].children[0].attribs.title.split(\":\")[1];\n temp = $(\"#blog-archives\")[0].children[i].children[3].children[0].attribs.href;\n foldLinks.push(temp);\n }\n return foldLinks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4101,"value":"foldNames = {\n var foldNames = [];\n var temp = \"\";\n for (var i=5; i<=23; i=i+2){\n //link = $(\"#blog-archives\")[0].children[i].children[3].children[0].attribs.href;\n //name =$(\"#blog-archives\")[0].children[i].children[3].children[0].attribs.title.split(\":\")[1];\n temp = $(\"#blog-archives\")[0].children[i].children[3].children[0].attribs.title.split(\":\")[1];\n foldNames.push(temp);\n }\n return foldNames;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4103,"value":"archives = await axios({\n method: \"get\",\n url: fridayFoldUrl\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4105,"value":"$$ = cheerio.load(archives.data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4107,"value":"foldImageUrl = {\n var fold = await axios({\n method: \"get\",\n url: \"https://aroycorsanywhere.herokuapp.com/\" + foldUrl\n });\n var $ = cheerio.load(fold.data);\n var a = $(\"#blog-single\")[0].children[1].children[1].children[7].children;\n var l = a.length;\n var link = \"\";\n for (var j = 0; j < l; j++) {\n var tmp = a[j];\n //console.log(j);\n while (tmp.type == \"tag\" && tmp.children.length >= 0) {\n //console.log(tmp);\n\n if (tmp.name == \"img\") {\n link = tmp.attribs.src;\n //console.log(link);\n break;\n } else {\n if (tmp.children.length == 0) {\n //console.log(\"flag\");\n break;\n }\n tmp = tmp.children[0];\n }\n }\n if (link !== \"\") {\n break;\n }\n }\n return link;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4109,"value":"loc={\n //if(coordMethod ==\"Use the picture's metadata\"){ return metaLngLat;}\n if(coordMethod ==\"Search using location keywords\"){ return keywordLngLat;}\n if(coordMethod ==\"Manually enter lng/lat\"){ return [0,0];}\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4111,"value":"keywordLngLat = {\n if(searchString !== \"\"){\n var searchURL =\"https://nominatim.openstreetmap.org/search?q=\"+searchString.split(\",\")+\"&format=json&limit=1\";\n searchURL = searchURL.replace(/,/gi, '+');\n var result = await d3.json(searchURL);\n return([parseFloat(result[0].lon), parseFloat(result[0].lat)]);\n }else{return[];}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4114,"value":"gps=piexif.load(`data:image/jpeg;base64,${_arrayBufferToBase64(image)}`).GPS","pinned":false,"hidden":false,"mode":"ojs"},{"id":4118,"value":"image = fetch(imageLink).then(d => d.arrayBuffer())","pinned":false,"hidden":false,"mode":"ojs"},{"id":4120,"value":"function _arrayBufferToBase64( buffer ) {\n var binary = '';\n var bytes = new Uint8Array( buffer );\n var len = bytes.byteLength;\n for (var i = 0; i < len; i++) {\n binary += String.fromCharCode( bytes[ i ] );\n }\n return window.btoa( binary );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4116,"value":"metaLngLat = {\n if (JSON.stringify(gps) !== \"{}\"){\n var lat = parseFloat(gps[2][0][0]/gps[2][0][1])+parseFloat(gps[2][1][0]/gps[2][1][1])/60+parseFloat(gps[2][2][0]/gps[2][2][1])/3600;\n var lon = parseFloat(gps[4][0][0]/gps[4][0][1])+parseFloat(gps[4][1][0]/gps[4][1][1])/60+parseFloat(gps[4][2][0]/gps[4][2][1])/3600;\n if (gps[1]==\"S\"){lat=lat*-1;}\n if (gps[3]==\"W\"){lon=lon*-1;}\n return[lon,lat];\n }else{ return [];}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4081,"value":"function addData(geojson) {\n var template2 = [\n {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [0, 0]\n },\n properties: {\n name: \"\",\n imageLink: \"\",\n moreInfo: \"\"\n }\n }\n ];\n template2[0].geometry.coordinates = coords;\n template2[0].properties.name = imageName;\n template2[0].properties.imageLink = imageLink;\n template2[0].properties.moreInfo = moreInfo;\n outcropFeatures.features.push(template2[0]);\n\n //Update tileIndex\n mutable tileIndex = updateTileIndex(geojson);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4384,"value":"{\n //Pre-load the outcrop image for the QC cell\n var a = 0;\n d3.image(imageLink);\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4214,"value":"md`### Piece 2: Converting the geojson to tiles for the vector map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4223,"value":"md`See this [earlier notebook](https://observablehq.com/@ananya-roy/adding-custom-layers-to-a-vector-map-with-geojson-vt) for more detail on this step`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4400,"value":"function updateTileIndex(geojson) {\n return geojsonvt(outcropFeatures, {\n maxZoom: 14, // max zoom to preserve detail on; can't be higher than 24\n tolerance: 0, // simplification tolerance (higher means simpler)\n extent: 512, // tile extent (both width and height)\n buffer: 64, // tile buffer on each side\n debug: 0, // logging level (0 to disable, 1 or 2)\n lineMetrics: false, // whether to enable line metrics tracking for LineString/MultiLineString features\n promoteId: null, // name of a feature property to promote to feature.id. Cannot be used with `generateId`\n generateId: false, // whether to generate feature ids. Cannot be used with `promoteId`\n indexMaxZoom: 5, // max zoom in the initial tile index\n indexMaxPoints: 100000 // max number of points per tile in the index\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4415,"value":"mutable tileIndex = updateTileIndex(outcropFeatures)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2447,"value":"styleDoc3 = {\n var styleDoc3 = JSON.parse(JSON.stringify(styleDoc));\n styleDoc3.sources[\"outcropFeatures\"] = {\n type: \"geojson\",\n tiles: tileIndex,\n minzoom: 0,\n maxzoom: 14,\n tileSize: 512,\n vector_layers: [{ id: \"outcropFeatures\", minzoom: 0, maxzoom: 14 }]\n };\n styleDoc3.layers[styleDoc.layers.length] = [\n {\n id: \"outcropFeatures\",\n type: \"circle\",\n source: \"outcropFeatures\",\n \"source-layer\": \"outcropFeatures\",\n layout: { visibility: \"visible\" },\n paint: { \"circle-radius\": 4, \"circle-color\": \"blue\" }\n }\n ][0];\n return styleDoc3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2202,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"function replacer(value) {\n //http://www.scgis.net/api/ol/v4.1.1/examples/geojson-vt.html\n if (value.geometry) {\n var type;\n var rawType = value.type;\n var geometry = value.geometry;\n\n if (rawType === 1) {\n type = geometry.length === 1 ? 'Point' : 'MultiPoint';\n } else if (rawType === 2) {\n type = geometry.length === 1 ? 'LineString' : 'MultiLineString';\n } else if (rawType === 3) {\n type = geometry.length === 1 ? 'Polygon' : 'MultiPolygon';\n }\n\n if (rawType === 1) {\n return {\n geometry: {\n type: type,\n coordinates: geometry.length == 1 ? geometry[0] : [geometry]\n },\n properties: value.tags\n };\n } else {\n return {\n geometry: {\n type: type,\n coordinates: geometry.length == 1 ? geometry : [geometry]\n },\n properties: value.tags\n };\n }\n } else {\n return value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1686,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4050,"value":"md`### Piece 3: Making the geojson interactive`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3343,"value":"tiles = {\n var tmp = sources2.getTilesets([width, reactiveHeight], transform)\n .outcropFeatures;\n while (typeof tmp[0] === \"undefined\") {\n tmp = sources2.getTilesets([width, reactiveHeight], transform)\n .outcropFeatures;\n }\n return tmp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2902,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3977,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3577,"value":"mutable transformAtClick = [-0.326171875, -0.109375]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3708,"value":"snap = marker(transform)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3594,"value":"function marker(transformArr) {\n var a = transformAtClick[0] * transformArr.k + transformArr.x;\n var b = transformAtClick[1] * transformArr.k + transformArr.y;\n return [parseInt(a), parseInt(b)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3223,"value":"mutable coordXY = [143, 88]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3978,"value":"mutable datacp = [\n {\n geometry: { type: \"Point\", coordinates: [89, 200] },\n properties: {\n name: \" a false syncline in Titus Canyon\",\n imageLink:\n \"https://blogs.agu.org/mountainbeltway/files/2020/03/false-syncline-titus-canyon.jpg\",\n moreInfo:\n \"https://blogs.agu.org/mountainbeltway/2020/03/27/friday-fauxld-a-false-syncline-in-titus-canyon/\",\n featureRelToCanvas: [143, 88]\n }\n }\n][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3930,"value":"Promises.delay(2000, map.drawMarker(snap))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4248,"value":"md`### Piece 4: Vector Map Rendering functions from [Jeshrun's notebook](https://observablehq.com/@jjhembd/vector-map-rendering)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2355,"value":"md`Drawing the tiles:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"painters = parsedStyle.layers.map(tileStencil.getStyleFuncs).map(layer => {\n let source = parsedStyle.sources[layer.source];\n\n let tileSize = source ? source.tileSize : 512;\n return tilePainter.initMapPainter({\n context: map.context,\n styleLayer: layer,\n spriteObject: parsedStyle.spriteData,\n tileSize\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"function drawLayers(ctx) {\n ctx.clearRect(0, 0, width, reactiveHeight);\n const tilesets = sources2.getTilesets([width, reactiveHeight], transform);\n //console.log(\"tilesets: \" + JSON.stringify(tilesets.outcropFeatures));\n const zoom = Math.log2(transform.k) - 9;\n painters.forEach(painter => {\n if (zoom < painter.minzoom || painter.maxzoom < zoom) return;\n drawLayer(painter, zoom, tilesets[painter.source]);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"animation = {\n while (true) {\n let workerTasks = \"worker: \" + sources2.workerTasks();\n let queuedTasks = \"queue: \" + sources2.queuedTasks();\n map.loadStatus.innerHTML = workerTasks + \", \" + queuedTasks;\n yield drawLayers(map.context);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"function drawLayer(painter, zoom, tileset) {\n // No tiles for background layers\n if (!tileset) return painter({ zoom });\n\n // console.log(\"tileset: \" + JSON.stringify(tileset.data));\n for (const tileBox of tileset) {\n if (!tileBox) continue;\n\n let position = {\n x: (tileBox.x + tileset.translate[0]) * tileset.scale,\n y: (tileBox.y + tileset.translate[1]) * tileset.scale,\n w: tileset.scale\n };\n\n painter({\n source: tileBox.tile.data,\n position,\n crop: { x: tileBox.sx, y: tileBox.sy, w: tileBox.sw },\n zoom,\n boxes: []\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2358,"value":"md`Collecting data for the map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"parsedStyle = tileStencil.loadStyle(styleDoc3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"sources2 = initSources(parsedStyle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"function buildFactory(loader, listenerDiv) {\n return { create };\n\n function create(z, x, y) {\n let id = [z, x, y].join(\"/\");\n const tile = { z, x, y, id, priority: 0 };\n\n function callback(err, data) {\n if (err) return; // console.log(err);\n //console.log(JSON.stringify(data) );\n tile.data = data;\n tile.rendered = true; // Should be .ready -- requires change to tile-rack\n listenerDiv.dispatchEvent(new Event(\"tileLoaded\"));\n }\n\n const getPriority = () => tile.priority;\n const loadTask = loader.request({ z, x, y, getPriority, callback });\n\n tile.cancel = () => {\n loadTask.abort();\n tile.canceled = true;\n };\n\n return tile;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"function initRasterLoader(source) {\n const getURL = initUrlFunc(source.tiles);\n\n function request({ z, x, y, callback }) {\n const href = getURL(z, x, y);\n const errMsg = \"ERROR in loadImage for href \" + href;\n\n const img = new Image();\n img.onerror = () => callback(errMsg);\n img.onload = () => {\n return img.complete && img.naturalWidth !== 0\n ? callback(null, img)\n : callback(errMsg);\n };\n img.crossOrigin = \"anonymous\";\n img.src = href;\n\n function abort() {\n img.src = \"\";\n }\n\n return { abort };\n }\n\n return { request };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"function initUrlFunc(endpoints) {\n if (!endpoints || !endpoints.length) {\n throw Error(\"ERROR in initUrlFunc: no valid tile endpoints!\");\n }\n\n // Use a different endpoint for each request\n var index = 0;\n return function(z, x, y) {\n index = (index + 1) % endpoints.length;\n var endpoint = endpoints[index];\n return endpoint\n .replace(/{z}/, z)\n .replace(/{x}/, x)\n .replace(/{y}/, y);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`Map position and zoom:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"d3\n .select(map.context.canvas)\n //.select(map)\n .call(zoomer)\n .call(zoomer.transform, mutable transform)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"zoomer = d3\n .zoom()\n .scaleExtent([1 << 10, 1 << 26])\n .extent([[0, 0], [width, reactiveHeight]])\n .translateExtent([[-Infinity, -0.5], [Infinity, 0.5]])\n .on(\"zoom\", () => {\n mutable transform = d3.event.transform;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"mutable transform = d3.zoomIdentity\n .translate(projection([0, 0])[0], projection([0, 0])[1])\n .scale(projection.scale() * 2 * Math.PI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"projection = d3\n .geoMercator()\n //.center([-73.886, 40.745])\n .center([0, 0])\n .scale(Math.pow(2, 10) / (2 * Math.PI))\n .translate([width / 2, reactiveHeight / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4241,"value":"md`Style Document:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"styleDoc = {\n //let doc = await FileAttachment(\"klokantech-basic-style.json\").json();\n let doc = await styleChoice.file.json();\n\n const maptilerKey = \"mrAq6zQEFxOkanukNbGm\"; // Get your own key: maptiler.com\n Object.values(doc.sources).forEach(src => {\n if (src.url) src.url = src.url.replace(/{key}/, maptilerKey);\n });\n\n return doc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"styleOptions = [\n {\n name: \"Klokantech Terrain\",\n file: FileAttachment(\"klokantech-terrain-style.json\")\n },\n { name: \"Toner\", file: FileAttachment(\"toner-style.json\") },\n {\n name: \"Klokantech Basic\",\n file: FileAttachment(\"klokantech-basic-style.json\")\n },\n { name: \"Dark Matter\", file: FileAttachment(\"dark-matter-style.json\") },\n { name: \"Fiord Color\", file: FileAttachment(\"fiord-color-style.json\") },\n { name: \"Positron\", file: FileAttachment(\"positron-style.json\") },\n {\n name: \"OSM Liberty\",\n file: FileAttachment(\"osm-liberty-style.json\")\n },\n { name: \"OSM Bright\", file: FileAttachment(\"osm-bright-style.json\") }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`\n\n

Noto Sans: The quick brown fox jumped over the lazy dog.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`Miscellaneous constants:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"// Make sure we fill the screen when in full-screen mode\n//reactiveHeight = Math.ceil((width * screen.height) / screen.width)\nreactiveHeight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`### Imported modules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"geojsonvt = require('geojson-vt')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4060,"value":"import {coordinates} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4061,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4063,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4065,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4067,"value":"import {number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4069,"value":"fridayFoldUrl = \"https://aroycorsanywhere.herokuapp.com/https://blogs.agu.org/mountainbeltway/category/friday-fold/page/\" +\n page","pinned":false,"hidden":false,"mode":"ojs"},{"id":4071,"value":"html2 = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":4073,"value":"htl = require(\"htl@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4075,"value":"axios = require(\"axios@0.19.0/dist/axios.js\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":4129,"value":"cheerio = require('https://bundle.run/cheerio@1.0.0-rc.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4077,"value":"piexif = require('https://bundle.run/piexifjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"d3tileAlternate = {\n // Alternate version of d3-tile, that adds minZoom and maxZoom setters\n const response = await fetch(\n \"https://raw.githubusercontent.com/GlobeletJS/d3-tile/master/dist/d3-tile.min.js\"\n );\n const blob = await response.blob();\n return require(URL.createObjectURL(blob)).catch(() => window.tileMaxZoom);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"import { getTileMetric } from \"@jjhembd/map-tile-priorities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"tileRack = import(\"tile-rack@0.2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"tilePainter = import(\"tile-painter@0.3.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"chunkedQueue = import(\"chunked-queue@0.1.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"tileMixer = import(\"tile-mixer@0.0.8\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"tileStencil = import('tile-stencil@0.2.1')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}