2f:T606,map = { const container = html`

`; yield container; const map = L.map(container).setView([15, 27.6], 2); //for more tile options see https://leaflet-extras.github.io/leaflet-providers/preview/ (copy url) L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png', { attribution: "© OpenStreetMap contributors" }).addTo(map); // for marketCluster to work, you need to import the code snippet below to import this feature let markers = markerCluster({}); const markerclusterCSS = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.css'); // loop to create a marker for each drag queen queenGeoFiltered.forEach(queen => { var queenIcon = L.icon({ iconUrl: queen.link_image, // map to image url iconSize: [32, 32], // size of the icon iconAnchor: [16, 16], // point of the icon corresponds to marker's location }); let marker = L.marker([queen.latitude, queen.longitude], {icon: queenIcon}); // Add a tooltip with Queen info (name, hometown) marker.bindTooltip(`${queen.name}
${queen.hometown}`, { permanent: false, direction: 'top' }); // Open the tooltip when the marker is clicked marker.on('click', function() { marker.openTooltip(); }); // Add the marker to the marker cluster group markers.addLayer(marker); }); // Add the marker cluster group to the map map.addLayer(markers); } 30:[{"id":"47d9e742812d753f696a9c8239a37c64b874b16ca4181e759ae8adf8d2a2ba90619b09253eaef9e29a57174984b0f1e37d2fe9ace6636d5b2a58bb4c81322bdb","href":"https://static.observableusercontent.com/files/47d9e742812d753f696a9c8239a37c64b874b16ca4181e759ae8adf8d2a2ba90619b09253eaef9e29a57174984b0f1e37d2fe9ace6636d5b2a58bb4c81322bdb","name":"queen_geo_data.csv","type":"text/csv","lastModified":1681394442907.545,"size":103020},{"id":"d0f673251d65ca2a5213d5a836a344a5a207b94abdb5e0856738f3f177ca538328d83228241e781e2a2e8601bcfeefefe64e65b5f4d09b6955f86b484e574d86","href":"https://static.observableusercontent.com/files/d0f673251d65ca2a5213d5a836a344a5a207b94abdb5e0856738f3f177ca538328d83228241e781e2a2e8601bcfeefefe64e65b5f4d09b6955f86b484e574d86","name":"contestants.csv","type":"text/csv","lastModified":1681394442907.545,"size":187236}] 2d:{"title":"Where Are You Queen?","cells":[{"id":0,"value":"# Where Are You Queen?\n\nMap of **RuPaul's Drag Queens** around the world. Data was scraped from [Drag Race Wiki](https://rupaulsdragrace.fandom.com/wiki/RuPaul%27s_Drag_Race_Wiki). It's wild to see how RuPaul's footprint grow as the show adds different international franchises. There are over 350 queens on this map from more than 10 franchises!","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"// create form of input values to subset the queen geo data\n\nviewof filters = (\n Inputs.form({\n seasonYear: Inputs.range([2009, 2023], {label: \"Max Season Year\", step: 1, value:2023}),\n franchise:Inputs.select(franchises, {label: \"Franchise\", value: franchises, multiple:4})\n},\n // borrowed template from Allison Horst - splits up in two columns\n {template})\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"# Data\n\nData is from my [Github](https://github.com/tashapiro/drag-race/tree/main/data). I did some additional wrangling and combining in R before uploading. Geo coordinates per hometown created with **tidygeocoder**. ","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"queen_geo_data = await FileAttachment(\"queen_geo_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"contestants = await FileAttachment(\"contestants.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"//get unique franchise names in a list for filter\nfranchises = [...new Set(contestants.map(f => f.franchise_name))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"queenList = [...new Set(queen_geo_data.map(q => q.name))].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"//subset contestant info based on filters (franchise & max season)\nscFiltered = contestants.filter(contestant => filters.franchise.includes(contestant.franchise_name) && contestant.season_year<=filters.seasonYear);","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"// in geo data, only return records that match contestant ids from filtered contestant data\nqueenGeoFiltered = queen_geo_data.filter(queen => scFiltered.some(sc => sc.contestant_id === queen.contestant_id));","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"# Import Leaflet\n\nNeed additional version for **markerClusterGroup**.","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"# CSS\n\nMake it sparkle!","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"## Input Form Template\n\nCode for template taken from Allison Horst's [Life in a Waffle Chart notebook](https://observablehq.com/@observablehq/life-in-waffle). \n\nOriginal credit - Martien van Steenbergen's [Horizontal inputs](https://observablehq.com/@martien/horizontal-inputs) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"// Template credit: This layout is updated from Martien van Steenbergen @martien/horizontal-inputs\n\ntemplate = (inputs) => \nhtl.html`

${Object.values(inputs)}

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"## Formatting The Other Stuff","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":238,"value":"import 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js';\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css';","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}