31:T7f1,viewof map = { const container = html`

`; yield container; // Give the container dimensions. const map = container.value = new mapboxgl.Map({ container, center: [-121.998856, 37.3248859], zoom: 11, //pitch:80, style: "mapbox://styles/mapbox/satellite-v9", scrollZoom: true }); invalidation.then(() => map.remove()); var div = d3.select('#tooltip') // Setup our svg layer that we can manipulate with d3 const bb = container.getBoundingClientRect(); var svg = d3.select(container) .append("svg") .style("position", "absolute") .style("top", 0) .style("left", 0) .attr("width", bb.width) .attr("height", bb.height) .style("pointer-events", "none"); // don't capture mouse events, so mapbox can have pan and zoom //Project any point to map's current state function projectPoint(lon, lat) { var point = map.project(new mapboxgl.LngLat(lon, lat)); this.stream.point(point.x, point.y); } //Projection function var transform = d3.geoTransform({point:projectPoint}); var path = d3.geoPath(features) //.pointRadius(d => radiusScale(d.frequency)) .projection(transform); const dots = svg.selectAll(".puesto") .data(features) //.enter() //.append("circle") .join("path") //.enter() //.append("circle") .attr("class", "puesto") .style("fill", "skyblue") .style("opacity", "0.8") .style('stroke', 'steelblue') .style('cursor', 'crosshair') .on("mouseover", d => mutable hovered=d) .style("pointer-events", "all"); const update = () => { dots.attr("d", path); //path.pointRadius(d => radiusScale(d.Frequency)) } // Every time the map changes, update the dots map.on("viewreset", update); map.on("move", update); map.on("moveend", update); update(); }32:[{"id":"86d7ad7416f19eca0a545ac68fe05d11d0ab5db44196d32edced5722f252e5defd610bfbec1d24e660f61745bc752f5112a24fd0640acc0513e22d34b01af71d","href":"https://static.observableusercontent.com/files/86d7ad7416f19eca0a545ac68fe05d11d0ab5db44196d32edced5722f252e5defd610bfbec1d24e660f61745bc752f5112a24fd0640acc0513e22d34b01af71d","name":"mergedDf.csv","type":"text/csv","lastModified":1579560447229.606,"size":1321215}] 2f:{"title":"Silicon Valley Licensed Transmitter Data Mapbox+D3","cells":[{"id":0,"value":"md`# Silicon Valley Licensed Transmitter Data Mapbox+D3\nThis map is now broken, probably due to breaking changes in the mapbox-gl. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"{\n const cdata = hovered && hovered.properties;\n const table = cdata ? html`\n \n \n \n \n \n

Description	${cdata.description}
Licensee	${cdata.licensee}
Service	${cdata.service}
Callsign	${cdata.callsign}
Distance	${cdata.distance}

\n`\n : html`Nothing selected`\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`\n\nPublic FCC licensed transmitter data collected and merged from queries made here https://fjallfoss.fcc.gov/General_Menu_Reports/engineering_search.cfm?accessible=NO&wild_select=on in 2017.\n\nUsing Mapbox + D3 Overlay see https://observablehq.com/@kiniluo/mapbox-d3-overlay\n\nKini's notes on combining Mapboxgl and d3:\n\nYou just need to add a new svg on top of mapbox and request the current projection so you know where to draw. Also, make sure the svg is properly placed and that it doesn't capture all the mouse events so the map can still have pan+zoom\n\nCombining code from [@git-ashish](https://bl.ocks.org/git-ashish/55ae93f7c487c69d92004cf58451a9f6) and [@enjalot](http://bl.ocks.org/enjalot/0d87f32a1ccb9a720d29ba74142ba365) blocks, and [@mbostock notebook](https://observablehq.com/@mbostock/mapbox-fly-to)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"mutable hovered = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"services = new Set(data.map(d => d.Service))","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"data = d3.csvParse(await FileAttachment(\"mergedDf.csv\").text()).map(d => ({\n Distance: +d['Distance From Center'],\n Frequency: +d['Center Frequency'],\n Longitude: +d['Longitude Decimal'],\n Latitude: +d['Latitude Decimal'],\n Type: d.Type,\n Date: parseDate(d['Issue Date']),\n Callsign: d['Callsign'],\n Description: d['Description'],\n Service: d['Radio Service'],\n Licensee: d['Licensee']\n //Date: d['Issue Date']\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"frequencyRange = d3.extent(data.map(d => d.Frequency))","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"radiusScale = d3.scaleLinear().domain(frequencyRange).range([3,15])","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"features = data.map(d => ({type: 'Feature',\n properties: {\n description: d.Description,\n distance: d.Distance,\n callsign: d.Callsign,\n service: d.Service,\n licensee: d.Licensee,\n frequency: d.Frequency\n },\n geometry: {\n type: \"Point\",\n coordinates: [d.Longitude, d.Latitude],\n r: radiusScale(d.Frequency)\n }}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"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"}],"files":"$W32","stdlib":"1","titling":"auto"}