← Examples
regions · high detail · filter · properties · labels

Poland Voivodeships

Poland's 16 first-level administrative divisions at high detail. The filter=Poland parameter limits the response to Polish voivodeships — Polish regions only exist in the 10m dataset, so detail=high is required. Regions are colored with a sequential blue scale and labeled directly on the map using SVG text placed at each polygon's centroid.

API Call

https://api.mapjson.com/v1/geo?layer=regions&filter=Poland&detail=high&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; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const width = 960, height = 640;
    const svg = d3.select("#map").append("svg").attr("viewBox", `0 0 ${width} ${height}`);

    const url = "https://api.mapjson.com/v1/geo?layer=regions&filter=Poland&detail=high&properties=name";

    d3.json(url).then(topo => {
      const regions = topojson.feature(topo, topo.objects.geo);
      const n = regions.features.length;
      const projection = d3.geoMercator().fitSize([width, height], regions);
      const path = d3.geoPath().projection(projection);

      // Sequential blue scale across all regions
      svg.append("g")
        .selectAll("path")
        .data(regions.features)
        .join("path")
        .attr("d", path)
        .attr("fill", (d, i) => d3.interpolateBlues(0.2 + (i / (n - 1)) * 0.65))
        .attr("stroke", "#fff")
        .attr("stroke-width", 1.5);

      // Permanent labels at polygon centroids
      svg.append("g")
        .attr("pointer-events", "none")
        .selectAll("text")
        .data(regions.features)
        .join("text")
        .attr("transform", d => `translate(${path.centroid(d)})`)
        .attr("text-anchor", "middle")
        .attr("dominant-baseline", "central")
        .style("font-family", "monospace")
        .style("font-size", "9px")
        .style("fill", (d, i) => i / (n - 1) > 0.55 ? "#fff" : "#1a2d3d")
        .style("stroke", (d, i) => i / (n - 1) > 0.55 ? "rgba(0,20,40,0.4)" : "rgba(255,255,255,0.85)")
        .style("stroke-width", "3px")
        .style("paint-order", "stroke fill")
        .text(d => d.properties.name || "");
    });
  </script>
</body>
</html>