Premier succès dans l'affichage de sprites perso

app/api/icons/route.ts

@@ -0,0 +1,16 @@
+import { categories } from '@/components/categories'
+import colors from '@/app/categoryColors.yaml'
+
+export async function GET(request: Request) {
+	const json = categories.map((c) => ({
+		...c,
+		color: colors[c.category],
+	}))
+	return Response.json(json, {
+		headers: {
+			'Access-Control-Allow-Origin': '*',
+			'Access-Control-Allow-Methods': 'GET, OPTIONS',
+			'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+		},
+	})
+}

app/categories.yaml

@@ -7,7 +7,7 @@
   #emoji: 🥖
   query: '[shop=bakery]'
   icon: bakery
-  category: Manger et boire
+  category: Alimentation
 - name: restaurant
   dictionary:
     - resto
@@ -20,7 +20,7 @@
     - '[amenity=restaurant]'
     - '[vending=pizza]'
   icon: restaurant
-  category: Manger et boire
+  category: Alimentation
 - name: cafe
   title: Café, bar et pub
   dictionary:
@@ -36,7 +36,7 @@
     - '["amenity"="cafe"]'
     - '["amenity"="pub"]'
   icon: cafe
-  category: Manger et boire
+  category: Bars et boisson
 - name: épicerie
   dictionary:
     - supermarché

app/styles/france.ts

@@ -60,7 +60,15 @@ export default function franceStyle(transportMode, noVariableTiles = false) {
 		//		Voir nos villes juste avec les arbres
 		//layers: layers.filter(({ id }) => id === 'Background' || id === 'Trees'),
 		glyphs: getFetchUrlBase() + '/fonts/glyphs/{fontstack}/{range}.pbf',
-		sprite: getFetchUrlBase() + '/sprite/sprite',
+		sprite: [
+			/*
+			{
+				id: 'default',
+				url: getFetchUrlBase() + '/sprite/sprite',
+			},
+			*/
+			{ id: 'default', url: getFetchUrlBase() + '/sprite/cartes' },
+		],
 		bearing: 0,
 		pitch: 0,
 		center: [0, 0],

lib/buildSprites.ts

@@ -3,57 +3,63 @@ import spritezero from '@jutaz/spritezero'
 import fs from 'fs'
 import path from 'path'
 
-const pixelRatios = [1, 2]
+const pixelRatios = [2, 4]
 const sdf = true
 
-pixelRatios.forEach(async function (pxRatio) {
-	var svgs = await Promise.all(
-		['restaurant', 'cafe']
-			//		.sync(path.resolve(path.join(__dirname, 'input/*.svg')))
-			.map(async function (id) {
-				const url = `${getFetchUrlBase()}/svgo/?svgFilename=${id}&background=chartreuse&format=svg`
-				console.log(url)
-				const request = await fetch(url)
-
-				const svg = await request.text()
-				/*
+export default async function buildSprites() {
+	const catRequest = await fetch(getFetchUrlBase() + '/api/icons')
+	const categories = await catRequest.json()
+
+	pixelRatios.forEach(async function (pxRatio) {
+		var svgs = await Promise.all(
+			['restaurant', 'cafe']
+				//		.sync(path.resolve(path.join(__dirname, 'input/*.svg')))
+				.map(async function (id) {
+					const url = `${getFetchUrlBase()}/svgo/?svgFilename=${id}&background=${
+						categories.find((c) => c.name === id).color
+					}&format=svg`
+					console.log(url)
+					const request = await fetch(url)
+
+					const svg = await request.text()
+					/*
 fs.readFileSync(
 						path.resolve(path.join(__dirname, '../public/icons/' + id + '.svg'))
 					)*/
 
-				return {
-					svg,
-					id,
-				}
-			})
-	)
-
-	var pngPath = path.resolve(
-		path.join(__dirname, '../public/sprite/sprite-cartes@' + pxRatio + '.png')
-	)
-	var jsonPath = path.resolve(
-		path.join(__dirname, '../public/sprite/sprite-cartes@' + pxRatio + '.json')
-	)
-
-	// Pass `true` in the layout parameter to generate a data layout
-	// suitable for exporting to a JSON sprite manifest file.
-	spritezero.generateLayout(
-		{ imgs: svgs, pixelRatio: pxRatio, sdf, format: true },
-		function (err, dataLayout) {
-			if (err) return
-			fs.writeFileSync(jsonPath, JSON.stringify(dataLayout))
-		}
-	)
-
-	// Pass `false` in the layout parameter to generate an image layout
-	// suitable for exporting to a PNG sprite image file.
-	spritezero.generateLayout(
-		{ imgs: svgs, pixelRatio: pxRatio, sdf, format: false },
-		function (err, imageLayout) {
-			spritezero.generateImage(imageLayout, function (err, image) {
+					return {
+						svg,
+						id,
+					}
+				})
+		)
+
+		const spritePath = '../public/sprite/cartes' + (pxRatio == 4 ? '@2' : '')
+		var pngPath = path.resolve(path.join(__dirname, spritePath + '.png'))
+		var jsonPath = path.resolve(path.join(__dirname, spritePath + '.json'))
+
+		// Pass `true` in the layout parameter to generate a data layout
+		// suitable for exporting to a JSON sprite manifest file.
+		spritezero.generateLayout(
+			{ imgs: svgs, pixelRatio: pxRatio, sdf, format: true },
+			function (err, dataLayout) {
 				if (err) return
-				fs.writeFileSync(pngPath, image)
-			})
-		}
-	)
-})
+				fs.writeFileSync(jsonPath, JSON.stringify(dataLayout))
+			}
+		)
+
+		// Pass `false` in the layout parameter to generate an image layout
+		// suitable for exporting to a PNG sprite image file.
+		spritezero.generateLayout(
+			{ imgs: svgs, pixelRatio: pxRatio, sdf, format: false },
+			function (err, imageLayout) {
+				spritezero.generateImage(imageLayout, function (err, image) {
+					if (err) return
+					fs.writeFileSync(pngPath, image)
+				})
+			}
+		)
+	})
+}
+
+buildSprites()

public/sprite/cartes@2.json

@@ -0,0 +1 @@
+{"cafe":{"width":60,"height":60,"x":0,"y":0,"pixelRatio":4},"restaurant":{"width":60,"height":60,"x":60,"y":0,"pixelRatio":4}}