Implement loading style from URL

Author: sprusr

index.html

@@ -53,6 +53,7 @@
 
       const map = mewmap({
         svg: document.getElementById("mewmap"),
+        style: "https://tiles.versatiles.org/assets/styles/colorful/style.json",
         longitude: 24.9384,
         latitude: 60.1699,
         zoom: 14,

src/index.ts

@@ -1,7 +1,10 @@
 import { camera } from "./camera.js";
 import { renderer } from "./renderer.js";
-import { source } from "./source.js";
+import { dummy as dummySource } from "./source/dummy.js";
+import { vector } from "./source/vector.js";
+import { dummy as dummyStyle } from "./style/dummy.js";
 import { style } from "./style/index.js";
+import { style as styleSchema } from "./style/schema.js";
 import type { MewMap, MewMapOptions } from "./types.js";
 import { ui } from "./ui.js";
 
@@ -10,7 +13,7 @@ export const mewmap = (options: MewMapOptions): MewMap => {
     throw new Error("svg option must be an svg element");
   }
 
-  const map: MewMap = {
+  const map = {
     camera: camera({
       ...options,
       screen: {
@@ -21,15 +24,33 @@ export const mewmap = (options: MewMapOptions): MewMap => {
     move(params) {
       this.camera.move(params);
     },
-    source: source(),
-    style: style(),
+    source: dummySource(),
+    style: dummyStyle(),
     svg: options.svg as SVGSVGElement,
     renderer: renderer(),
     ui: ui(),
+    loaded: Promise.resolve(false),
+  } satisfies MewMap;
+
+  const init = async (): Promise<boolean> => {
+    if (typeof options.style === "string") {
+      const response = await fetch(options.style);
+      const json = await response.json();
+      const parsed = styleSchema.parse(json);
+
+      map.style = style(parsed);
+      map.source = vector({ name: "versatiles-shortbread" });
+
+      map.renderer.init(map);
+      map.ui.init(map);
+
+      return true;
+    }
+
+    return false;
   };
 
-  map.renderer.init(map);
-  map.ui.init(map);
+  map.loaded = init();
 
   return map;
 };

src/renderer.ts

@@ -14,7 +14,10 @@ type RenderedTile = {
 };
 
 export const renderer = (): Renderer => {
-  const tileCache = new Map<`${number}-${number}-${number}`, RenderedTile>();
+  const tileCache = new Map<
+    `${number}-${number}-${number}`,
+    RenderedTile | null
+  >();
   const visibleTiles = new Set<RenderedTile>();
 
   let wantedTiles: TileCoordinates[] = [];
@@ -132,6 +135,10 @@ export const renderer = (): Renderer => {
             style,
           });
 
+          if (!tile) {
+            continue;
+          }
+
           const transform = calculateTransformForTile({
             camera,
             tile: { x, y, z },
@@ -263,13 +270,20 @@ const renderTileCached = async ({
   tile: { x: number; y: number; z: number };
   source: Source;
   style: Style;
-  cache: Map<string, RenderedTile>;
-}): Promise<RenderedTile> => {
+  cache: Map<string, RenderedTile | null>;
+}): Promise<RenderedTile | null> => {
   const cached = cache.get(`${x}-${y}-${z}`);
-  if (cached) {
+  if (cached !== undefined) {
     return cached;
   }
-  const tile = await source.fetch(x, y, z);
+  const tile = await source.fetch({
+    name: "versatiles-shortbread",
+    tile: { x, y, z },
+  });
+  if (!tile || tile.type === "raster") {
+    cache.set(`${x}-${y}-${z}`, null);
+    return null;
+  }
   const preparedTile = style.prepare({ ...tile, x, y, z });
   const renderedTile = {
     coordinates: { x, y, z },

src/source/composite.ts

@@ -0,0 +1,16 @@
+import type { Source } from "../types.js";
+
+export const composite = (...sources: Source[]): Source => {
+  return {
+    get name() {
+      return null;
+    },
+    async fetch({ name, tile: { x, y, z } }) {
+      return (
+        sources
+          .find((source) => source.name === name)
+          ?.fetch({ name, tile: { x, y, z } }) ?? null
+      );
+    },
+  };
+};

src/source/dummy.ts

@@ -0,0 +1,12 @@
+import type { Source } from "../types.js";
+
+export const dummy = (): Source => {
+  return {
+    get name() {
+      return null;
+    },
+    async fetch() {
+      return null;
+    },
+  };
+};

src/source.ts src/source/vector.tssrc/source.ts renamed to src/source/vector.ts

@@ -1,15 +1,10 @@
 import { fromBinary } from "@bufbuild/protobuf";
-import { type Tile, TileSchema } from "./gen/vector_tile_pb.js";
-import type { Source } from "./types.js";
+import { type Tile, TileSchema } from "../gen/vector_tile_pb.js";
+import type { Source } from "../types.js";
 
 const TILES_URL = "https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}";
 
-export const fetchTile = async (
-  tilesUrl: string,
-  x: number,
-  y: number,
-  z: number,
-) => {
+const fetchTile = async (tilesUrl: string, x: number, y: number, z: number) => {
   const url = tilesUrl
     .replace("{x}", x.toString())
     .replace("{y}", y.toString())
@@ -19,21 +14,26 @@ export const fetchTile = async (
   return bytes;
 };
 
-export const parseTile = (bytes: Uint8Array) => {
+const parseTile = (bytes: Uint8Array) => {
   const tile = fromBinary(TileSchema, bytes);
   return tile;
 };
 
-export const source = (): Source => {
-  const tileCache = new Map<string, Tile>();
+export const vector = ({ name: sourceName }: { name: string }): Source => {
+  const tileCache = new Map<string, { type: "vector" } & Tile>();
 
   return {
-    async fetch(x, y, z) {
+    get name() {
+      return sourceName;
+    },
+    async fetch({ name, tile: { x, y, z } }) {
+      if (name !== sourceName) return null;
+
       const cached = tileCache.get(`${x}-${y}-${z}`);
       if (cached) return cached;
 
       const bytes = await fetchTile(TILES_URL, x, y, z);
-      const tile = parseTile(bytes);
+      const tile = { type: "vector" as const, ...parseTile(bytes) };
 
       tileCache.set(`${x}-${y}-${z}`, tile);