2b:null 2c:["$","title",null,{"children":"Make-a-Map with location | chekos | Observable"}] 31:T6c3,map = { const graphic = svg` ` return graphic; }32:T22c9,mbxLogo = svg` `33:[] 2f:{"id":"1494b88d8c603a8e","slug":null,"title":"Make-a-Map with location","thumbnail":"ac21b8d99c7a635634ea8651c25887237ae35726e2dcd42c340bc31126192479","access_level":"public","create_time":"$D2023-05-12T03:15:34.139Z","update_time":"$D2023-05-12T03:15:34.139Z","view_time":null,"first_public_time":"$D2023-05-12T03:15:34.139Z","has_unpublished_edits":null,"fork":{"id":"4956c2aa766432fc","slug":"mapbox-map-maker","title":"Make-a-Map with location","owner":{"id":"54798aac272d7bcb","login":"nme94","name":"Nilson Menezes"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9b939657e9657184","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":"starter_2024"},"version":1206,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"78ce9538d2f7c9b0","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":null}],"members":[{"type":"individual","id":"78ce9538d2f7c9b0","login":"chekos","name":"chekos","avatar_url":"https://avatars-next.observableusercontent.com/02e1269ba639f9fd455195525e598362026456288bd4a14ddcdd18f2db7ab0dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Make-a-Map with location","cells":[{"id":0,"value":"md`# Make-a-Map with location\n### (with map width capability and place names)\n-\n### Make a map using the Mapbox vector tile API.\n##### Based on an orginal work from [@aboutaaron](/@aboutaaron/mapbox-map-maker).\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\n---\nOn this notebook a map width property and color definition for railways are introduced, as well as, \nby typing the locality (town names, landmarks, streets ...) a place selection is made. Locality's name is placed at the heading of the map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"viewof place = submit({value: \"Charenton-le-Pont France\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"md `##### Location choiced:\n ${position.display_name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"position = {\n place;\n const t1 = performance.now();\n let result = await geocoding(place);\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"center = [position.lon, position.lat]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"md `Define the map width (in kilometers)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof mapWidth = submit({value : 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"scaleOfMap = (14.793592688*0.94218*0.931395)/mapWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md`## Customize`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof landColor = color({\n value: \"#e6ffe6\",\n title: \"Map palette\",\n description: \"Land\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"viewof waterColor = color({\n value: \"#00ffff\",\n description: \"Water\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof roadColor = color({\n value: \"#3f3f3f\",\n description: \"Roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"viewof railColor = color({\n value: \"#ff0000\",\n description: \"Rails\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"viewof minor_roads = slider({\n min: 0, \n max: max_road_size, \n value: 0.5,\n precision: 3,\n title: \"Road sizes (in pixels)\", \n description: \"Minor roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"viewof tertiary_roads = slider({\n min: 0, \n max: max_road_size, \n value: 0.7,\n precision: 3,\n description: \"Tertiary roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof secondary_roads = slider({\n min: 0, \n max: max_road_size, \n value: 0.8,\n precision: 3,\n description: \"Secondary roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"viewof primary_roads = slider({\n min: 0, \n max: max_road_size, \n value: 1.0,\n precision: 3,\n description: \"Primary roads\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof motorway_links = slider({\n min: 0, \n max: max_road_size, \n value: 1.6,\n precision: 3,\n description: \"Motorway links\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof rails = slider({\n min: 0, \n max: max_road_size, \n value: 1.0,\n precision: 3,\n description: \"Rails\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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.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","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":105,"value":"getLayers('road')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":86,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":934,"value":"md `##### Function to calculed length of the place's name in pixels\nFunction is taken from [stackoverflow site](https://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery),\nfunction written by [Elektra](https://stackoverflow.com/users/3743152/%c3%89lektra)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"// Thanks to https://stackoverflow.com/users/3743152/%c3%89lektra\n// see on https://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery\nfunction getWidthOfText(txt, fontname, fontsize){\n if(getWidthOfText.c === undefined){\n getWidthOfText.c=document.createElement('canvas');\n getWidthOfText.ctx=getWidthOfText.c.getContext('2d');\n }\n getWidthOfText.ctx.font = fontsize + ' ' + fontname;\n return getWidthOfText.ctx.measureText(txt).width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"md `Length of text in pixels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"lengthInPixels = getWidthOfText(place,'Times New Roman','23px');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"md`##### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"import {color, number, text, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`##### Mapbox attribution code\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":" attributionHeight = 0 * height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"attributionWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"md `#### Heading and Footing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"attribution = { \n return svg`\n// heading\n \n \n \n ${place}\n \n \n// footing\n \n \n ${mbxLogo} \n \n ${position.display_name} | © Mapbox © OpenStreetMap\n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"northArrowFill = \"#ff0000\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"function addNorthArrow({ attributionWidth, attributionHeight, map }) {\n // Original: https://commons.wikimedia.org/wiki/File:Nordpfeil_1_schwarz_0_Grad_Landscape.svg\n return map\n .append(\"polygon\")\n .attr(\"fill\", northArrowFill)\n .attr(\n \"points\",\n \"163.09,30.365 163.09,64.401 151.965,51.654 151.965,22.018 157.365,22.018 150.001,5 142.636,22.018 148.037,22.018 148.037,47.156 133.378,30.365 132.41,30.365 132.41,75.262 137.012,75.262 137.012,41.409 148.037,54.038 148.037,95 151.965,95 151.965,58.536 166.568,75.262 167.59,75.262 167.59,30.365 \"\n )\n .attr(\"transform\", `translate(${attributionWidth*0.1},${attributionHeight*0.1}), scale(1.0)`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"