2e:null 2f:["$","title",null,{"children":"MapaCanvas Demo | Michael Bricknell | Observable"}] 34:T554,mutable defaultSettings = ({ // Position dir: "NE", // Cardinal direction: N, NE, E, SE, S, SW, W, NW distance: 10, // Distance from anchor point in pixels // Text styling fontSize: 24, fontWeight: "normal", // normal, bold, etc fontFamily: "sans-serif", //fontFamily: "sans-serif", //<-- color: "#000", letterSpacing: 0, // Text alignment textAlign: "start", // start, middle, end verticalAlign: "middle", // top, middle, bottom // Background backgroundColor: null, // null or color like '#fff' padding: 4, // Padding around text if backgroundColor is set // Effects opacity: 1, blendMode: "source-over", // Canvas composite operation stroke: null, // Text stroke color strokeWidth: 0, dropShadow: null, // {offsetX: 2, offsetY: 2, blur: 3, color: 'rgba(0,0,0,0.5)'} //halo: { width: 0.5, color: "#fff", blur: 2 }, // {width: 2, color: '#fff', blur: 0} // Leader line leaderLine: { show: false, style: "solid", // solid, dashed, dotted, elbow, curved color: "#666", width: 1, dashArray: null, // [5, 5] for custom dash opacity: 0.7 }, // Interaction tooltip: null, // Not implemented yet onClick: null, // function(annotation, event) {} draggable: true, // Visibility minZoom: undefined, // Hide below this zoom level maxZoom: undefined // Hide above this zoom level })35:T5d1,world = new MapaCanvas({ showStats: false, width: 800, //viewbox height: 800, //viewbox container: html`

`, projection: selectedProjection, scaleExtent: [0.5, 12], baseScale: 140, enableInteraction: false, //must be true for aria to work onFeatureClick: function (feature, event) { const name = feature.properties?.NAME || feature.properties?.name || feature.properties?.char || feature.properties?.sr_subunit || "Unknown"; console.log(name); }, //ariaLayer: tiny_countries, TODO //layersLowRes: [[myFeatures, myStyle]], //optional renders on Zoom and Panning //layersLowRes: [], //keep empty if you dont mind the flash layersHighRes: [ //bottom [{ type: "Sphere" }, { fill: "#7994b5", stroke: "#657abb" }], [d3.geoGraticule()(), { stroke: "#6f88af", strokeWidth: 1 }], [tiny_countries, myStyle.tinyCountries], [land, { fill: "#ebdd99", stroke: "none" }], [coastline, { fill: "none", stroke: "#657abb", strokeWidth: 1 }], //[tiny_countries, { fill: "none", stroke: "#657abb" }], [myFeatures.oceanLabels, myStyle.oceanLabels], [ myFeatures.continentLabels, { stroke: "none", fill: "#ab9649", maxZoom: 3 } ] //top ] //<-- .reverse() this })36:T726,myLabels = ({ ocean: [ { text: "Atlantic\nOcean", lng: -38.5, lat: 32.5, scale: 1200, letterSpacing: 100, align: "center" }, { text: "Pacific\nOcean", lng: 140, lat: 12.15, scale: 900, letterSpacing: 80 }, { text: "Pacific Ocean", lng: -160, lat: 2, scale: 1000, letterSpacing: 80 }, { text: "Indian\nOcean", lng: 65, lat: -8.0, scale: 900, scale: 1000, letterSpacing: 80 } ], continent: [ { text: "North\n America™", lng: -100, lat: 45, scale: 800, letterSpacing: -10, lineHeight: 1.05, align: "center" }, { text: "South\nAmerica", lng: -56, lat: -10, scale: 900, letterSpacing: -10, lineHeight: 1.05, align: "center" }, { text: "[ Africa ]", lng: -7, lat: 13, scale: 1200, letterSpacing: 50, lineHeight: 0.75, align: "center" }, { text: "also\nAfrica", lng: 26, lat: -10, scale: 700, letterSpacing: 50, lineHeight: 0.75, align: "center" }, { text: "@Europe", lng: 8, lat: 47.5, scale: 600, letterSpacing: -10, lineHeight: 0.75, align: "center" }, { text: "Asia", lng: 69, lat: 40, scale: 1500, letterSpacing: 30, lineHeight: 0.75, align: "center" }, { text: "antarktikos", lng: -15, lat: -79.5, scale: 800, letterSpacing: 30, align: "center" }, { text: "", lng: 117, lat: -27.5, scale: 800, letterSpacing: 0, lineHeight: 0.75, align: "center" } ] })37:[{"id":"9c5bbe31c904c0e85666dc67dbc4b039e5e528f24fedf6d0073977788f5545481d164cf1b97ea6ef44ae7d828e963674b5c82de65bdd149914a48ff897592fa2","href":"https://static.observableusercontent.com/files/9c5bbe31c904c0e85666dc67dbc4b039e5e528f24fedf6d0073977788f5545481d164cf1b97ea6ef44ae7d828e963674b5c82de65bdd149914a48ff897592fa2","name":"NewAmsterdam-Regular.ttf","type":"font/ttf","lastModified":1759664518750.059,"size":73764}] 32:{"id":"f1ae3cc42980d8fa","slug":"mapacanvas-demo","title":"MapaCanvas Demo","thumbnail":"682df33ee340288e01416c800593101def73905afb11c94b9aecdf38fe474fdc","access_level":"public","create_time":"$D2025-10-05T11:38:18.937Z","update_time":"$D2025-10-08T19:57:21.584Z","view_time":null,"first_public_time":"$D2025-10-05T22:34:16.998Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":1194,"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":1,"collection":null,"type":"notebook","body":{"title":"MapaCanvas Demo","cells":[{"id":0,"value":"# MapaCanvas Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import {\n MapaCanvas,\n MapaCanvasAnnotations,\n pattern2canvas\n} from \"@mbrickmaps/mapa-canvas\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"import { fontMap, fontStyles, loadFonts, fontUrls } from \"@mbrickmaps/font\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"fontMap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"fontStyles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"myMarkers = ({\n city: [\n {\n symbol: d3.symbolCircle,\n size: 100,\n color: \"#fff\",\n strokeColor: \"#333\",\n strokeWidth: 2\n }\n ],\n capital: [\n { symbol: d3.symbolCircle, size: 700, color: \"#3388ff\" },\n {\n symbol: d3.symbolStar,\n size: 120,\n color: \"white\",\n strokeColor: \"brown\",\n strokeWidth: 2\n }\n ],\n town: [{ symbol: d3.symbolCircle, size: 40, color: \"#888\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"annotations = new MapaCanvasAnnotations({\n mapCanvas: world,\n annotations: myAnnotations,\n markerTypes: myMarkers,\n editable: false,\n annotationDefaults: defaultSettings\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"viewof selectedProjection = Inputs.select(\n [\n \"geoRobinson\",\n \"geoEqualEarth\",\n \"geoNaturalEarth1\",\n \"geoMercator\",\n \"geoMiller\",\n \"geoOrthographic\",\n \"geoLagrange\",\n \"geoInterruptedSinuMollweide\",\n \"geoPolyhedralButterfly\",\n \"geoInterruptedMollweideHemispheres\",\n \"geoCraig\",\n \"geoFahey\",\n \"geoGringorten\",\n \"geoGuyou\",\n \"geoHealpix\",\n \"geoWiechel\",\n \"geoMtFlatPolarQuartic\",\n \"geoSinusoidal\",\n \"geoInterruptedSinuMollweide\"\n ],\n { label: \"Projection\", value: \"geoRobinson\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"world.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"mutable myAnnotations = [\n //not part of the base map\n {\n lat: 40.7128,\n lng: -74.006,\n label: \"New York\",\n dir: \"SE\",\n type: \"city\",\n textAlign: \"start\",\n fontFamily: \"NewAmsterdam-Regular\",\n distance: 10\n },\n {\n lat: 38.9,\n lng: -77.0,\n label: \"Washington DC\",\n type: \"capital\",\n dir: \"W\",\n textAlign: \"end\",\n fontFamily: \"Doto-Black\",\n distance: 13\n },\n {\n lat: 51.5074,\n lng: -0.1278,\n label: \"London\",\n dir: \"NE\",\n type: \"city\",\n fontFamily: \"BungeeOutline-Regular\"\n },\n {\n lat: 35.6762,\n lng: 139.6503,\n label: \"Tokyo\",\n dir: \"SE\",\n type: \"city\",\n fontFamily: \"Doto-Thin\"\n },\n {\n lat: -33.8688,\n lng: 151.2093,\n label: \"Sydney\",\n dir: \"S\",\n type: \"city\",\n fontFamily: \"SmoochSans-Regular\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"tiny_countries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"import { pattern } from \"@mbrickmaps/create-a-pattern\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"/*SVG*/\ndisputedPattern = pattern({\n orientation: [\"6/8\"],\n lineSize: 6,\n lineWidth: 0.5,\n accentColor: \"#f1e9cd\",\n backgroundColor: \"#d17c3f\",\n width: 256,\n height: 256\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"/*rasterized*/\ndisputedSwatch = await pattern2canvas(disputedPattern, 45) //<-- scale here","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"viewof rangeX = Inputs.range([1, 10], { label: \"Label X\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"viewof rangeY = Inputs.range([-100, 100], { label: \"Label Y\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"Should be simplified as the main ideas is to format it as.
```[{...features},{...styles}]```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"myFeatures = ({\n oceanLabels: {\n ...makeLabels(myLabels.ocean)\n },\n continentLabels: { ...makeLabels(myLabels.continent) } //set scale minZoom or maxZoom\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"myStyle = ({\n oceanLabels: {\n fill: \"none\",\n stroke: \"#383867\",\n strokeWidth: 0.5,\n hitDetection: true, // everything is false by default\n maxZoom: 3 // 1-3 zoom, minZoom: 3 means beyond 3+, setting both is between\n },\n tinyCountries: {\n //fill: \"rgba(0,255,0,0.25)\",\n fill: disputedSwatch,\n fillOpacity: 0.6, // 70% opacity\n blendMode: \"multiply\",\n hitDetection: true // turn on maybe not the best place\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"//world.getViewState() this is the init view, when a setViewState is temporary view","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"//JSON.stringify(world.getViewState())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"{\n //await visibility();\n /*world.setViewState({\n zoom: 6.640370643375758,\n center: [-70.90553853326598, 16.30628234757245],\n projection: \"geoRobinson\"\n });*/\n //{\"zoom\":9.033495994732455,\"center\":[-62.567319974292396,51.084387593710645],\"projection\":\"geoRobinson\"}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"/* INSTANT JUMP\nImmediately sets all parameters: changes projection to orthographic, rotates globe to [-10, -45, 0], zooms to 4x, centers at [0°, 45°]. No animation - instant snap.\n\nworld.setViewState({\n zoom: 4,\n center: [0, 45],\n projection: \"geoOrthographic\",\n})*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"/* Animates only rotation\nSmoothly rotates the globe from current rotation to [50, -40, 0] over 3 seconds. Doesn't change zoom, center, or projection - only spins the Earth.\n*/\n//world.animateGlobeRotation([50, -40, 0], 3000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"/*\nSmoothly moves the camera: zooms from 4x to 5x and pans to center NYC over 2 seconds. Doesn't rotate the globe - just moves your viewpoint.\n*/\n/*\nworld.animateToView(\n {\n zoom: 5,\n center: [-74.006, 40.7128]\n },\n 2000\n)*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"/*\nworld.setViewState({\n zoom: 4,\n center: [0, 45],\n projection: \"geoOrthographic\",\n rotation: [-10, -45, 0],\n baseScale: 200\n})\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"---\n# Labels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"import { TextGeometry, opentype } from \"@mbrickmaps/geofont\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"Step 1 load a font, ```.ttf``` or ```.otf```
\n- load multiple fonts by loading to observable, then linking into a fontMap with var name","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":835,"value":"Step 2 Convert to GeoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"/*converts font to geojson, projection is used in other applications*/\nselectedFont = new TextGeometry(fontMap.get(\"NewAmsterdam-Regular\"), null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"makeLabels great for setting presets could filter or add param to label.type, could also apply GIS opperations using Turf?.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"function makeLabels(labels) {\n return {\n type: \"FeatureCollection\",\n features: labels.flatMap(\n (label) =>\n selectedFont.render(\n label.text,\n { lng: label.lng, lat: label.lat },\n {\n scale: label.scale,\n letterSpacing: label.letterSpacing || 0,\n lineHeight: label.lineHeight || 1.2,\n align: label.align || \"left\",\n curveSegments: label.curveSegments || 8\n }\n ).features\n )\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"# Geometry","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"hiResPromises","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"import { createDataManager } from \"@mbrickmaps/adjusting-the-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"import { allPromises as hiResPromises } from \"@mbrickmaps/size-of-50m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"getHighResData = createDataManager(hiResPromises)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"coastline = getHighResData(\"ne_50m_coastline\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"countries = getHighResData(\"ne_50m_admin_0_countries\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"oceans = getHighResData(\"ne_50m_ocean\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"disputed = getHighResData(\"ne_50m_admin_0_boundary_lines_disputed_areas\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"land = getHighResData(\"ne_50m_land\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"tiny_countries = getHighResData(\"ne_50m_admin_0_tiny_countries_scale_rank\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"# Patterns","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"