2c:null 2d:["$","title",null,{"children":"Mount Rubidoux | Tim | Observable"}] 32:T557,viewof ratingSlider = { const mySlider = rangeSlider({ title: "Filter Ratings", min: -1, max: 8, step: 0.5, value: [-1, 2], }); const element = html`

${mySlider}

`; element.oninput = () => { var start, stop; [start, stop] = mySlider.value; L; fa; const colorScale = d3.scaleSequential([4, -1], d3.interpolateRdYlGn); function markerMaker(entry) { let rating = boulderRating(entry); return extraMarkers.icon({ svg: true, shape: 'square', number: rating[0], icon: 'fa-number', prefix: 'fa', iconColor: 'black', markerColor: colorScale(rating[1]) }); } element.value = fuentes .filter(d => boulderRating(d)[1] >= start && boulderRating(d)[1] <= stop) .map( d => L .marker([d["Area Latitude"],d["Area Longitude"]], {icon: markerMaker(d), title: d["Rating"]}) .bindPopup( "Route: " + d["Route"] + '
' + "Location: " + d["Location"] + '
' + 'URL: Mountain Project
' + "Avg Stars: " + d["Avg Stars"] + '
' + "Rating: " + d["Rating"] + '
' ) ); }; element.oninput(); return element; }33:T4ae,mapContainer = { L; let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([33.98371354536747, -117.39095393233511], 16); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); L.control.scale().addTo(map); const markerClusterOptions = ({ showCoverageOnHover: true, spiderfyOnMaxZoom: true, zoomToBoundsOnClick: true, removeOutsideVisibleBounds: true, maxClusterRadius: 40, spiderfyDistanceMultiplier: 1 }) var markerClusters; function addItems(markers) { lmc; markerClusters = new L.markerClusterGroup(markerClusterOptions); markerClusters.addLayers(markers); markerClusters.addTo(map); } addItems(viewof ratingSlider.value); function removeItems() { markerClusters.removeFrom(map); } function updateData(markers) { removeItems(); addItems(markers); } return Object.assign(container, { updateData }); }34:T1902,html``35:[{"id":"7842d9f1f6086455c97ae1e17db681771f1ca9d42b44355e56fd577c68ad5145b12cf2f99695ff2d48b35c8cbfd84598ba74d8b1ed6852cb3f7f6c400c3c1924","href":"https://static.observableusercontent.com/files/7842d9f1f6086455c97ae1e17db681771f1ca9d42b44355e56fd577c68ad5145b12cf2f99695ff2d48b35c8cbfd84598ba74d8b1ed6852cb3f7f6c400c3c1924","name":"route-finder.csv","type":"text/csv","lastModified":1716436073735.321,"size":57337},{"id":"8bb6029f7372ce6ecd5971866876a6da28444331b85dfde43a0b363cfa58269c700e9d95358907b5d64b3c2108e39b1ccb4f6db2436e307290f943df27ce74cb","href":"https://static.observableusercontent.com/files/8bb6029f7372ce6ecd5971866876a6da28444331b85dfde43a0b363cfa58269c700e9d95358907b5d64b3c2108e39b1ccb4f6db2436e307290f943df27ce74cb","name":"markers_shadow.png","type":"image/png","lastModified":1716444388453.576,"size":535},{"id":"b03a4dd534e557d84e4866c10374f3161c59bc9ae19107d01bcc8e87b6cae717af22476876c7604b2a6e6286a9e1361204bd5742b6ca48b30e2262c41b905d0a","href":"https://static.observableusercontent.com/files/b03a4dd534e557d84e4866c10374f3161c59bc9ae19107d01bcc8e87b6cae717af22476876c7604b2a6e6286a9e1361204bd5742b6ca48b30e2262c41b905d0a","name":"markers_default.png","type":"image/png","lastModified":1716444388880.005,"size":119805},{"id":"e751f3233f579d31254807020278afa2be1a166cb428362f5a8c057d367eef45d60d900467c97e55299b3e4b8cb5bf4c36798d2d5b7a59fda41d84dc7e629e4f","href":"https://static.observableusercontent.com/files/e751f3233f579d31254807020278afa2be1a166cb428362f5a8c057d367eef45d60d900467c97e55299b3e4b8cb5bf4c36798d2d5b7a59fda41d84dc7e629e4f","name":"markers_shadow-2x.png","type":"image/png","lastModified":1716444388649.234,"size":1469},{"id":"d619a1a4c11b8b0682407df039a09dd8e9f24a95a1e083390e39d5830362ea415ec634c6186312711edbe78c35ea30162f7e7b7c293c4df76c38c27bd42572a9","href":"https://static.observableusercontent.com/files/d619a1a4c11b8b0682407df039a09dd8e9f24a95a1e083390e39d5830362ea415ec634c6186312711edbe78c35ea30162f7e7b7c293c4df76c38c27bd42572a9","name":"markers_default-2x.png","type":"image/png","lastModified":1716444389054.145,"size":254280}] 30:{"id":"a99dfb33ce54d07d","slug":"rubidoux","title":"Mount Rubidoux","thumbnail":"18a5817d5854ac7a474e407d00410b757db93e2e2c5feeeeec32e6ec40357534","access_level":"public","create_time":"$D2024-05-23T03:42:55.386Z","update_time":"$D2024-05-27T19:29:20.975Z","view_time":null,"first_public_time":"$D2024-05-23T03:42:55.386Z","has_unpublished_edits":null,"fork":{"id":"604e2d2dc68c7022","slug":"leaflet-example-map-pins-heatmap","title":"🍃 Leaflet Example: map, pins, heatmap","owner":{"id":"77292d3fd698b76b","login":"serman","name":"Sergio Galan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a08a86b83b49811e","login":"timctran","name":"Tim","avatar_url":"https://avatars-next.observableusercontent.com/26fe41d81d6da0810b00d8d23cc4397cb2f496d5ff88ff4bab42bac0a6166858","tier":"starter_2024"},"version":461,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2808466633bda15","login":"timctran","name":"Tim","avatar_url":"https://avatars-next.observableusercontent.com/26fe41d81d6da0810b00d8d23cc4397cb2f496d5ff88ff4bab42bac0a6166858","tier":null}],"members":[{"type":"team","id":"a08a86b83b49811e","login":"timctran","name":"Tim","avatar_url":"https://avatars-next.observableusercontent.com/26fe41d81d6da0810b00d8d23cc4397cb2f496d5ff88ff4bab42bac0a6166858","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b2808466633bda15","login":"timctran","name":"Tim","avatar_url":"https://avatars-next.observableusercontent.com/26fe41d81d6da0810b00d8d23cc4397cb2f496d5ff88ff4bab42bac0a6166858","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mount Rubidoux","cells":[{"id":101,"value":"md`# Mount Rubidoux`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"L","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"mapContainer.updateData(ratingSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"fuentes=d3.csvParse(await FileAttachment(\"route-finder.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"boulderRating = function (entry) {\n var rating_values = entry[\"Rating\"].split(' ');\n var boulderValue;\n for (var i = 0; i < rating_values.length; i++) {\n if (rating_values[i].startsWith(\"V\")) {\n boulderValue = rating_values[i].slice(1);\n }\n }\n var modifier = \"\";\n if (boulderValue.endsWith(\"+\") || boulderValue.endsWith(\"-\")) {\n modifier = boulderValue.slice(-1);\n boulderValue = boulderValue.slice(0, -1);\n }\n\n var numericBoulderValue;\n if (boulderValue === \"-easy\") {\n numericBoulderValue = -1\n } else if (boulderValue.includes(\"-\")) {\n var ratings = boulderValue.split(\"-\").map(d => parseFloat(d));\n numericBoulderValue = ratings[0]/2 + ratings[1]/2;\n } else {\n numericBoulderValue = parseFloat(boulderValue);\n }\n if (modifier === \"-\") {\n numericBoulderValue -= 0.25;\n } else if (modifier === \"+\") {\n numericBoulderValue += 0.25;\n }\n if (boulderValue == \"-easy\") {\n boulderValue = \"E\"\n }\n return [\"V\"+String(boulderValue), numericBoulderValue];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"import { style as faStyle, fa } from \"@airbornemint/fontawesome\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"L = await require('leaflet')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"lmc = {\n L;\n const leafletmarkercluster = await require('leaflet.markercluster');\n if (!leafletmarkercluster._style) {\n const href = await require.resolve(\"leaflet.markercluster/dist/MarkerCluster.css\");\n const href2 = await require.resolve(\"leaflet.markercluster/dist/MarkerCluster.Default.css\");\n document.head.appendChild((leafletmarkercluster._style = html``));\n }\n return leafletmarkercluster;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"extraMarkers = {\n fa;\n L;\n const makeAwesome = await require(\"leaflet-extra-markers\");\n\n return L.ExtraMarkers;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"