martin/tests/debug.html
Stepan Kuzmin 3c01125fc5
feat: add composite sources support (#184)
* feat: add composite sources support WIP

* feat: handle empty composite sources

* fix: decompose queries

* docs: add docs on composite sources

* ci: push docker image

* test: add composite source tests
2021-04-24 20:19:37 +03:00

68 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Martin Debug Page</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let accessToken = localStorage.getItem('accessToken');
if (!accessToken) {
accessToken = window.prompt('Mapbox accessToken');
localStorage.setItem('accessToken', accessToken);
}
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 0,
center: [0, 0],
});
const sourceId = 'public.points1';
map.on('load', function () {
map.addLayer({
id: sourceId,
type: 'circle',
source: {
type: 'vector',
url: `http://0.0.0.0:3000/${sourceId}.json`,
},
'source-layer': sourceId,
paint: {
'circle-color': 'red',
},
});
map.on('click', sourceId, function (event) {
console.log(event.features);
});
});
</script>
</body>
</html>