From cb147dc5a4502eb73df73e5290339805796134a5 Mon Sep 17 00:00:00 2001
From: Jake Coppinger <jake@jakecoppinger.com>
Date: Tue, 17 Jan 2023 12:49:44 +1100
Subject: [PATCH] Use cyclosm background

---
 src/map.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/map.tsx b/src/map.tsx
index 3051c2c..6eade9e 100644
--- a/src/map.tsx
+++ b/src/map.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from "react";
-import maplibregl from 'maplibre-gl'; 
+import maplibregl from "maplibre-gl";
 import "./App.css";
 import { mapOnLoad } from "./layers";
 
-
 export function Map() {
   const mapContainer = React.useRef<HTMLDivElement>(null);
   const mapRef = React.useRef<maplibregl.Map | null>(null);
@@ -25,7 +24,29 @@ export function Map() {
       container: mapContainer.current,
       center: [lng, lat],
       zoom: zoom,
-      style: "./style.json",
+      style: {
+        version: 8,
+        sources: {
+          "raster-tiles": {
+            type: "raster",
+            tiles: [
+              "https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
+            ],
+            tileSize: 256,
+            attribution:
+              '© <a target="_blank" href="https://www.cyclosm.org">CyclOSM</a>, <a target="_blank" href="https://github.com/a-b-street/osm2streets">osm2streets</a>, <a target="_blank" href="https://openstreetmap.org/">OpenStreetMap contributors</a>',
+          },
+        },
+        layers: [
+          {
+            id: "simple-tiles",
+            type: "raster",
+            source: "raster-tiles",
+            minzoom: 0,
+            maxzoom: 22,
+          },
+        ],
+      },
     });
 
     const map = mapRef.current;