jmap = { let container = DOM.element("div", { style: `width:${width}px;height:${width / 2}px` }); yield container; let map = L.map(container, { zoomSnap: 0, zoomDelta: 0.2, wheelPxPerZoomLevel: 90, boxZoom: true }).fitBounds(bounds); // .setView([53.557799, -113.406994], 13) let osmLayer = L.tileLayer( // 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@1x.png", { attribution: '© OpenStreetMap contributors' } ).addTo(map); //initialize svg to add to map L.svg({ clickable: true }).addTo(map); //<<<<<<<<<< const overlay = d3.select(map.getPanes().overlayPane); const svg = overlay.select("svg").attr("pointer-events", "auto"); //<<<<<<<<<<<< const zone_scale = d3 .scaleThreshold() .range([1, 2, 3, 4, 5]) .domain(zone_cuts); // should make these external !! they are my zone cut-off rates const Dots = svg .selectAll("circle") .attr("class", "Dots") .data(data2) .join("circle") .attr("id", "dotties") .attr("fill", "none") // added this May 8, it was 'none' // d => // (focuss[0] <= d.date) & (d.date <= focuss[1]) ? color_scale(d.hr) : 'none' // ) .attr("opacity", opacitySlider) //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", (d) => map.latLngToLayerPoint([d.lat, d.lng]).x) .attr("cy", (d) => map.latLngToLayerPoint([d.lat, d.lng]).y) .attr("r", circle_size); Dots.on("mouseover", function () { //function to add mouseover event d3.select(this) .transition() //D3 selects the object we have moused over in order to perform operations on it .duration("150") //how long we are transitioning between the two states (works like keyframes) // .attr("fill", "red") //change the fill .attr("stroke", "#333") .attr("stroke-width", 2) .attr("r", 20); //change radius }).on("mouseout", function () { //reverse the action based on when we mouse off the the circle d3.select(this) .transition() .duration("150") // .attr("fill", d => color_scale(d.hr)) .attr("stroke", "none") .attr("r", 5); }); // tooltips Dots.append("title").text((d) => `Zone ${zone_scale(d.hr)} HR: ${d.hr}`); const // line is a function the creates a path from our lat lng coords line = d3 .line() .x((d) => map.latLngToLayerPoint([d.lat, d.lng]).x) .y((d) => map.latLngToLayerPoint([d.lat, d.lng]).y); const d_str = line(data2); // const d_str = line(j_dt.objects()); const Path = svg .append("path") //.style("stroke", path_color) .style("stroke", "black") .style("stroke-width", 1) .style("fill", "none") .attr("d", d_str); // who calls this? const update = () => { Dots.attr("cx", (d) => map.latLngToLayerPoint([d.lat, d.lng]).x).attr( "cy", (d) => map.latLngToLayerPoint([d.lat, d.lng]).y ); Path.attr("d", line(j_dt.objects())); }; map.on("zoomend", update); }