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') // 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-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); }