40:null 41:["$","title",null,{"children":"Mapbox Map Maker (with city selection) | Evan Sonderegger | Observable"}] 47:T56f,map = { const graphic = svg` ` return graphic; }48:[] 45:{"id":"c7c5631c0fe7b92d","slug":"mapbox-map-maker-with-city-selection","title":"Mapbox Map Maker (with city selection)","thumbnail":"bb6b2ba8c63308fdabf7b3281660cf08c57530e18d0c14850e9c1213fb4d6296","access_level":"public","create_time":"$D2019-03-21T19:11:22.369Z","update_time":"$D2019-03-21T22:00:07.181Z","view_time":null,"first_public_time":"$D2019-03-21T22:19:31.015Z","has_unpublished_edits":null,"fork":{"id":"1e342a340c2c3c0a","slug":"mapbox-map-maker","title":"Mapbox Map Maker","owner":{"id":"7b082da4ad94a210","login":"keump","name":"pk"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b56a8391018955dd","login":"esonderegger","name":"Evan Sonderegger","avatar_url":"https://avatars-next.observableusercontent.com/967a6bdafa1c4aa447a04e0d59de4de3f0c8e259a04906244ecc4bbb0054d841","tier":"starter_2024","bio":"Senior software engineer @nytimes","following":false},"version":471,"publish_version":471,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7d76b27ee94c2f5","login":"esonderegger","name":"Evan Sonderegger","avatar_url":"https://avatars-next.observableusercontent.com/967a6bdafa1c4aa447a04e0d59de4de3f0c8e259a04906244ecc4bbb0054d841","tier":null,"bio":"Senior software engineer @nytimes","following":false}],"members":[{"type":"individual","id":"a7d76b27ee94c2f5","login":"esonderegger","name":"Evan Sonderegger","avatar_url":"https://avatars-next.observableusercontent.com/967a6bdafa1c4aa447a04e0d59de4de3f0c8e259a04906244ecc4bbb0054d841","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapbox Map Maker (with city selection)","cells":[{"id":0,"value":"md`# Mapbox Map Maker (with city selection)\n\nA fork of [Aaron Williams's Map Maker notebook](https://observablehq.com/@aboutaaron/mapbox-map-maker) with additional UI for selecting a city and fine tuning the center latitude and longitude.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"DOM.download(await serialize(map), 'map.svg', 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md`## Location`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"viewof longitude = slider({\n min: selectedcity.longitude - 1, \n max: selectedcity.longitude + 1, \n value: selectedcity.longitude,\n title: \"Longitude\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"viewof latitude = slider({\n min: selectedcity.latitude - 1, \n max: selectedcity.latitude + 1, \n value: selectedcity.latitude,\n title: \"Latitude\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"viewof scale = slider({\n min: 10, \n max: 100, \n value: 50,\n title: \"Zoom-Scale\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"viewof city = select({\n title: \"City\",\n description: \"Choose a city for centering the map\",\n options: cities.map(c => c.city),\n value: \"Washington\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md`## Customize`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"viewof height = slider({\n min: 200, \n max: 975, \n value: 600,\n title: \"Map height (in pixels)\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof landColor = color({\n value: \"#fefefe\",\n title: \"Map palette\",\n description: \"Land\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"viewof waterColor = color({\n value: \"#acc8cc\",\n description: \"Water\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof roadColor = color({\n value: \"#a5a5a5\",\n description: \"Roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"viewof minor_roads = slider({\n min: 0, \n max: max_road_size, \n value: 0.3,\n precision: 3,\n title: \"Road sizes (in pixels)\", \n description: \"Minor roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"viewof tertiary_roads = slider({\n min: 0, \n max: max_road_size, \n value: 0.5,\n precision: 3,\n description: \"Tertiary roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof secondary_roads = slider({\n min: 0, \n max: max_road_size, \n value: 0.7,\n precision: 3,\n description: \"Secondary roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"viewof primary_roads = slider({\n min: 0, \n max: max_road_size, \n value: 0.9,\n precision: 3,\n description: \"Primary roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof motorways = slider({\n min: 0, \n max: max_road_size, \n value: 1.5,\n precision: 3,\n description: \"Motorways\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof motorway_links = slider({\n min: 0, \n max: max_road_size, \n value: 1.15,\n precision: 3,\n description: \"Motorway links\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof rails = slider({\n min: 0, \n max: max_road_size, \n value: 0.51,\n precision: 3,\n description: \"Rails\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"viewof max_road_size = slider({\n min: 0, \n max: 5, \n step: 0.5, \n value: 2, \n title: \"Maximum road size\", \n description: \"The largest road size you want available for your map\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"selectedcity = cities.find(c => c.city === city)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"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":20,"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.eyJ1IjoibWFwaXRwayIsImEiOiIxMk5pN0drIn0.RoUFzCiXmh0xYCwmuXYCRw`))).layers\n \n let keys = Object.keys(data)\n t.data = {}\n keys.map(key => {\n let collection = {\n type: \"FeatureCollection\",\n features: []\n }\n\n for (let i = 0; i < data[key].length; i++) {\n let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z)\n if (key === 'water') {\n feature.properties['class'] = 'water'\n }\n collection.features.push(feature)\n }\n \n t.data[key] = collection\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":63,"value":"t.layers.water.feature(0).toGeoJSON(1023, 1618, 11)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"t = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/12/1023/1618.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"getLayers('road')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"getLayers = key => {\n const flatten = (arr, depth = 1) => arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), [])\n \n return [ ...new Set(\n flatten(\n tiles.map(d => {\n if (d.data[key]) {\n return d.data[key].features.map(d => d.properties.class)\n }\n })\n )\n )\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"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":84,"value":"filter = function(d, test) {\n if (!d) return { type: \"FeatureCollection\", features: [] }; \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":16,"value":"tile = d3.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":12,"value":"projection = {\n const lng = +longitude === 0 ? -77.04 : +longitude;\n const lat = +latitude === 0 ? 38.91 : +latitude;\n return d3.geoMercator()\n .center([lng, lat])\n .scale(scale*scale*80)\n .translate([width / 2, height / 2]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"json = async url => {\n const { features } = await d3.json(url);\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-fetch@1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"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":27,"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":440,"value":"cities = d3.json('https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"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":216,"value":"import {color, number, text, slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"