Skip to content

Commit

Permalink
Merge pull request #69 from Kanahiro/fix/rmhash
Browse files Browse the repository at this point in the history 
feat: add debug page for POST
  • Loading branch information
@Kanahiro
Kanahiro authored May 24, 2024
2 parents 7639e25 + 03e770d commit 803aa98
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 73 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,10 @@ graph LR
subgraph chiitiler
cache
render
server
end
sources --> cache --> render --/tiles/z/x/y--> png/webp/jpg
sources --> cache --> render --> server --/tiles/z/x/y--> png/webp/jpg
cache <--get/set--> memory/file/S3
```
Expand Down
70 changes: 0 additions & 70 deletions src/debug.ts
View file

This file was deleted.

201 changes: 201 additions & 0 deletions src/server/debug.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
import { Context } from 'hono';

function getDebugPage(c: Context) {
//demo tile
const url =
c.req.query('url') ?? 'https://demotiles.maplibre.org/style.json';
const margin = Number(c.req.query('margin') ?? 0);
const quality = Number(c.req.query('quality') ?? 100);

// show tile in MapLibre GL JS
return c.html(`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MapLibre GL JS</title>
<!-- maplibre gl js-->
<script src="https://unpkg.com/maplibre-gl@^4.0/dist/maplibre-gl.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/maplibre-gl@^4.0/dist/maplibre-gl.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map" style="height: 100vh"></div>
<script>
// hostname
const tileUrl = window.location.origin + '/tiles/{z}/{x}/{y}.webp?url=${url}&quality=${quality}&margin=${margin}';
const map = new maplibregl.Map({
hash: true,
container: 'map', // container id
style: {
version: 8,
sources: {
chiitiler: {
type: 'raster',
tiles: [tileUrl],
}
},
layers: [
{
id: 'chiitiler',
type: 'raster',
source: 'chiitiler',
minzoom: 0,
maxzoom: 22,
}
],
},
center: [0, 0], // starting position [lng, lat]
zoom: 1, // starting zoom
});
</script>
</body>
</html>`);
}

function postDebugPage(c: Context) {
return c.html(`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MapLibre GL JS</title>
<!-- maplibre gl js-->
<script src="https://unpkg.com/maplibre-gl@^4.0/dist/maplibre-gl.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/maplibre-gl@^4.0/dist/maplibre-gl.css"
/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.0.3/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.0.3/jsoneditor.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="height: 50vh"></div>
<div id="jsoneditor" style="height: 50vh"></div>
<script>
const container = document.getElementById("jsoneditor")
const editor = new JSONEditor(container, {
mode: 'code',
onChange: function() {
reloadStyle()
}
})
editor.set({
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
},
point: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [140, 40],
},
},
],
},
},
},
layers: [
{
id: 'osm',
type: 'raster',
source: 'osm',
minzoom: 0,
maxzoom: 22,
},
{
id: 'geojson',
type: 'circle',
source: 'point',
paint: {
'circle-radius': 10,
'circle-color': '#f00',
},
},
],
});
maplibregl.addProtocol('post', async (params, abortController) => {
const imageUrl = params.url.replace('post://', '');
const style = editor.get()
const png = await fetch(imageUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ style }),
}).then((res) => res.arrayBuffer());
return { data: png };
});
const style = {
version: 8,
sources: {
chiitiler: {
type: 'raster',
tiles: ['post://' + window.location.origin + '/tiles/{z}/{x}/{y}.png'],
}
},
layers: [
{
id: 'chiitiler',
type: 'raster',
source: 'chiitiler',
minzoom: 0,
maxzoom: 22,
}
],
};
const map = new maplibregl.Map({
hash: true,
container: 'map', // container id
style,
center: [0, 0], // starting position [lng, lat]
zoom: 1, // starting zoom
});
// reload button
function reloadStyle() {
map.setStyle({
version: 8,
sources: {},
layers: [],
});
map.setStyle(style);
}
</script>
</body>
</html>`);
}

export { getDebugPage, postDebugPage };
7 changes: 5 additions & 2 deletions src/server/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from '@maplibre/maplibre-gl-style-spec';

import { type Cache } from '../cache/index.js';
import { getDebugPage } from '../debug.js';
import { getDebugPage, postDebugPage } from './debug.js';
import { tileResponse } from './response.js';

function isValidStylejson(stylejson: any): stylejson is StyleSpecification {
Expand All @@ -21,7 +21,10 @@ type InitServerOptions = {

function initServer(options: InitServerOptions) {
const hono = new Hono();
if (options.debug) hono.get('/debug', getDebugPage);
if (options.debug) {
hono.get('/debug', getDebugPage);
hono.get('/debugpost', postDebugPage);
}
hono.get('/health', (c) => c.text('OK'));

hono.get('/tiles/:z/:x/:y_ext', async (c) => {
Expand Down

0 comments on commit 803aa98

Please sign in to comment.