countries · medium detail · filter · properties

Europe with Hover

Filtered to European countries at medium resolution with country names requested as properties. Hover to inspect each country. The filter=europe parameter filters by continent — Russia is included as it is classified in Europe by Natural Earth.

API Call

https://api.mapjson.com/v1/geo?layer=countries&filter=europe&detail=medium&properties=name

Code

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
  <style>
    svg { width: 100%; display: block; }
    #tooltip {
      position: fixed; background: #000; color: #fff;
      font-size: 12px; padding: 4px 8px; pointer-events: none; opacity: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <div id="tooltip"></div>
  <script>
    const width = 960, height = 560;
    const svg = d3.select("#map").append("svg").attr("viewBox", `0 0 ${width} ${height}`);
    const tooltip = d3.select("#tooltip");

    svg.append("rect").attr("width", width).attr("height", height).attr("fill", "#cfe0ea");

    const projection = d3.geoMercator().center([15, 54]).scale(600).translate([width / 2, height / 2]);
    const path = d3.geoPath().projection(projection);

    const url = "https://api.mapjson.com/v1/geo?layer=countries&filter=europe&detail=medium&properties=name";

    d3.json(url).then(topo => {
      svg.append("g")
        .selectAll("path")
        .data(topojson.feature(topo, topo.objects.geo).features)
        .join("path")
        .attr("d", path)
        .attr("fill", "#d9d0be")
        .attr("stroke", "#fff")
        .attr("stroke-width", 0.6)
        .style("cursor", "pointer")
        .on("mouseover", function(event, d) {
          d3.select(this).attr("fill", "#c4b89e");
          tooltip.style("opacity", 1).text(d.properties.name || "");
        })
        .on("mousemove", function(event) {
          tooltip.style("left", event.clientX + 12 + "px").style("top", event.clientY - 8 + "px");
        })
        .on("mouseout", function() {
          d3.select(this).attr("fill", "#d9d0be");
          tooltip.style("opacity", 0);
        });
    });
  </script>
</body>
</html>