2e:null 2f:["$","title",null,{"children":"Mapa - Advanced Techniques | Michael Bricknell | Observable"}] 34:T483,mapa = new Mapa({ layer: { polys: { show: true, data: [ { geometry: [ // option 1 not enough points for large area, creates a curve bbox // turf.polygon(bounder.bounds).geometry, // option 2 can use country shapes // countries.find((d) => d.properties.ISO_A2 === "US"), // option 3 can filter out a region // ...countries.filter((d) => d.properties.SUBREGION === "Northern Africa"), // option 4 😥 too much nesting a bbox of a region, added a densify function densify( turf.bbox({ type: "FeatureCollection", features: countries.filter( (d) => d.properties.SUBREGION === "Northern Africa" ) }) ), // option 5 👀 use bounder bounder.bbox // static reference to the orginal //options 6 use another Mapa ], style: { fill: "red", "fill-opacity": 0.4 } } ] } }, //requires a feature basemap: { ocean: { style: { fill: "#d0d5d3" } } } })35:[{"id":"42a61e5288176e2d9fd548f10c608f8a3d96f2236d317569fdf95e4c0f7ca02467e2d29012e9a805f73d03709621721e494b34c76e0ab77faee4f82adf884be8","href":"https://static.observableusercontent.com/files/42a61e5288176e2d9fd548f10c608f8a3d96f2236d317569fdf95e4c0f7ca02467e2d29012e9a805f73d03709621721e494b34c76e0ab77faee4f82adf884be8","name":"3435ac60-e632-4017-a04b-8cc1de41fa4f_text.gif","type":"image/gif","lastModified":1772979493343.097,"size":352307}] 32:{"id":"080c520a221dae73","slug":"mapa-advanced-techniques","title":"Mapa - Advanced Techniques","thumbnail":"2e77b174add24c0073cff0e11021266961cf46a80cfec571cc56299358871c9c","access_level":"public","create_time":"$D2026-03-08T14:18:13.343Z","update_time":"$D2026-04-10T10:55:26.005Z","view_time":null,"first_public_time":"$D2026-03-08T14:18:13.343Z","has_unpublished_edits":null,"fork":{"id":"79624aa6cc8ee3e0","slug":"mapa-documentation","title":"Mapa - Documentation","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"stars":1,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":1400,"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":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9d18c6b35acf017e","slug":"mapa","title":"Mapa","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Mapa - Advanced Techniques","cells":[{"id":0,"value":"# Mapa - Advanced Techniques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"ac60E6324017A04b8cc1de41fa4f_text = FileAttachment(\"3435ac60-e632-4017-a04b-8cc1de41fa4f_text.gif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"Listen, kid, we're all in this together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"# Getting Started","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"

Note: add .render to any Mapa Class to see its output

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1055,"value":"See [Documentation](https://observablehq.com/@mbrickmaps/mapa-documentation) for basics and getting started, continue on for more advanced functions, such as Insets, Layouts, and Labeling. It is helpful to have \nosgeo utilties cli (gdal/ogr), but not required.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"# Simplification on the fly","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1366,"value":"add a global simplify defaults to 0.01, to keep layers from simplifying add a false flag to the layer object\n\n```js\n[\n {\n simplify: false,\n geometry: myCustomItalicsLabels.features,\n style: { fill: \"#dfa837\", \"fill-opacity\": 0.8 }\n }\n],```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1380,"value":"# Overlays\n## Gradients\n```javascript\n graphic: {\n background: \"#1c1948\",\n gradient: [\n { fill: \"url(#v-50-b)\", blendMode: \"multiply\", opacity: 0.6 }, // added first\n { fill: \"url(#v-fade-w)\", blendMode: \"overlay\", opacity: 1 } // will mask out the lower rect.\n ]\n }```\n\nvignettes \n- v-25-b //radius 25%\n- v-50-b\n- v-75-b\n- v-25-w\n- v-50-w\n- v-75-w\n\nhorizontal fades //linear 0 50 100 l -> r\n- h-fade-b\n- h-fade-rb (reversed)\n- h-fade-w\n- h-fade-rw\n\nvertical fades \n- v-fade-b\n- v-fade-rb\n- v-fade-w\n- v-fade-rw\n\ncorners\n- ul-b // upper left x1 y1\n- ur-b // upper right\n- br-b // bottom right\n- bl-b /// bottom left\n- ul-w \n- ur-w\n- br-w\n- bl-w\n\nedges\n- l-b\n- r-b\n- l-w\n- r-w\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"# Layer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":352,"value":" ```javascript\n points: Object {show: false, data: null} // good for labeling, poi, markers\n polys: Object {show: false, data: null} // polygons polylines\n tiles: Object {show: false, data: null} // reprojectable — not locked to Mercator\n grids: Object {show: false, data: null} // graticules, qtree, geogrid (general-purpose spatial aggregation) should be removed\n raster: Object {show: false, data: Array(0)} // requires worldfile; Mercator only\n annotations: Object {show: false, data: Array(0)} // uses [Susie Lu] (https://d3-annotation.susielu.com/)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1063,"value":"# Points (Symbols, Labeling)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1065,"value":"# Polys (Polylines/Polygons)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1068,"value":"# Tiles (TMS/XYZ)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"# Raster (worldfile)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1092,"value":"# Labeling (geoFont)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1355,"value":"# Annotations ([Susie Lu's d3-annotations](https://d3-annotation.susielu.com/))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"# Basemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"These are preloaded Natural Earth topojson, however feel free to use your own, all it expects is an array of features, and a style, data should be in 4326 lat lon WGS84, but can be reprojected by setting the projection\n\n```javascript\n raster: Object {show: false, worldfile: Object}\n coastline: Object {show: true, style: Object}\n background: Object {show: false, style: Object}\n land: Object {show: true, geometry: Array(252), key: \"GID_0\", label: \"NAME_0\", style: Object}\n border: Object {show: true, geometry: Array(252), style: Object}\n ocean: Object {show: true, geometry: null, style: Object}\n lake: Object {show: true, geometry: Array(1355), style: Object}\n river: Object {show: false, geometry: null, style: Object}\n graticule: Object {show: false, style: Object}\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"myBounder = new Bounder({\n extent: d3.geoBounds(countries.find((d) => d.properties.ISO_A2 === \"IN\")) //singular geom use .filter for multiple\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"viewof bounder = myBounder.render","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"bounder","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"bounder.bbox","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"JSON.stringify(bounder.bounds)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"# Layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":737,"value":"This utility is about adding items on top of the map elements as an overlay, for ancillary items. Things like titles, legends, north arrows, inset maps, logos, source notes, etc. Elements that sit above the map but aren't necessarily geographic data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1116,"value":"# Insets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1120,"value":"- tindex (tile index file) (if using a world file)\n- using bounder (if using viewof bounder)\n- using a bbox (if you have a geometry)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1145,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"mapa.geoExtent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"mapa.render","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"densify(\n turf.bbox({\n type: \"FeatureCollection\",\n features: countries.filter(\n (d) => d.properties.SUBREGION === \"Northern Africa\"\n )\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"turf.polygon(bounder.bounds).geometry","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"turf.rewind(\n turf.envelope({\n type: \"FeatureCollection\",\n features: countries.filter(\n (d) => d.properties.SUBREGION === \"Northern Africa\"\n )\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"# Helper Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1080,"value":" getCities, getCapitol, getOSM, isoQ, geoFont, symbolGrid, getDistance, addViewfinder ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1110,"value":"# Other Notebooks\nhttps://observablehq.com/@mbrickmaps/blend-modes-for-cartography\nhttps://observablehq.com/@mbrickmaps/image-blender\nhttps://observablehq.com/@mbrickmaps/raster-overlay-drag-and-drop\nhttps://observablehq.com/@mbrickmaps/elevating-terrain\nhttps://observablehq.com/@mbrickmaps/color-ramps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"# Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"Only imports required are Mapa, d3-min from \"@mbrickmaps/mapas\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"import {\n r,\n rivers,\n lakes,\n oceans,\n c,\n countries,\n coastlines,\n urban,\n innerlines,\n pr\n} from \"@mbrickmaps/ne-10m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {\n Mapa,\n d3_min as d3,\n getCities,\n getCapitol,\n getOSM,\n isoQ,\n geojsonrewind,\n turf,\n densify\n} from \"@mbrickmaps/mapas\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {fontMap, fontStyles, loadFonts, fontUrls} from \"@mbrickmaps/font\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {TextGeometry, renderLabels} from \"@mbrickmaps/geofont\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { flagUrls as flagLink } from \"@mbrickmaps/flag-icons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import { symbolGrid } from \"@mbrickmaps/make-a-grid\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import { style, Bounder } from \"@mbrickmaps/bounder\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"