3f:null 40:["$","title",null,{"children":"Annotations on SVG Map | Alex Eftink | Observable"}] 46:Ta43,map = { const roadWidth = 1.0; const backgroundColor = "#ECEFF4"; // "#eff0ed"; const waterColor = "#A7C7E7"; const landuseColor = "#A3BE8C"; const roadColor = "#a5a5a5"; //#a5a5a5 const majorRoadColor = "#B48EAD"; annotations; // add cell dependency so map is redrawn when annotations array is updated const graphic = svg` ` return graphic; }47:Tbda,function handleMouseDown(e) { const initialCoords = getMouseSVGCoordinates(map, e); const svgMap = d3.select(map); const textBoxGroup = svgMap.append('g'); const textBox = textBoxGroup .append('rect') .attr('id', 'temp') .attr('x', initialCoords.x) .attr('y', initialCoords.y) .attr('width', 1) .attr('height', 1) .attr('fill-opacity', '0') .attr('stroke-width', '1') .attr('stroke', 'black'); // Calculate box dimenions on mouse move const handleMouseMove = function(e) { const currentCoords = getMouseSVGCoordinates(map, e); let x = Math.min(initialCoords.x, currentCoords.x); let y = Math.min(initialCoords.y, currentCoords.y); let width = Math.abs(currentCoords.x - initialCoords.x); let height = Math.abs(currentCoords.y - initialCoords.y); textBox.attr('x', x); textBox.attr('y', y); textBox.attr('width', width); textBox.attr('height', height); } document.addEventListener('mousemove', handleMouseMove); /** * handleMouseUp * Remove event listeners for generating text box dimensions. * Create the svg text elements */ const handleMouseUp = function() { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); const mapBounds = svgMap.node().getBoundingClientRect(); const textBoxBounds = textBox.node().getBoundingClientRect(); const { x, y, width, height } = textBoxBounds; const calculatedBounds = { x: x - mapBounds.x, y: y - mapBounds.y, width, height }; const foreignObject = createForeignObject(textBoxGroup, calculatedBounds); const innerSVG = foreignObject .append('xhtml:div') .attr('contenteditable', true) .style('width', `${width}px`) .style('height', `${height}px`) .append('svg') .attr('x', 0) .attr('y', 0) .attr('width', width) .attr('height', height) const svgText = innerSVG.append('text').style('font-family', 'Sans,Arial'); svgText.text('Enter text').each(zoomToText) // set viewbox for text selectText(svgText.node()) // so user can type immediately function saveAndExit() { saveAnnotation({ id: crypto.randomUUID(), bounds: calculatedBounds, text: svgText.text() }); textBoxGroup.remove(); } foreignObject .on('input', function(event) { const { srcElement: { innerText } } = event; if (innerText.length > 0) { svgText.each(zoomToText); } else { svgText.text('Enter text').each(zoomToText); // TODO Bug: Deleting all text can lose the selection of the svg text element. } }) .on('keydown', function(event) { const { key } = event; if (key === 'Enter') { event.preventDefault(); saveAndExit(); } }) .on('focusout', function() { saveAndExit(); }); } document.addEventListener('mouseup', handleMouseUp); // removed within the function itself }48:T22c9,mbxLogo = svg` `49:[] 44:{"id":"b0a81bb7705760b7","slug":"annotations-on-svg-map","title":"Annotations on SVG Map","thumbnail":"bd0190fec03dc1e8f1f8b0d15e0b2b3b67577e4030336c36a5471961aa498040","access_level":"public","create_time":"$D2023-08-03T17:55:08.609Z","update_time":"$D2023-08-13T13:48:48.748Z","view_time":null,"first_public_time":"$D2023-08-10T19:50:21.594Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ca5c83797657c4f9","login":"aeftink","name":"Alex Eftink","avatar_url":"https://avatars-next.observableusercontent.com/42a96094e8739ad0907f98baeee77ea62fbfd9b24da198e6271f631e4ef2e78b","tier":"starter_2024","bio":"","following":false},"version":748,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6810b574228216c8","login":"aeftink","name":"Alex Eftink","avatar_url":"https://avatars-next.observableusercontent.com/42a96094e8739ad0907f98baeee77ea62fbfd9b24da198e6271f631e4ef2e78b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6810b574228216c8","login":"aeftink","name":"Alex Eftink","avatar_url":"https://avatars-next.observableusercontent.com/42a96094e8739ad0907f98baeee77ea62fbfd9b24da198e6271f631e4ef2e78b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Annotations on SVG Map","cells":[{"id":0,"value":"# Annotations on SVG Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"Draw single line annotations on an svg map. The vector tile data is provided by Mapbox. The SVG text box is drawn with D3js. Change the default location with the \"City Search\" input. \"Save as SVG\" to save the map with the annotations in svg format. \nPress enter to save the annotation or click on the checkmark in the box. Click the trash can to cancel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"viewof cityFilter = Inputs.text({ label: 'City Search', placeholder: 'City name', value: 'St. Louis'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"location = {\n const choices = cities.filter(city => city.name.match(debouncedSearch)).slice(0, 8);\n const defaultChoice = choices.length > 0 ? choices[0] : null;\n return Inputs.radio(choices, { label: \"Selected Location\", format: d => d.name, value: defaultChoice })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"viewof showCityLabels = Inputs.toggle({label: \"Show city labels\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"DOM.download(() => serialize(map), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"viewof undo = Inputs.button(\"Undo\", { reduce: undoAnnotation });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"### Main Event Listeners","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"*handleMouseDown* - draws the text box on 'mousedown'. \nOn 'mousedown', the initial coordinates are saved and an svg rectangle is drawn. 'mousemove' event listener is added and tracks additional movement to update the rectangle dimensions. 'mouseup' event listener removes the event listeners and then creates the final text box the user can type in","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"function createToolbar(selection, bounds, handleSaveAndExit, handleExit) {\n const toolbar = createForeignObject(selection, bounds)\n .append('xhtml:div')\n .style('width', `${bounds.width}px`)\n .style('height', `${bounds.height}px`)\n .style('transform', 'translate(0, 20)')\n .style('display', 'flex')\n .style('justify-content','flex-end')\n .style('gap', '2px')\n .append('div')\n toolbar.append('i')\n .attr('class', 'bi bi-check-circle')\n .on('click', handleSaveAndExit)\n .on('mouseover', function a() {\n d3.select(this).style('cursor', 'pointer')\n })\n .on('mouseout', function a() {\n d3.select(this).style('cursor', 'default')\n })\n toolbar.append('i')\n .attr('class', 'bi bi-trash-fill')\n .on('click', handleExit)\n .on('mouseover', function a() {\n d3.select(this).style('cursor', 'pointer')\n })\n .on('mouseout', function a() {\n d3.select(this).style('cursor', 'default')\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"The following anonymous function adds the 'handleMouseDown' function to the 'mousedown' event listener on the svg map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"{\n map.addEventListener('mousedown', handleMouseDown);\n // Observable housekeeping\n invalidation.then(() => { map.removeEventListener('mousedown', handleMouseDown) });\n return describe(`add handleMouseDown to map mousedown listener`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"### User created annotations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"*annotations* - the \"saved\" annotations a user has created","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"mutable annotations = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"function saveAnnotation(annotation) {\n mutable annotations = [...annotations, annotation];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"function deleteAllAnnotations() {\n mutable annotations = [];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"function undoAnnotation() {\n mutable annotations = annotations.slice(0, -1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"*isEditingAnnotation* - boolean guarding against unintentional edits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":650,"value":"mutable isEditingAnnotation = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"{\n d3.select(map)\n .select('g#annotations')\n .selectAll('svg')\n .data(annotations, d => d.id)\n .join('svg')\n .attr('x', d => d.bounds.x)\n .attr('y', d => d.bounds.y)\n .attr('width', d => d.bounds.width)\n .attr('height', d => d.bounds.height)\n .append('text')\n .style('font-family', 'Sans,Arial')\n .text(d => d.text)\n .each(zoomToText);\n\n return describe(`draw the 'saved' annotations on the map`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"*getMouseSVGCoordinates* - given svg container node and click event, returns the svg x,y coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"function getMouseSVGCoordinates(svgNode, e) {\n const rect = svgNode.getBoundingClientRect();\n return {\n x: e.clientX - rect.x,\n y: e.clientY - rect.y\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"*selectText* takes a DOM node and creates a text selection over it's content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"function selectText(node) {\n const sel = window.getSelection()\n const range = document.createRange()\n range.selectNodeContents(node)\n sel.removeAllRanges()\n sel.addRange(range)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"*setCursor* - given a DOM node, sets the text cursor to specified position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"function setCursor(node, position) {\n const sel = window.getSelection()\n const range = document.createRange()\n range.setStart(node, position)\n sel.removeAllRanges()\n sel.addRange(range)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"*zoomToText* - set's the parent node's viewbox to that of the text. This is used for keeping the single line of text within the drawn rectangle. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"function zoomToText() {\n const textBbox = this.getBBox()\n d3.select(this.parentNode).attr(\n 'viewBox',\n [textBbox.x, textBbox.y, textBbox.width, textBbox.height].join(' '),\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"*createForeignObject* - creates a foreignObject element on the specified svg selection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"createForeignObject = function(selection, bounds, offset) {\n const x = bounds.x - (offset?.x ?? 0);\n const y = bounds.y - (offset?.y ?? 0);\n return selection\n .append('foreignObject')\n .attr('x', x)\n .attr('y', y)\n .attr('width', bounds.width)\n .attr('height', bounds.height);\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"*createCloseButton* - creates a close button using xhtml inside the svg","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"*createTextInput* - given selection, creates a text input filled to given bbox and attaches onInput event listener. This is only used as a workaround for a bug when 'contenteditable' loses selection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":" createTextInput = function(selection, bbox, onInput) {\n createForeignObject(selection, bbox)\n .append('xhtml:div')\n .attr('width', '100%')\n .attr('height', '100%')\n .append('input')\n .attr('type', 'text')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('font-size', `${bbox.height}px`)\n .attr('border', 'none')\n .attr('background-color', 'rgba(0,0,0,0.1)')\n .on('input', onInput)\n .node()\n .focus()\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"*coordinates* - where the map is centered. (St. Louis, MO)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"coordinates = 'loc' in location.value ? location.value.loc.coordinates : [-90.199402, 38.627003]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"*projection* - d3 map projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"projection = d3.geoMercator()\n .center(coordinates)\n .scale(800000 / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"*tile* - constructs a tile layout with given properties (width, height, projection)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"tile = d3_tile.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0,0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"*tiles* - using the tile layout, requests the needed vector tiles from Mapbox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"tiles = Promise.all(tile().map(async t => {\n let data = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1IjoiY2FlcnVzIiwiYSI6ImNqaTBzNWF5bzA0bXEza21qenRob3FzMTUifQ.Y10MtErldfHmiKdNW_xz5A`))).layers\n \n t.data = Object.keys(data).reduce((initialData, key) => {\n initialData[key] = {\n type: \"FeatureCollection\",\n features: [...Array(data[key].length).keys()].map((item, i) => {\n let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z)\n \n if (key === 'water') {\n feature.properties['class'] = 'water'\n }\n \n return feature\n })\n }\n\n return initialData\n }, {})\n \n return t;\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"*path* - svg path function for given projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"*filter* - return new FeatureCollection for given filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"filter = function(d, test) {\n if (!d || !d.features) { return }\n return { type: \"FeatureCollection\", features: d.features.filter(test) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"*isLayer* - predicate for is feature is given 'layer'","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"isLayer = (feature, layer) => feature.properties.class === layer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"*describe* - helper for documenting functions in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"function describe(str) {\n return html`

${md`ƒ: ${str}`}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"*height* - height of map. the 'width' of the map is using Observable's built in 'width' variable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"### Debounce city search input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"mutable debouncedSearch = \"St. Louis\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"bouncer = _.debounce((u) => callback(u), 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"callback = (u) => (mutable debouncedSearch = u)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"{\n bouncer(cityFilter);\n return describe(`debounce user input`);;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"import { cities } from \"@toja/all-the-cities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"_ = require(\"lodash@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import {attribution as mapAttribution}\nwith {height as attributionHeight}\nfrom '@aboutaaron/mapbox-map-maker'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"import {bootstrapIcons} from \"@kallewesterling/bootstrap-icons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"bootstrapIcons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Protobuf = require('https://bundle.run/pbf@3.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3_tile = require(\"d3-tile@0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"### Notebook Attributions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"Tile rendering: https://observablehq.com/@d3/mapbox-vector-tiles \nSome helper functions: https://observablehq.com/@postgraphics/mapbox-vector-tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"