Add and update example maps.

yaph · yaph · commit 499bcae20ed3 · 2024-10-03T02:07:46.000+02:00
diff --git a/examples/country-index.html b/examples/country-index.html
@@ -14,6 +14,8 @@
 </head>
 <body>
 <div class="container d3-geomap" id="main"></div>
+<script src="https://unpkg.com/d3-zoom"></script>
+<script src="https://unpkg.com/d3-drag"></script>
 
 <script src="../node_modules/d3-array/dist/d3-array.js"></script>
 <script src="../node_modules/d3-geo/dist/d3-geo.js"></script>
@@ -44,7 +46,7 @@
     if (resp.ok) return resp.text();
     throw new Error(`HTTP error! Status: ${resp.status}`);
 }).then(text => {
-    drawCountries(JSON.parse(text));
+    drawCountries(JSON.parse(text).sort((a, b) => a.name.localeCompare(b.name)));
 });
 
 function drawCountries(countries) {
@@ -55,7 +57,8 @@
         map_container.append('h2').text(country.name);
 
         const country_map = d3.geomap()
-            .geofile(`../dist/topojson/countries/${country.iso3}.json`);
+            .geofile(`../dist/topojson/countries/${country.iso3}.json`)
+            .projection(d3.geoMercator)
         country_map.draw(map_container);
     });
 }
diff --git a/examples/country-map.html b/examples/country-map.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Country Map</title>
+<link href="../dist/d3-geomap.css" rel="stylesheet">
+</head>
+<body>
+<div class="d3-geomap" id="main"></div>
+
+<script src="../node_modules/d3-array/dist/d3-array.js"></script>
+<script src="../node_modules/d3-geo/dist/d3-geo.js"></script>
+
+<script src="../node_modules/d3-dsv/dist/d3-dsv.js"></script>
+<script src="../node_modules/d3-fetch/dist/d3-fetch.js"></script>
+
+<script src="../node_modules/d3-time/dist/d3-time.js"></script>
+<script src="../node_modules/d3-time-format/dist/d3-time-format.js"></script>
+<script src="../node_modules/d3-format/dist/d3-format.js"></script>
+<script src="../node_modules/d3-scale/dist/d3-scale.js"></script>
+<script src="../node_modules/d3-color/dist/d3-color.js"></script>
+<script src="../node_modules/d3-interpolate/dist/d3-interpolate.js"></script>
+
+<script src="../node_modules/d3-selection/dist/d3-selection.js"></script>
+<script src="../node_modules/d3-timer/dist/d3-timer.js"></script>
+<script src="../node_modules/d3-ease/dist/d3-ease.js"></script>
+<script src="../node_modules/d3-dispatch/dist/d3-dispatch.js"></script>
+<script src="../node_modules/d3-transition/dist/d3-transition.js"></script>
+
+<script src="../node_modules/topojson/dist/topojson.js"></script>
+<script src="../dist/d3-geomap.js"></script>
+
+<script>
+const iso3 = 'ESP';
+const name = 'Spain';
+
+const container = d3.select('#main').append('div')
+    .attr('id', iso3)
+    .attr('class', 'country');
+container.append('h2').text(name);
+
+d3.geomap()
+    .geofile(`../dist/topojson/countries/${iso3}.json`)
+    .unitId('fips')
+    .draw(container);
+</script>
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -22,6 +22,9 @@ <h1>d3-geomap examples</h1>
     <li>
         <a href="./country-index.html">Country Index</a>
     </li>
+    <li>
+        <a href="./country-map.html">Country Map</a>
+    </li>
     <li>
         <a href="./geodata-property.html">geoData Property</a>
     </li>
