explanation of Maps

Signed-off-by: Tom Ridd <twridd@gmail.com>

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,
@@ -85,6 +87,7 @@
     });
   }
 
+  // when data updates colourise the map
   $: data && updateData();
 
   $: if (click && selected != selectedPrev) {

src/MapSource.svelte

@@ -16,10 +16,12 @@
   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;
@@ -30,6 +32,7 @@
     }
   }
 
+  // watches for isMapLoaded then runs the addSource method
   function isMapLoaded() {
     if (map.isStyleLoaded(id)) {
       addSource();
@@ -54,8 +57,9 @@
     props.promoteId = promoteId;
   }
 
+  // runs the addSource method
   function addSource() {
-    if (type == "geojson") {
+    if (type === "geojson") {
       if (data) {
         map.addSource(id, {
           type: type,
@@ -71,7 +75,7 @@
         });
         isSourceLoaded();
       }
-    } else if (type == "vector") {
+    } else if (type === "vector") {
       map.addSource(id, {
         type: type,
         tiles: [url],
@@ -81,6 +85,7 @@
     }
   }
 
+  // kicks off the chain
   isMapLoaded();
 </script>
 

src/ui/map/map.md

@@ -0,0 +1,64 @@
+# Map
+
+The map has been refactored to make it easier to use. There is no html in the MapComponent.svelte components which makes
+this relaltively easy
+
+The intent has been to refactor maps so that as much config as possible is either inherited using `getContext` or picked
+up from config
+
+This makes it relatively easy to work out what is going on with the Map
+
+## Map 1
+
+This is a map which is pulling from one tile set. 
+`<BoundaryLayer>` renders the borders of its parent TileSet. Setting `<BoundaryLayer paint={example}>` lets us customise the boundaries 
+
+```html
+<Map>
+    <TileSet id="lad" type="vector" url={exampleUrl}>
+        <BoundaryLayer id="lad-boundaries" />
+    </TileSet>
+</Map>
+```
+
+## Map 2
+This map renders two new layers. `<DataLayer />` is what renders the data. `<InteractiveLayer />` gives two callbacks which we can use to update our datastores. 
+
+```html
+<Map>
+    <TileSet id="lad" type="vector" url={exampleUrl}>
+        <DataLayer id="lad-data" data={categoryData} />
+        <BoundaryLayer id="lad-boundaries" />
+        <InteractiveLayer id="lad-interactive-layer"
+            onSelect={(code)=>{updateSelectedGeography(code)}}
+            onHover={(code)=>{updateHoveredGeography(code)}} />
+    </TileSet>
+</Map>
+```
+
+## Map 3
+This is where life gets interesting. By setting `minzoom` and `maxzoom` we control when layers and tile sets are visible
+
+In this example if you are zoomed out the lad level data is rendered.
+When you zoom in above 9 the lad layers are hidden and the more detailed 
+lsoa data becomes active.
+
+```html
+<Map>
+    <TileSet id="lad" type="vector" url={ladUrl} maxzoom={9}>
+        <DataLayer id="lad-data" data={categoryData} />
+        <BoundaryLayer id="lad-boundaries" />
+        <InteractiveLayer id="lad-interactive-layer"
+            onSelect={(code)=>{updateSelectedGeography(code)}}
+            onHover={(code)=>{updateHoveredGeography(code)}} />
+    </TileSet>
+
+    <TileSet id="lsoa" type="vector" url={lsoaUrl} minzoom={9} >
+        <DataLayer id="lsoa-data" data={categoryData} />
+        <BoundaryLayer id="lsoa-boundaries" />
+        <InteractiveLayer id="lsoa-interactive-layer"
+                          onSelect={(code)=>{updateSelectedGeography(code)}}
+            onHover={(code)=>{updateHoveredGeography(code)}} />
+    </TileSet>
+</Map>
+```