2e:null 2f:["$","title",null,{"children":"Brittany Distance Calculator Map | orazal | Observable"}] 34:T86a, viewof map = { const mapContainer = document.createElement('div'); mapContainer.id = 'map'; const map = leaflet.map(mapContainer).setView([48.1173, -1.6778], 6); // Centered around Rennes leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, }).addTo(map); // Extract unique departments const departments = [...new Set(cities.map(city => city.department))]; // Create a color scale using the Turbo color scheme const colorScale = d3.scaleOrdinal() .domain(departments) .range(d3.quantize(d3.interpolateTurbo, departments.length)); const markers = cities.map(city => { const department = city.department; // Get the color for the department const markerColor = colorScale(department); const marker = leaflet.marker(city.coords, { icon: leaflet.divIcon({ className: 'custom-icon', html: `

` }) }).addTo(map); // Bind tooltip with smaller font size marker.bindTooltip(`${city.name}`, { permanent: true, direction: 'right' }).openTooltip(); return { marker, city }; }); // Function to highlight a city function highlightCity(cityName) { markers.forEach(({ marker, city }) => { if (city.name === cityName) { marker.setIcon(leaflet.divIcon({ className: 'custom-icon', html: `

` })); map.setView(city.coords, 10); } else { const markerColor = colorScale(city.department); marker.setIcon(leaflet.divIcon({ className: 'custom-icon', html: `

` })); } }); } // Observe changes in the search input viewof city1.addEventListener('input', (event) => { const cityName = event.target.value; highlightCity(cityName); }); return mapContainer; }35:T437,function getCitiesDistanceAsMap(values) { // Get cities from columns A and B const allCities = values.map(row => [row[0], row[1]]).flat(); // Get unique city names const cities = Array.from(new Set(allCities)); // Create a Map with empty arrays as values that we'll populate later const directionsMap = new Map(cities.map(city => [city, []])); values.forEach(row => { // city1 | city2 | distance (km) | duration (minutes) const city1 = row[0]; const city2 = row[1]; const distance = Math.ceil(row[2]); const duration = Math.ceil(row[3]); directionsMap.get(city1).push({ city: city2, duration, distance }); directionsMap.get(city2).push({ city: city1, duration, distance }); }) // Sort the list of cities for each key city based on duration directionsMap.forEach((value, key) => { directionsMap.set(key, value.sort((a, b) => a.duration - b.duration)); }); // Now cityMap is a Map where each key represents a city, // and the associated value is a sorted list of other cities based on duration return directionsMap; }36:Ta0d,chromatic = ["#ff4040","#ff423d","#ff453a","#ff4838","#fe4b35","#fe4e33","#fe5130","#fd542e","#fd572b","#fc5a29","#fb5d27","#fa6025","#f96322","#f96620","#f7691e","#f66c1c","#f56f1a","#f47218","#f37517","#f17815","#f07c13","#ee7f11","#ed8210","#eb850e","#e9880d","#e88b0c","#e68e0a","#e49209","#e29508","#e09807","#de9b06","#dc9e05","#d9a104","#d7a403","#d5a703","#d2aa02","#d0ad02","#ceb001","#cbb301","#c9b600","#c6b800","#c3bb00","#c1be00","#bec100","#bbc300","#b8c600","#b6c900","#b3cb01","#b0ce01","#add002","#aad202","#a7d503","#a4d703","#a1d904","#9edc05","#9bde06","#98e007","#95e208","#92e409","#8ee60a","#8be80c","#88e90d","#85eb0e","#82ed10","#7fee11","#7cf013","#78f115","#75f317","#72f418","#6ff51a","#6cf61c","#69f71e","#66f920","#63f922","#60fa25","#5dfb27","#5afc29","#57fd2b","#54fd2e","#51fe30","#4efe33","#4bfe35","#48ff38","#45ff3a","#42ff3d","#40ff40","#3dff42","#3aff45","#38ff48","#35fe4b","#33fe4e","#30fe51","#2efd54","#2bfd57","#29fc5a","#27fb5d","#25fa60","#22f963","#20f966","#1ef769","#1cf66c","#1af56f","#18f472","#17f375","#15f178","#13f07c","#11ee7f","#10ed82","#0eeb85","#0de988","#0ce88b","#0ae68e","#09e492","#08e295","#07e098","#06de9b","#05dc9e","#04d9a1","#03d7a4","#03d5a7","#02d2aa","#02d0ad","#01ceb0","#01cbb3","#00c9b6","#00c6b8","#00c3bb","#00c1be","#00bec1","#00bbc3","#00b8c6","#00b6c9","#01b3cb","#01b0ce","#02add0","#02aad2","#03a7d5","#03a4d7","#04a1d9","#059edc","#069bde","#0798e0","#0895e2","#0992e4","#0a8ee6","#0c8be8","#0d88e9","#0e85eb","#1082ed","#117fee","#137cf0","#1578f1","#1775f3","#1872f4","#1a6ff5","#1c6cf6","#1e69f7","#2066f9","#2263f9","#2560fa","#275dfb","#295afc","#2b57fd","#2e54fd","#3051fe","#334efe","#354bfe","#3848ff","#3a45ff","#3d42ff","#4040ff","#423dff","#453aff","#4838ff","#4b35fe","#4e33fe","#5130fe","#542efd","#572bfd","#5a29fc","#5d27fb","#6025fa","#6322f9","#6620f9","#691ef7","#6c1cf6","#6f1af5","#7218f4","#7517f3","#7815f1","#7c13f0","#7f11ee","#8210ed","#850eeb","#880de9","#8b0ce8","#8e0ae6","#9209e4","#9508e2","#9807e0","#9b06de","#9e05dc","#a104d9","#a403d7","#a703d5","#aa02d2","#ad02d0","#b001ce","#b301cb","#b600c9","#b800c6","#bb00c3","#be00c1","#c100be","#c300bb","#c600b8","#c900b6","#cb01b3","#ce01b0","#d002ad","#d202aa","#d503a7","#d703a4","#d904a1","#dc059e","#de069b","#e00798","#e20895","#e40992","#e60a8e","#e80c8b","#e90d88","#eb0e85","#ed1082","#ee117f","#f0137c","#f11578","#f31775","#f41872","#f51a6f","#f61c6c","#f71e69","#f92066","#f92263","#fa2560","#fb275d","#fc295a","#fd2b57","#fd2e54","#fe3051","#fe334e","#fe354b","#ff3848","#ff3a45","#ff3d42","#ff4040"]37:[] 32:{"id":"c5350f26a42a5f9d","slug":"brittany-distance-calculator-map","title":"Brittany Distance Calculator Map","thumbnail":"e8698fb6bc6e27b8700f26305780428916edd731b71300db286be98766773a4b","access_level":"public","create_time":"$D2024-05-28T09:03:50.300Z","update_time":"$D2024-06-30T08:45:17.574Z","view_time":null,"first_public_time":"$D2024-06-03T21:38:56.760Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"923cc456e7bab334","login":"orazal","name":"orazal","avatar_url":"https://avatars-next.observableusercontent.com/e10523582b9913f7e13bec25b73dd23cf5eba4ec49bbf8be06217c53e5e23c99","tier":"starter_2024"},"version":262,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ea965fde34043fd8","login":"orazal","name":"orazal","avatar_url":"https://avatars-next.observableusercontent.com/e10523582b9913f7e13bec25b73dd23cf5eba4ec49bbf8be06217c53e5e23c99","tier":null}],"members":[{"type":"team","id":"923cc456e7bab334","login":"orazal","name":"orazal","avatar_url":"https://avatars-next.observableusercontent.com/e10523582b9913f7e13bec25b73dd23cf5eba4ec49bbf8be06217c53e5e23c99","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ea965fde34043fd8","login":"orazal","name":"orazal","avatar_url":"https://avatars-next.observableusercontent.com/e10523582b9913f7e13bec25b73dd23cf5eba4ec49bbf8be06217c53e5e23c99","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Brittany Distance Calculator Map","cells":[{"id":0,"value":"# Brittany Distance Calculator Map \nRetrieves list of city and directions from Google Spreadsheets. \nDisplays cities on map & searches travel time between 2 cities. \nWhen \"From city\" is filled it highlights it on the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"cityPairResult = {\n const result = findCityPair(directionsRaw.slice(1), city1, city2);\n return result ? formatMinutes(result[3]) : \"No matching city pair found.\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof city1 = Inputs.text({label:\"From city:\", placeholder: \"Type city name\", datalist:cityNames})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"city1Info = getCityInfo(city1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"city1Distances = distancesMap.get(city1)?.filter(v => v.duration < 120);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof city2 = Inputs.text({label:\"To city:\", placeholder: \"Type city name\", datalist:cityNames})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"city2Info = getCityInfo(city2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"city2Distances = distancesMap.get(city2)?.filter(v => v.duration < 61);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"citesForTable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"directionsForTable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"citesForTable = citiesRaw.slice(1).map(v => ({city:v[0], latitude:v[1], longitude:v[2], postcode:v[3], department:v[4], region:v[5]}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"citiesRaw = fetchCities();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"cities = citiesRaw.slice(1).map(v => ({name: v[0], coords: [v[1], v[2]], department: v[4]}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"cityNames = citiesRaw.slice(1).map(v => v[0]).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"directionsRaw = fetchDirections();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"directionsForTable = directionsRaw.slice(1).map(row =>( {city1:row[0], city2:row[1], distance: row[2], duration: row[3]}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"distancesMap = getCitiesDistanceAsMap(directionsRaw.slice(1));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"/**\n * Searches for a pair of cities in a 2D array and returns the first match.\n * @param {Array>} data The 2D array containing city pairs.\n * @param {string} cityA The first city to search for.\n * @param {string} cityB The second city to search for.\n * @returns {Array | undefined} The first row where both cities are found or undefined if not found.\n */\nfunction findCityPair(data, cityA, cityB){\n return data.find(row => (\n (row[0] === cityA && row[1] === cityB) || (row[0] === cityB && row[1] === cityA)\n ));\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"/**\n * Formats a given number of minutes into a string \"HHHMM\" or \"01H45\".\n * @param {number} minutes The total number of minutes.\n * @returns {string} The formatted time string.\n */\nfunction formatMinutes(minutes) {\n minutes = Math.ceil(minutes)\n const hours = Math.floor(minutes / 60);\n const remainingMinutes = minutes % 60;\n \n const formattedHours = hours.toString().padStart(2, '0') + 'H';\n const formattedMinutes = remainingMinutes.toString().padStart(2, '0');\n \n return formattedHours + formattedMinutes;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function getCityInfo(city){\n const foundCity = citiesRaw.find(v => v[0] == city);\n return foundCity;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"## Data Fetching","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"async function fetchCities(){\n const result = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/1jIlVY7WGbLY8QGBeAlhHRWOJ4lmfDuOsi-HksfIC8Pg/values:batchGet?ranges=cities!A1:F&majorDimension=ROWS&key=AIzaSyBRVsCc572q5mizNF6OBPFpQ0BQMG75EEE`)\n const json = await result.json()\n return json.valueRanges[0].values\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"async function fetchDirections(){\n const startRow = 2;\n const endRow = 4;\n const result = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/1jIlVY7WGbLY8QGBeAlhHRWOJ4lmfDuOsi-HksfIC8Pg/values:batchGet?ranges=directions!A1:D&majorDimension=ROWS&key=AIzaSyBRVsCc572q5mizNF6OBPFpQ0BQMG75EEE`)\n const json = await result.json()\n return json.valueRanges[0].values\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"leaflet = require(\"leaflet@1.7.1\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"