feat: new frontend-dev

frontends/frontend-dev/assets/map_maker/map_maker.js → frontends/frontend-dev/assets/lib/map_maker/map_maker.js

@@ -2,8 +2,8 @@ import MaplibreControl from './lib/maplibre_control.js';
 import StyleMaker from './lib/style_maker.js';
 import { loadJSON } from './lib/utils.js';
 
-export default async function MapMaker(maplibregl, nodeId, meta_url) {
-	const info = await loadJSON(meta_url);
+export default async function MapMaker(maplibregl, nodeId, url) {
+	const meta = await loadJSON(url + '/tiles.json');
 	const tiles_url = window.location.origin + info.url;
 	const container = info.container;
 
@@ -67,7 +67,7 @@ function addZoomLevelWarning(map, zoom_min, zoom_max) {
 
 	function update() {
 		let zoom = map.getZoom();
-		let shouldBeVisible = (zoom < zoom_min) || (zoom > zoom_max+0.5);
+		let shouldBeVisible = (zoom < zoom_min) || (zoom > zoom_max + 0.5);
 
 		if (shouldBeVisible) {
 			let text = 'the data source is only defined for zoom level';

frontends/frontend-dev/assets/main.js

@@ -1,5 +1,5 @@
 
-import MapMaker from './map_maker/map_maker.js';
+import MapMaker from './lib/map_maker/map_maker.js';
 
 init();
 
@@ -12,5 +12,5 @@ async function start() {
 	const id = (new URLSearchParams(window.location.search)).get('id');
 	if (!id) throw Error('id is not defined');
 
-	await MapMaker(maplibregl, 'map', '/api/source/' + id);
+	await MapMaker(maplibregl, 'map', `/tiles/${id}/`);
 }

frontends/frontend-dev/index.html

@@ -11,95 +11,126 @@
 		body {
 			font-family: sans-serif;
 			margin: 20px 20px;
+			background-color: #0a0a0a;
+			color: #888;
 		}
 
 		article {
-			width: 400px;
+			width: 600px;
 			max-width: 100%;
 			margin: auto;
 			box-sizing: border-box;
+			color: #ccc;
+		}
+
+		h1,
+		h2,
+		p {
+			text-align: center;
+			margin: 0 0 1em;
+		}
+
+		h1 {
+			font-weight: 400;
+			font-size: 4em;
+			color: #fff;
+		}
+
+		h2 {
+			font-weight: 400;
+			font-size: 1.5em;
 		}
 
 		div.box {
-			border: 1px solid #0004;
-			box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
-			border-radius: 10px;
-			padding: 20px;
-			margin-bottom: 20px;
-			background: #fff;
+			border: 1px solid #fff4;
+			border-radius: 3px;
+			padding: 1.5em;
+			margin: 2em 0;
+			background: #222;
 			box-sizing: border-box;
 		}
 
+		div.box:hover {
+			border: 1px solid #fff;
+		}
+
 		a {
 			text-decoration: none !important;
 			color: inherit !important;
 		}
 
-		h2 {
-			text-align: center;
-			margin: 0 0 10px;
-		}
-
 		div.row {
 			display: flex;
 			flex-wrap: nowrap;
-			gap: 5px;
+			gap: 10px;
 			opacity: 0.5;
 		}
 
 		div.row>div:first-child {
-			flex-basis: 30%;
+			flex-basis: 20%;
 			text-align: right;
 			font-weight: bold;
 		}
 
 		div.row>div:last-child {
-			flex-basis: 70%;
+			flex-basis: 80%;
 			text-align: left;
 		}
 
-		div.box:hover {
-			border: 1px solid #000F;
-			box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
-		}
-
 		div.box:hover div.row {
 			opacity: 1;
 		}
 	</style>
 	<script>
-		start()
+		console.log('1');
+		addEventListener('load', start)
 
 		async function start() {
-			let tile_sources = await (await fetch("/api/sources")).json();
-
-			console.log(tile_sources);
-
-			let html = [];
-			for (let source of tile_sources) {
-				let url = 'preview.html?id=' + source.id;
-				let {container} = source;
-				html.push(...[
-					`<a href="${url}">`,
-					`<div class="box">`,
-					`<h2>${source.id}</h2>`,
-					`<div class="row"><div>url:</div><div>${source.url}</div></div>`,
-					`<div class="row"><div>container:</div><div>${container.type}</div></div>`,
-					`<div class="row"><div>format:</div><div>${container.format}</div></div>`,
-					`<div class="row"><div>zoom:</div><div>${container.zoom_min}-${container.zoom_max}</div></div>`,
-					`</div>`,
-					`</a>`
-				]);
-				//html.push(`<iframe src="${url}"></iframe>`);
+			console.log('2');
+			let tileSources = (await getJSON('/tiles/index.json')).map(id => ({ id }))
+
+			draw();
+
+			Promise.all(tileSources.map(async s => {
+				const m = (await getJSON(`/tiles/${s.id}/tiles.json`));
+				s.name = m.name;
+				s.description = m.description;
+				s.type = m.type;
+				s.format = m.format;
+				s.minzoom = m.minzoom;
+				s.maxzoom = m.maxzoom;
+				draw();
+			}));
+
+			function draw() {
+				let html = [];
+				for (let s of tileSources) {
+					html.push(...[
+						`<a href="preview.html?id=${s.id}">`,
+						`<div class="box">`,
+						`<h2>${s.name ?? '?'}</h2>`,
+						`<div class="row"><div>url:</div><div>/tiles/${s.id ?? '?'}</div></div>`,
+						`<div class="row"><div>description:</div><div>${s.description ?? '?'}</div></div>`,
+						`<div class="row"><div>format:</div><div>${s.type ?? '?'} (${s.format ?? '?'})</div></div>`,
+						`<div class="row"><div>zoom:</div><div>${s.minzoom ?? '?'}-${s.maxzoom ?? '?'}</div></div>`,
+						`</div>`,
+						`</a>`
+					]);
+				}
+				document.getElementById("list").innerHTML = html.join('\n');
 			}
-			document.getElementById("maps").innerHTML = html.join('\n');
+		}
+
+		async function getJSON(url) {
+			return await (await fetch(url)).json()
 		}
 	</script>
 </head>
 
 <body>
-	<article id="maps">
-		<!--<iframe src="map.html"></iframe>-->
+	<h1>VersaTiles</h1>
+	<p>available tile sources:</p>
+	<article id="list">
 	</article>
 </body>