Hugging Face's logo

Spaces:
iurbinah
/
interactive-world-map
Running

App Files Community
iurbinah commited on
Commit
6a02e56
·
verified ·
1 Parent(s): c0eb3d3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +4 -4
index.html CHANGED
@@ -1,7 +1,7 @@
1
  <!DOCTYPE html><html lang="en">
2
  <head>
3
  <meta charset="utf-8" />
4
- <title>World Map – Touch‑Friendly Canvas</title>
5
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <!-- D3 & TopoJSON --> <script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://unpkg.com/topojson@3"></script> <style>
6
  :root {
7
  --water: #a0d3ff;
@@ -40,7 +40,7 @@
40
  <div class="info-box"><strong>Selected Country ID:</strong><span id="country-id">None</span></div>
41
  <canvas id="mapCanvas"></canvas><script>
42
  (async function () {
43
- /* Hi‑DPI Canvas ------------------------------------------------------ */
44
  const canvas = document.getElementById('mapCanvas');
45
  const ctx = canvas.getContext('2d');
46
  let dpr = window.devicePixelRatio || 1;
@@ -88,7 +88,7 @@
88
  /* Zoom & Pan --------------------------------------------------------- */
89
  d3.select(canvas)
90
  .call(
91
- d3.zoom().scaleExtent([1,8]).on('zoom', (ev)=>{ currentT=ev.transform; render(); })
92
  )
93
  .on('dblclick.zoom', null); // disable default dblclick
94
  canvas.addEventListener('dblclick', ()=>{
@@ -126,7 +126,7 @@
126
  ctx.translate(currentT.x, currentT.y); ctx.scale(currentT.k, currentT.k);
127
  ctx.beginPath(); path({type:'FeatureCollection', features:countries});
128
  ctx.fillStyle=getComputedStyle(document.documentElement).getPropertyValue('--country'); ctx.fill();
129
- ctx.strokeStyle=getComputedStyle(document.documentElement).getPropertyValue('--stroke'); ctx.lineWidth = .25; ctx.stroke();
130
  if(hovered){ ctx.beginPath(); path(hovered); ctx.fillStyle=getComputedStyle(document.documentElement).getPropertyValue('--country-hover'); ctx.fill(); }
131
  if(selected){ ctx.beginPath(); path(selected); ctx.fillStyle=getComputedStyle(document.documentElement).getPropertyValue('--country-selected'); ctx.fill(); }
132
  ctx.restore();
 
1
  <!DOCTYPE html><html lang="en">
2
  <head>
3
  <meta charset="utf-8" />
4
+ <title>World Map – Touch-Friendly Canvas</title>
5
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <!-- D3 & TopoJSON --> <script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://unpkg.com/topojson@3"></script> <style>
6
  :root {
7
  --water: #a0d3ff;
 
40
  <div class="info-box"><strong>Selected Country ID:</strong><span id="country-id">None</span></div>
41
  <canvas id="mapCanvas"></canvas><script>
42
  (async function () {
43
+ /* Hi-DPI Canvas ------------------------------------------------------ */
44
  const canvas = document.getElementById('mapCanvas');
45
  const ctx = canvas.getContext('2d');
46
  let dpr = window.devicePixelRatio || 1;
 
88
  /* Zoom & Pan --------------------------------------------------------- */
89
  d3.select(canvas)
90
  .call(
91
+ d3.zoom().scaleExtent([1,16]).on('zoom', (ev)=>{ currentT=ev.transform; render(); })
92
  )
93
  .on('dblclick.zoom', null); // disable default dblclick
94
  canvas.addEventListener('dblclick', ()=>{
 
126
  ctx.translate(currentT.x, currentT.y); ctx.scale(currentT.k, currentT.k);
127
  ctx.beginPath(); path({type:'FeatureCollection', features:countries});
128
  ctx.fillStyle=getComputedStyle(document.documentElement).getPropertyValue('--country'); ctx.fill();
129
+ ctx.strokeStyle=getComputedStyle(document.documentElement).getPropertyValue('--stroke'); ctx.lineWidth=.18; ctx.stroke();
130
  if(hovered){ ctx.beginPath(); path(hovered); ctx.fillStyle=getComputedStyle(document.documentElement).getPropertyValue('--country-hover'); ctx.fill(); }
131
  if(selected){ ctx.beginPath(); path(selected); ctx.fillStyle=getComputedStyle(document.documentElement).getPropertyValue('--country-selected'); ctx.fill(); }
132
  ctx.restore();