2a:T5e5,map = { const graphic = svg` ` return graphic; }2b:T22c9,mbxLogo = svg` `2c:[] 29:{"title":"Mapbox Map Maker (w/scale)","cells":[{"id":0,"value":"md`# Mapbox Map Maker (w/scale)\n### Make a map using the Mapbox vector tile API.\n##### Based on an orginal work from [@aboutaaron/mapbox-map-maker](https://observablehq.com/@aboutaaron/mapbox-map-maker), where scalable property and color definition for railways are introduced. \n##### Towns and cities selection is made typing its names; thanks to [@pierreleripoll/geocoding-nominatim](https://observablehq.com/@pierreleripoll/geocoding-nominatim) to enlighten me about Nominatim usage on Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"viewof txt_input = submit({value: \"Charenton-le-Pont France\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"geocoding = (address, geo_bounds = [], number_result = 1) => {\n let viewbox =\n geo_bounds && geo_bounds[0] && geo_bounds[1]\n ? `&viewbox=${geo_bounds[0][0]},${geo_bounds[0][1]},${geo_bounds[1][0]},${geo_bounds[1][1]}`\n : \"\";\n return fetch(\n `https://nominatim.openstreetmap.org/search/${address}?format=json&limit=${number_result}${viewbox}`,\n { referrer: \"https://observablehq.com/@pierreleripoll/geocoding-nominatim\" }\n )\n .then(res => {\n if (res.ok && res.json) {\n return res.json();\n } else {\n return {\n error: `Position not found for address = ${address}`\n };\n }\n })\n .catch(err => {\n return { error: err };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"position = {\n txt_input;\n const t1 = performance.now();\n let result = await geocoding(txt_input);\n if (result[0]) {\n result[0].time = performance.now() - t1;\n return result[0];\n } else return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"center = [position.lon, position.lat]","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"md `##### Location choiced:\n ${position.display_name}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md `##### Define the map width (in kilometers)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"viewof mapWidth = submit({value : 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"DOM.download(await serialize(map), 'map.svg', 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"function widthInKm(mapWidth) {\n if (mapWidth = 0) {\n return 17.9704\n } else {\n return mapWidth\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"scaleOfMap = (14.793592688*0.94218*0.931395)/mapWidth","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: 975, \n value: 600,\n title: \"Map height (in pixels)\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof landColor = color({\n value: \"#e6ffe6\",\n title: \"Map palette\",\n description: \"Land\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"viewof waterColor = color({\n value: \"#00ffff\",\n description: \"Water\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"viewof roadColor = color({\n value: \"#3f3f3f\",\n description: \"Roads\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"viewof railColor = color({\n value: \"#ff0000\",\n description: \"Rails\"\n})","pinned":false,"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 precision: 3,\n description: \"Rails\"\n})","pinned":false,"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":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","pinned":false,"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-v7/${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 if (key === 'major_rail') {\n feature.properties['class'] = 'rail'\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":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-v7/12/1023/1618.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"getLayers('road')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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":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":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"projection = {\n const scMap = +scaleOfMap === 0 ? 1 : +scaleOfMap\n return d3.geoMercator()\n .center([center[1,0], center[0,1]])\n .scale((Math.pow(2,20.9) / (2 * Math.PI))*scaleOfMap*width/975)\n .translate([width/2,height/2])\n}","pinned":false,"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":5,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\");","pinned":true,"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`##### Mapbox attribution code\n---`","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 | ${position.display_name}\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n // This is @tmcw’s. https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = \"pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}