Data model

ARCHITECTURE.md

@@ -0,0 +1,22 @@
+# Census-Atlas architecture
+
+A prototype for exploring neighbourhood level Census data tables on a map.
+
+## Svelte architecture
+
+### Presentation layer ******\_\_\_\_******
+
+Files: \*.svelte
+Responsibilities: Displaying the current state of the app according to the designs from UI/UX
+
+### Model layer **********\_\_**********
+
+Files: \*Store.js
+Responsibilities: Storing the current state of the app. Provide action methods to update state.
+
+### Data layer **********\_\_\_\_**********
+
+Files: \*Service.js
+Responsibilities: Fetch data to update the model
+
+`npm run storybook` – fires up [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction)

src/App.svelte

@@ -8,8 +8,18 @@
   import ByCategory from "./routes/ByCategory.svelte";
   import CensusCategories from "./routes/CensusCategories.svelte";
   import { Router, Link, Route } from "svelte-routing";
+  import { initialiseGeography } from "./model/geography/geography";
+  import LegacyGeographyService from "./model/geography/services/legacyGeographyService";
+  import { initialiseCensusData } from "./model/censusdata/censusdata";
+  import LegacyCensusDataService from "./model/censusdata/services/legacyCensusDataService";
+  import { setInitialised } from "./model/appstate";
 
   export let url = "";
+
+  initialiseGeography(new LegacyGeographyService()).then(() => {
+    initialiseCensusData(new LegacyCensusDataService());
+    setInitialised();
+  });
 </script>
 
 <Router {url}>

src/MapComponent.svelte

@@ -45,7 +45,6 @@
 
       map.addControl(new NavigationControl());
 
-      // bounds.subscribe((b) => { if (map) map.fitBounds(b, { padding: 20 }); })// move map on bbox change
       map.fitBounds($bounds, { padding: 20 });
 
       // Get initial zoom level

src/MapLayer.svelte

@@ -41,10 +41,12 @@
   let selectedPrev = null;
   let highlightedPrev = null;
 
+  // remove map if present
   if (map.getLayer(id)) {
     map.removeLayer(id);
   }
 
+  // map options
   let options = {
     id: id,
     type: type,
@@ -70,8 +72,6 @@
   map.addLayer(options, order);
 
   function updateData() {
-    console.log("updating colours...");
-
     data.lsoa.data.forEach((d) => {
       map.setFeatureState(
         {
@@ -86,6 +86,7 @@
     });
   }
 
+  // when data updates colourise the map
   $: data && updateData();
 
   $: if (click && selected != selectedPrev) {

src/MapSource.svelte

@@ -16,28 +16,28 @@
   const { getMap } = getContext("map");
   const map = getMap();
 
+  // clears out self on map object
   if (map.getSource(id)) {
     map.removeSource(id);
   }
 
+  // watches for isSourceLoaded method on map
   function isSourceLoaded() {
     if (map.isSourceLoaded(id)) {
       loaded = true;
-      console.log(id + " loaded!");
     } else {
       setTimeout(() => {
-        console.log("...");
         isSourceLoaded();
       }, 500);
     }
   }
 
+  // watches for isMapLoaded then runs the addSource method
   function isMapLoaded() {
     if (map.isStyleLoaded(id)) {
       addSource();
     } else {
       setTimeout(() => {
-        console.log("...");
         isMapLoaded();
       }, 500);
     }
@@ -57,9 +57,9 @@
     props.promoteId = promoteId;
   }
 
+  // runs the addSource method
   function addSource() {
-    console.log(id + " map source loading...");
-    if (type == "geojson") {
+    if (type === "geojson") {
       if (data) {
         map.addSource(id, {
           type: type,
@@ -75,7 +75,7 @@
         });
         isSourceLoaded();
       }
-    } else if (type == "vector") {
+    } else if (type === "vector") {
       map.addSource(id, {
         type: type,
         tiles: [url],
@@ -85,6 +85,7 @@
     }
   }
 
+  // kicks off the chain
   isMapLoaded();
 </script>