svg circles drawn for points maintain scale on zoom

This example shows the points, which represent coffee shops near my apartment, maintaining their scale as one zooms in and out. There are also tooltips on mouseover, using d3.tip.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
}

#container {
  position: relative;
  overflow: hidden;
	background: #ddd;
}

#map{
	width:100%;
	height:100%;
}

#points{
	width:100%;
	height:100%;
	position:relative;
	z-index:100;
}

.layer {
  position: absolute;
}

.tile {
  pointer-events: none;
  position: absolute;
  width: 256px;
  height: 256px;
}

.coffee{
	opacity: 0.8;
	fill: #ff2200;
}

.coffee:hover{
	opacity: 1.0;
	fill: #ff8a00;
}

.d3-tip {
  line-height: 1.5;
  font-weight: normal;
	font-family: Helvetica, Arial, sans-serif;
	font-size:13px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 3px;
	position:relative;
	z-index:101;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 20px;
  width: 100%;
  line-height: .5;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.tile.v0.min.js"></script>
<script src="d3.tip.js"></script>

var width = Math.max(960, window.innerWidth),
    height = Math.max(500, window.innerHeight),
    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);

d3.csv("coffee.csv", function(error, dataset) { createMap(dataset) });

var tile = d3.geo.tile()
    .size([width, height]);

var projection = d3.geo.mercator()
.scale((1 << 23) / 2 / Math.PI)
.translate([-width / 2, -height / 2]); // just temporary

var tileProjection = d3.geo.mercator();

var tilePath = d3.geo.path()
    .projection(tileProjection);

var zoom = d3.behavior.zoom()
    .scale(projection.scale() * 2 * Math.PI)
    .scaleExtent([1 << 9, 1 << 25])
    .translate(projection([-73.978277, 40.6791989]).map(function(x) { return -x; }))
    .on("zoom", zoomed);
		
var container = d3.select("body").append("div")
    .attr("id", "container")
    .style("width", width + "px")
    .style("height", height + "px")
    .call(zoom);

var map = container.append("g")
		.attr("id", "map")

var points = container.append("svg")
		.attr("id", "points")
				
var layer = map.append("div")
    .attr("class", "layer");

var tip = d3.tip()
	  .attr('class', 'd3-tip')
	  .offset([-10, 0])
	  .html(function(d) { return "<img src='img/" + d.img + "' class='treeimg'>" + d.num + ". " + d.name + "<br/>(" + d.genus + " " + d.species + ")"; })

var tip = d3.tip()
  	.attr('class', 'd3-tip')
		.offset([-10, 0])
		.html(function(d) { return d.name; })

points.call(tip);

zoomed();

function createMap(dataset) {
	d3.select("#points").selectAll("circle").data(dataset) //plotted 	locations on map
	.enter()
	.append("circle")
	.attr("cx", function(d) {return projection([d.y,d.x])[0]})
	.attr("cy", function(d) {return projection([d.y,d.x])[1]})
	.attr("class", "coffee")
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)	
	zoomed();
}

function zoomed() {
  var tiles = tile
      .scale(zoom.scale())
      .translate(zoom.translate())
      ();

projection
      .scale(zoom.scale() / 2 / Math.PI)
      .translate(zoom.translate());

image.exit()
      .remove();

image.enter().append("img")
      .attr("class", "tile")
			.attr("src", function(d) { return "https://" + ["a", "b", "c"][Math.random() * 3 | 0] + ".tile.openstreetmap.se/hydda/full/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
      .style("left", function(d) { return (d[0] << 8) + "px"; })
      .style("top", function(d) { return (d[1] << 8) + "px"; });
}

function matrix3d(scale, translate) {
  var k = scale / 256, r = scale % 1 ? Number : Math.round;
  return "matrix3d(" + [k, 0, 0, 0, 0, k, 0, 0, 0, 0, k, 0, r(translate[0] * scale), r(translate[1] * scale), 0, 1 ] + ")";
}

function prefixMatch(p) {
  var i = -1, n = p.length, s = document.body.style;
  while (++i < n) if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
  return "";
}

function formatLocation(p, k) {
  var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
  return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
       + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
}

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/d3.geo.tile.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/d3.geo.tile.v0.min.js