circles = {
function makeCircle(lng, lat, color){
return svg.append('circle')
.style("position", "absolute")
.attr("class", "inter-circle")
.style('z-index', 3)
.datum({lat: lat, lng: lng, size:2*1609.344})
.attr("cx", d => project(d.lng, d.lat).x)
.attr("cy", d => project(d.lng, d.lat).y)
.attr('r', d=> pixelValue(d.lat, d.size, map.getZoom()))
.attr('fill', color)
.attr('fill-opacity', 0.3)
.attr('stroke', color)
.attr('stroke-opacity', 0.8)
.attr('stroke-width', 2)
.on("mouseover", function() {
d3.event.stopPropagation();
})
.on("mouseout", function() {
d3.event.stopPropagation();
});
};
var circle_1 = makeCircle(map.getCenter().lng+.02, map.getCenter().lat+.02, "#065535")
var circle_2 = makeCircle(map.getCenter().lng-.02, map.getCenter().lat-.02, '#6897bb')
function make_drag(other_circle){
return d3.drag()
.on('drag', function(event, d) {
var new_coords = unproject(event.x, event.y);
d3.select(this)
.style('z-index', 3)
.attr('cx', d.x = event.x)
.attr('cy', d.y = event.y)
.datum(d=>({lat: new_coords.lat, lng: new_coords.lng, size:d.size}));
dots
.attr("opacity", d=>inCircle(d, d3.select(this)) && inCircle(d, other_circle) ? 0.8 : 0.65)
.attr("fill", d=>inCircle(d, d3.select(this)) && inCircle(d, other_circle)? "#cc0000" : "#c0c0c0");
})
.on('start', function() {
d3.select(this).attr("stroke", "black").style('z-index', 3);
//d3.event.sourceEvent.stopPropagation();
})
.on('end',function() {
d3.select(this).attr("stroke", "#6897bb").style('z-index', 3);
//d3.event.sourceEvent.stopPropagation();
});
};
circle_1.call(make_drag(circle_2));
circle_2.call(make_drag(circle_1));
var slider1 = d3.select("#radiusSlider1");
slider1.on("input", function() {
var value = this.value;
circle_1.datum().size = value*1609.344;
circle_1.attr('r', d=> pixelValue(d.lat, d.size, map.getZoom()));
dots
.attr("opacity", d=>inCircle(d, circle_2) && inCircle(d, circle_1) ? 0.8 : 0.65)
.attr("fill", d=>inCircle(d, circle_2) && inCircle(d, circle_1)? "#cc0000" : "#c0c0c0");;
});
var slider2 = d3.select("#radiusSlider2");
slider2.on("input", function() {
var value = this.value;
circle_2.datum().size = value*1609.344;
circle_2.attr('r', d=> pixelValue(d.lat, d.size, map.getZoom()));
dots
.attr("opacity", d=>inCircle(d, circle_2) && inCircle(d, circle_1) ? 0.8 : 0.65)
.attr("fill", d=>inCircle(d, circle_2) && inCircle(d, circle_1)? "#cc0000" : "#c0c0c0");;
});
circle_1.lower();
circle_2.lower();
return [circle_1, circle_2]
}