console
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>
Display a map
</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'
/>
<script src='https://fangzhenjianzai.com/mapbox/mapbox-gl.js'>
</script>
<link href='https://fangzhenjianzai.com/mapbox/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>
var map = new mapboxgl.Map({
container: 'map',
style: {
"draft": false,
"glyphs": "http://47.93.32.53:8089/{fontstack}/{range}.pbf",
"id": "dyth_streets",
"layers": [{
"id": "land",
"layout": {},
"paint": {
"background-color": ["interpolate", ["linear"], ["zoom"], 11, "hsl(35, 32%, 91%)", 13, "hsl(35, 12%, 89%)"]
},
"type": "background"
},
{
"id": "water",
"layout": {},
"paint": {
"fill-color": "hsl(196, 80%, 70%)"
},
"source": "composite",
"source-layer": "water",
"type": "fill"
}],
"name": "Streets",
"owner": "DYTH",
"sources": {
"composite": {
"tiles": ["http://47.93.32.53:7776/tiles/{z}/{x}/{y}.pbf", "http://47.93.32.53:7777/tiles/{z}/{x}/{y}.pbf", "http://47.93.32.53:7778/tiles/{z}/{x}/{y}.pbf", "http://47.93.32.53:7779/tiles/{z}/{x}/{y}.pbf"],
"type": "vector"
}
},
"sprite": "http://fangzhenjianzai.com:8089/Streets/sprite",
"version": 8
},
zoom: 2,
center: [116.395943, 39.899592]
});
</script>
</body>
</html>