Initial commit

2026-06-13 14:31:01 +02:00 · 2025-06-02 18:13:00 -04:00
commit c73a343599
16 changed files with 46480 additions and 0 deletions
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Statistics Canada Geographies Search</title>
+  <link href="./output.css" rel="stylesheet">
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
+  <div class="w-full max-w-3xl">
+    <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">
+      Statistics Canada Geographies Search
+    </h1>
+
+    <input
+      id="searchInput"
+      type="text"
+      placeholder="Type at least 3 characters..."
+      class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+    />
+
+    <div class="mt-6 overflow-x-auto rounded-md shadow">
+      <table class="min-w-full bg-white">
+        <thead>
+          <tr class="bg-gray-200 text-sm font-semibold text-gray-700 text-left">
+            <th class="px-4 py-2">DGUID</th>
+            <th class="px-4 py-2">Name</th>
+            <th class="px-4 py-2">Geographic Level</th>
+          </tr>
+        </thead>
+        <tbody id="resultsBody" class="text-sm text-gray-800 divide-y divide-gray-200">
+          <!-- Results will be inserted here -->
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <script>
+    const input = document.getElementById('searchInput');
+    const resultsBody = document.getElementById('resultsBody');
+    let debounceTimer;
+
+    const geographicLevelLabels = {
+      13: "Country",
+      12: "Region",
+      11: "Province and Territory",
+      10: "Economic Region",
+      9: "Census Agricultural Region",
+      8: "Census Division",
+      7: "Census Consolidated Subdivision",
+      6: "Census Metropolitan Area",
+      5: "Census Subdivision",
+      4: "Federal Electoral District",
+      3: "Designated Place",
+      2: "Population Centre",
+      1: "Place Name"
+    };
+
+    input.addEventListener('input', () => {
+      const query = input.value.trim();
+      clearTimeout(debounceTimer);
+
+      if (query.length >= 3) {
+        debounceTimer = setTimeout(() => {
+          //fetch(`https://geographies.sisyphus.ca/api/?search=${encodeURIComponent(query)}`)
+          fetch(`/api/?search=${encodeURIComponent(query)}`)
+            .then(response => {
+              if (!response.ok) throw new Error('Network response was not ok');
+              return response.json();
+            })
+            .then(data => {
+              resultsBody.innerHTML = '';
+              if (data.length === 0) {
+                  resultsBody.innerHTML = `
+                    <tr>
+                      <td colspan="4" class="px-4 py-2 text-red-500">No results</td>
+                    </tr>
+                  `;
+              }
+              data.forEach(item => {
+                const dguid = item[0];
+                const searchName = item[1];
+                const geographicLevel = item[2]
+                const geographicLevelText = geographicLevelLabels[geographicLevel];
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                  <td class="px-4 py-2"><a href="map.html?dguid=${dguid}" target="_blank">${dguid}</a></td>
+                  <td class="px-4 py-2">${searchName}</td>
+                  <td class="px-4 py-2">${geographicLevelText}</td>
+                `;
+                resultsBody.appendChild(row);
+              });
+            })
+            .catch(error => {
+              console.error('Error fetching data:', error);
+              resultsBody.innerHTML = `
+                <tr>
+                  <td colspan="4" class="px-4 py-2 text-red-500">Error fetching data</td>
+                </tr>
+              `;
+            });
+        }, 300);
+      } else {
+        resultsBody.innerHTML = '';
+      }
+    });
+  </script>
+</body>
+</html>
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Statistics Canada Geography dguid Map</title>
+  <link href="./maplibre-gl.css" rel="stylesheet" />
+  <style>
+      body { margin: 0; padding: 0; }
+      html, body, #map { height: 100%; }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script src="./maplibre-gl.js"></script>
+  <script>
+    // Initialize the map
+    const map = new maplibregl.Map({
+      container: 'map',
+      style: {
+        version: 8,
+        sources: {
+          'openstreetmap': {
+            type: 'raster',
+            tiles: [
+              'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
+            ],
+            tileSize: 256,
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          }
+        },
+        layers: [
+          {
+            id: 'osm',
+            type: 'raster',
+            source: 'openstreetmap'
+          }
+        ]
+      },
+      center: [-79.3832, 43.6532], // Default center (Toronto)
+      zoom: 0,
+      maxZoom: 18,
+      dragRotate: false, // disable drag rotation
+      keyboard: false, // disable keyboard interactions
+      pitchWithRotate: false // disable pitch with rotate
+    });
+
+    // Function to calculate the bounding box of GeoJSON data
+    function getGeoJSONBounds(geojson) {
+      const bounds = new maplibregl.LngLatBounds();
+
+      function extendBounds(coords) {
+        if (typeof coords[0] === 'number' && typeof coords[1] === 'number') {
+          bounds.extend(coords);
+        } else {
+          coords.forEach(extendBounds);
+        }
+      }
+
+      geojson.features.forEach(feature => {
+        const coords = feature.geometry.coordinates;
+        extendBounds(coords);
+      });
+
+      return bounds;
+    }
+
+    // Function to load GeoJSON from URL parameter
+    function loadGeoJSONFromURL() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const dguid = urlParams.get('dguid');
+      //const geojsonUrl = `https://geographies.sisyphus.ca/dguid/?dguid=${dguid}`;
+      const geojsonUrl = `/dguid/?dguid=${dguid}`;
+      if (dguid) {
+        fetch(geojsonUrl)
+          .then(response => response.json())
+          .then(data => {
+            let geojsonData;
+            geojsonData = {
+              type: 'FeatureCollection',
+              features: [{
+                type: 'Feature',
+                geometry: data,
+                properties: {}
+              }]
+            };
+            map.addSource('geojson-source', {
+              type: 'geojson',
+              data: geojsonData
+            });
+
+            // Determine layer type based on geometry
+            const firstFeature = geojsonData.features[0];
+            let layerType = 'circle';
+            if (firstFeature.geometry.type === 'Polygon' || firstFeature.geometry.type === 'MultiPolygon') {
+              layerType = 'fill';
+            } else if (firstFeature.geometry.type === 'LineString' || firstFeature.geometry.type === 'MultiLineString') {
+              layerType = 'line';
+            }
+
+            const layer = {
+              id: 'geojson-layer',
+              type: layerType,
+              source: 'geojson-source',
+              paint: {}
+            };
+
+            if (layerType === 'circle') {
+              layer.paint = {
+                'circle-radius': 15,
+                'circle-color': '#ff0000'
+              };
+            } else if (layerType === 'fill') {
+              layer.paint = {
+                'fill-color': '#ff0000',
+                'fill-opacity': 0.5
+              };
+            } else if (layerType === 'line') {
+              layer.paint = {
+                'line-color': '#ff0000',
+                'line-width': 2
+              };
+            }
+
+            map.addLayer(layer);
+
+            // Zoom for point geometries
+            if (layerType == 'circle') {
+                const latitude = data['coordinates'][1];
+                const longitude = data['coordinates'][0];
+                map.flyTo({
+                    center: [longitude, latitude],
+                    zoom: 15,
+                    animate: false
+                });
+                return
+            };
+
+            // Zoom for other types of geometries
+            const bounds = getGeoJSONBounds(geojsonData);
+            if (bounds.isEmpty()) {
+              console.warn('No valid coordinates found in GeoJSON.');
+            } else {
+              map.fitBounds(bounds, { 
+                  padding: 20,
+                  animate: false
+              });
+            }
+          })
+          .catch(error => console.error('Error loading GeoJSON:', error));
+      } else {
+        console.warn('No GeoJSON URL parameter provided.');
+      }
+    }
+
+    // Disable only the rotation aspect
+    map.touchZoomRotate.disableRotation();
+
+    // Load GeoJSON when the map is ready
+    map.on('load', loadGeoJSONFromURL);
+    map.on('style.load', () => {
+      map.setProjection({ type: 'globe' });
+    });
+  </script>
+</body>
+</html>