communitiesuk
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 0 deletions b/‎.gitignore‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎README.md‎
Lines changed: 30 additions & 6 deletions b/‎README.md‎
Lines changed: 30 additions & 6 deletions
diff --git a/‎docs/TilesMaking.md‎
Lines changed: 41 additions & 0 deletions b/‎docs/TilesMaking.md‎
Lines changed: 41 additions & 0 deletions
diff --git a/‎docs/TilesServer.md‎
Lines changed: 46 additions & 0 deletions b/‎docs/TilesServer.md‎
Lines changed: 46 additions & 0 deletions
@@ -6,6 +6,7 @@ node_modules
 /.svelte-kit
 /build
 /dist
+/docs
 
 # OS
 .DS_Store
 
@@ -34,18 +34,42 @@ npm install @communitiesuk/svelte-component-library@latest
 To ensure GOV.UK styles are applied correctly, add this script tag to your `app.html` file in the body section:
 
 ```html
-
 <script>
-    document.body.className +=
-        " js-enabled" +
-        ("noModule" in HTMLScriptElement.prototype
-        ? " govuk-frontend-supported"
-        : "");
+  document.body.className +=
+    " js-enabled" +
+    ("noModule" in HTMLScriptElement.prototype
+      ? " govuk-frontend-supported"
+      : "");
 </script>
 ```
 
 This is required because the GOV.UK Frontend CSS checks the document body for JavaScript availability to progressively enhance components.
 
+### GOV.UK Rebranded Styles (Optional)
+
+To use the refreshed GOV.UK brand (launched June 2025), add the `govuk-template--rebranded` class to your `app.html` body element:
+
+```html
+<body class="govuk-template--rebranded">
+  <!-- Your app content -->
+</body>
+```
+
+**When to use rebrand:**
+
+- **Global CSS styles**: The `govuk-template--rebranded` class on `<body>` automatically applies rebranded styles to all components
+- **Component markup**: Some components (like Footer and Header) have a `rebrand` prop that controls whether they show additional rebranded markup elements (like the crown logo). The rebrand prop is set to true by default on all relavent componets - you can specify false should you want to keep the old markup and assets.
+- **Assets**: Rebranded components will use updated assets (logos, icons) from the `/assets/rebrand/` folder
+
+**Example with rebranded Footer:**
+
+```javascript
+import { Footer } from "@communitiesuk/svelte-component-library";
+
+// Use rebrand=true to show the crown logo at top of footer
+<Footer rebrand={true} />;
+```
+
 ### Importing Components
 
 Import components directly from the package:
 
@@ -0,0 +1,41 @@
+# Introduction
+
+This will guide on how to turn geojson to pdf tiles which can be used with the map conpomenet. These instrutions are for Mac OS
+
+# Steps
+
+1. Get valid geojson. It should looks something like this
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": { "name": "Sample Point" },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-0.1257, 51.5085]
+      }
+    }
+  ]
+}
+```
+
+At this stage geographic dataa can be added so it can be visulised without need futher external jsons. Hoever if you
+
+2. Convert Geojson to .mbTiles
+
+Install home brew
+
+Install tippe cannoe
+
+run tippe cannoe
+
+3. Convert .mbTiles to .pbf
+
+install mbtiles
+
+```python
+pip install mbtiles
+```
@@ -0,0 +1,46 @@
+# Tile server
+
+Set up tile-server to serve the tiles locally
+
+Make a server.cjs file that looks like this:
+
+```javascript
+const express = require("express");
+const path = require("path");
+const fs = require("fs");
+const mime = require("mime-types");
+const cors = require("cors");
+
+const app = express();
+const PORT = 8080;
+const TILE_DIR = path.join(__dirname, "tiles-with-imd-data"); // your z/x/y.pbf folder
+
+app.use(cors()); // Enables CORS for all routes
+
+// Set correct headers for .pbf files
+app.get("/:z/:x/:y.pbf", (req, res) => {
+  const { z, x, y } = req.params;
+  const tilePath = path.join(TILE_DIR, z, x, `${y}.pbf`);
+
+  if (!fs.existsSync(tilePath)) {
+    return res.status(404).send("Tile not found");
+  }
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Content-Type", "application/x-protobuf");
+  res.setHeader("Content-Encoding", "gzip");
+
+  fs.createReadStream(tilePath).pipe(res);
+});
+
+// Optional: serve an index or static frontend here
+
+app.listen(PORT, () => {
+  console.log(`Tile server running at http://localhost:${PORT}/`);
+});
+```
+
+Then from the terminal run:
+
+```console
+node server.cjs
+```