31:T721,map = { const graphic = svg` ` return graphic; }32:T22c9,mbxLogo = svg` `33:[] 2f:{"title":"Mapbox Map Maker","cells":[{"id":0,"value":"md`# Mapbox Map Maker\n\nMake a map using the Mapbox vector tile API.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"DOM.download(await serialize(map), 'map.svg', 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"md`## Location`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof longitude = text({placeholder: 2, title: 'Longitude'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"viewof latitude = text({placeholder: 48.85, title: 'Latitude'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`## Customize`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof height = slider({\n min: 200, \n max: 1048, \n value: 600,\n title: \"Map height (in pixels)\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof landColor = color({\n value: \"#FFFFFF\",\n title: \"Map palette\",\n description: \"Land\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"viewof waterColor = color({\n value: \"#C6ECFF\",\n description: \"Water\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof buildingColor = color({\n value: \"#333333\",\n description: \"Buildings\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"viewof roadColor = color({\n value: \"#646464\",\n description: \"Roads\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":299,"value":"viewof rails = slider({\n min: 0, \n max: max_road_size, \n value: 0.51,\n step: 0.25, \n precision: 3,\n description: \"Rails\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"isLayer = (feature, layer) => feature.properties.class === layer || feature.properties.type === layer // filter features to integrate.","pinned":true,"hidden":false,"mode":"ojs"},{"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-v8/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1IjoiYWJvdXRhYXJvbiIsImEiOiJsRTRpMGJnIn0.aprlJ6wE1JQqBx4EH1lkMQ`))).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"},{"id":63,"value":"t.layers.water.feature(0).toGeoJSON(1023, 1618, 11)","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`### Query`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"t = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/12/1023/1618.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`### Explore data structure`","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"getLayers('road','type');","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"getLayers('road','class');","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"getLayers('building','type')","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"getLayers = (layerName,attributeName) => {\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[layerName]) {\n return d.data[layerName].features.map(d => d.properties[attributeName])\n }\n })\n )\n )\n ]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"md`#### (What is that ?)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0,0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"projection = {\n const lng = +longitude === 0 ? -122.2711 : +longitude\n const lat = +latitude === 0 ? 37.8044 : +latitude\n return d3.geoMercator()\n .center([lng, lat])\n .center([-122.4183, 37.7750]) // San Francisco, CA, USA\n //.center([107.04411, 13.86445]) // Village 1\n //.center([107.10675, 13.77522]) // Village 2\n //.center([107.03090, 13.48652]) // Village 3\n //.center([106.98460, 13.73730]) // Balung\n .scale(Math.pow(2, 24) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"json = async url => {\n const { features } = await d3.json(url);\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"Protobuf = require('https://bundle.run/pbf@3.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"import {color, number, text, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"md`----\n### Mapbox attribution code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":" attributionHeight = height","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"attributionWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"attribution = {\n return svg`\n \n ${mbxLogo}\n \n © Mapbox © OpenStreetMap\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}