2d:null 2e:["$","title",null,{"children":"Interactive Map v1 | Felix Parker | Observable"}] 33:T40c,function addMarkers(map) { const hospitals_geojson = computeData(rawResponse); map.addSource("hospitals", { type: "geojson", data: hospitals_geojson, }); const colorscale = getScoreColorscale(rawResponse); hospitals_geojson.features.forEach(pt => { let el = document.createElement("div"); el.id = "marker-" + pt.properties.id; el.className = "marker"; let im = markerImgElem.cloneNode(true); const c = colorscale(pt.properties.score); im.querySelector("path").setAttribute("fill", c); im.querySelector("path").setAttribute("stroke", "black"); im.querySelector("path").setAttribute("stroke-width", "20px"); el.appendChild(im); // el = null; const popupContent = `

${pt.properties.name}

Score: ${pt.properties.score.toFixed(2)}

`; const popup = new mapboxgl.Popup({offset: 15}).setHTML(popupContent); let marker = new mapboxgl.Marker(el) .setLngLat(pt.geometry.coordinates) .setPopup(popup) .addTo(map); }); }34:[{"id":"135eebb38fd78e71b9b15088a274f79962306d0109f5776088a1c38c922ec2be7b2d162986b33be248665c2299f3e8d3cd4dc27f49f11cb9bea8c8923ae3112e","href":"https://static.observableusercontent.com/files/135eebb38fd78e71b9b15088a274f79962306d0109f5776088a1c38c922ec2be7b2d162986b33be248665c2299f3e8d3cd4dc27f49f11cb9bea8c8923ae3112e","name":"hospital_selection_response_v2.json","type":"application/json","lastModified":1609735747492.849,"size":4854},{"id":"7c563cf097fd4929617e7a564695294a277c876cf88c141c0c147e4264cca1453aa9485e40e2e1ac15280d42a5f9f7a74789392efa447945540cbcb1784578ad","href":"https://static.observableusercontent.com/files/7c563cf097fd4929617e7a564695294a277c876cf88c141c0c147e4264cca1453aa9485e40e2e1ac15280d42a5f9f7a74789392efa447945540cbcb1784578ad","name":"map-marker-solid-v2.svg","type":"image/svg+xml","lastModified":1609745006723.176,"size":289}] 31:{"id":"e044fbdfdc3425a3","slug":"interactive-map-v1","title":"Interactive Map v1","thumbnail":"e52af0f56b641d21c20b55059788a96a7796b4f418f6da408a61a0da89570bf6","access_level":"public","create_time":"$D2021-01-04T01:27:11.712Z","update_time":"$D2021-01-04T07:26:49.641Z","view_time":null,"first_public_time":"$D2022-03-03T16:44:56.775Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"cb8d806ef4830b28","login":"flixpar","name":"Felix Parker","avatar_url":"https://avatars-next.observableusercontent.com/b9e707cc9b640fd9e2baeb911623f5c3a313bbaaac3228e2b696bf0185ac62c0","tier":"starter_2024"},"version":253,"publish_version":253,"role":null,"authored":false,"authors":[{"type":"individual","id":"3895b048b137929b","login":"flixpar","name":"Felix Parker","avatar_url":"https://avatars-next.observableusercontent.com/b9e707cc9b640fd9e2baeb911623f5c3a313bbaaac3228e2b696bf0185ac62c0","tier":null}],"members":[{"type":"individual","id":"3895b048b137929b","login":"flixpar","name":"Felix Parker","avatar_url":"https://avatars-next.observableusercontent.com/b9e707cc9b640fd9e2baeb911623f5c3a313bbaaac3228e2b696bf0185ac62c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Interactive Map v1","cells":[{"id":0,"value":"md`# Interactive Map v1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"{\n let container = html`

`;\n let content = html`

${container}

`;\n yield content\n \n // const mapboxStyle = \"mapbox://styles/mapbox/streets-v11\";\n const mapboxStyle = \"mapbox://styles/flixpar/ckji5ze386yqx19phi3ziiyya\";\n\n let map = new mapboxgl.Map({\n container,\n style: mapboxStyle,\n center: [pos.long, pos.lat],\n zoom: 9,\n pitch: 0,\n antialias: false,\n });\n\n map.addControl(\n new mapboxgl.NavigationControl({showCompass: false}),\n \"top-left\"\n );\n\n map.on(\"load\", e => {\n addMarkers(map);\n });\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"pos = ({lat: \"39.2961773\", long: \"-76.5939447\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"function computeData(response) {\n let geojson = {\n type: \"FeatureCollection\",\n features: [],\n };\n \n const n = response.hospitals.length;\n for (let i = 0; i < n; i++) {\n const pt = {\n type: \"feature\",\n geometry: {\n type: \"Point\",\n coordinates: [response.locations[i].long, response.locations[i].lat],\n },\n properties: {\n name: response.hospitals[i][0],\n id: response.hospitals[i][1],\n score: response.scores[i],\n },\n };\n geojson.features.push(pt);\n }\n \n return geojson;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function getScoreColorscale(response) {\n const minScore = d3.min(response.scores);\n const maxScore = d3.max(response.scores);\n\tconst colorscale = d3.scaleSequential(d3.interpolateRdYlGn).domain([maxScore, minScore]);\n\treturn colorscale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"rawResponse = JSON.parse(await FileAttachment(\"hospital_selection_response_v2.json\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"markerImgElem = {\n let elem = document.createElement(\"span\");\n elem.innerHTML = markerImgContent;\n return elem.children[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"markerImgURL = await FileAttachment(\"map-marker-solid-v2.svg\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"markerImgContent = await FileAttachment(\"map-marker-solid-v2.svg\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"mapboxgl.accessToken = \"pk.eyJ1IjoiZmxpeHBhciIsImEiOiJja2kxeWh3cXMwYjY1MnJsbGk5cjlpaHl4In0.my1R6Ozh-LMXfo3jlqzOqA\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"mapboxgl = require(\"mapbox-gl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"