feat(mobile): improve map responsiveness

VincentHardouin · Mar 6, 2024 · dd96f31 · dd96f31
1 parent b15b97a
commit dd96f31
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 <body>
 <h1>Métro travel</h1>
 <p id="instruction"></p>
-<svg id="my_dataviz" width="800" height="500"></svg>
+<svg id="carte"></svg>
 <input id="station" list="stations">
 <datalist id="stations">
 </datalist>

diff --git a/src/script.js b/src/script.js
@@ -10,14 +10,29 @@ const stations = stationsData.features.filter((s) => {
 });
 const lines = linesData.features;
 
-const svg = d3.select("svg"),
-  width = +svg.attr("width"),
-  height = +svg.attr("height");
+const svg = d3.select("svg");
+
+const m = 353;
+const b = -2175;
+const scale = (x) => m * x + b;
 
 const projection = d3.geoMercator()
-  .center([2.3522, 48.8566])
-  .scale(190000)
-  .translate([width / 2, height / 2])
+
+function resizeMap() {
+  const width = parseInt(svg.style('width'));
+  const height = width * 0.825;
+  console.log(width, height)
+  projection
+    .center([2.3522, 48.8566])
+    .scale(scale(height))
+    .translate([width / 2, height / 2])
+
+  svg.attr("width", width).attr("height", height);
+}
+
+resizeMap();
+window.addEventListener('resize', resizeMap);
+
 
 const tooltip = d3.select('body').append('div')
   .attr('class', 'tooltip')

diff --git a/src/style.css b/src/style.css
@@ -1 +1,12 @@
-@import 'npm:simpledotcss/simple.min.css';
+@import 'npm:simpledotcss/simple.min.css';
+
+#carte {
+    font-size: 0;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+svg {
+    width: 100%;
+    height: 100%;
+}