Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Klokantech Basic GL Style using ol-mapbox-style preview</title>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
  <link rel="stylesheet" href="css/ol.css">
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    #map {
      width: 100%;
      height: 100%;
      background-color: #f8f4f0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
  <script src="build/ol.js"></script>
  <script src="build/olms.js"></script>

  <script>
  var tilegrid = ol.tilegrid.createXYZ({
     maxZoom: 17, // pregenerate images up to z17, then switch to vector mode
    loadZooms: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
	tileSize: 512
  });

var layer1 = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    tileGrid: tilegrid,
    tilePixelRatio: 8,
    url: 'http://localhost:8080/data/v3/{z}/{x}/{y}.pbf'
  }),

});

var osm =  new ol.layer.Tile({
            source: new ol.source.OSM()
          })
var view = new ol.View({
  center: [20, 50],
  resolution: 5000,
  maxResolution: 9000
});

var map = new ol.Map({
  target: 'map',
  view: view
});
fetch('http://localhost:8080/styles/osm-bright.json').then(function(response) {
  response.json().then(function(glStyle) {
    olms.applyStyle(layer1, glStyle, 'openmaptiles').then(function() {
      map.addLayer(layer1);
    });
  });
});

  </script>
</body>