SHARE
TWEET

Untitled

a guest Feb 17th, 2017 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Klokantech Basic GL Style using ol-mapbox-style preview</title>
  5.   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
  6.   <link rel="stylesheet" href="css/ol.css">
  7.   <style>
  8.     html, body {
  9.       height: 100%;
  10.       margin: 0;
  11.     }
  12.     #map {
  13.       width: 100%;
  14.       height: 100%;
  15.       background-color: #f8f4f0;
  16.     }
  17.   </style>
  18. </head>
  19. <body>
  20.   <div id="map"></div>
  21.   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
  22.   <script src="build/ol.js"></script>
  23.   <script src="build/olms.js"></script>
  24.  
  25.   <script>
  26.   var tilegrid = ol.tilegrid.createXYZ({
  27.      maxZoom: 17, // pregenerate images up to z17, then switch to vector mode
  28.     loadZooms: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  29.     tileSize: 512
  30.   });
  31.  
  32. var layer1 = new ol.layer.VectorTile({
  33.   source: new ol.source.VectorTile({
  34.     format: new ol.format.MVT(),
  35.     tileGrid: tilegrid,
  36.     tilePixelRatio: 8,
  37.     url: 'http://localhost:8080/data/v3/{z}/{x}/{y}.pbf'
  38.   }),
  39.  
  40. });
  41.  
  42. var osm =  new ol.layer.Tile({
  43.             source: new ol.source.OSM()
  44.           })
  45. var view = new ol.View({
  46.   center: [20, 50],
  47.   resolution: 5000,
  48.   maxResolution: 9000
  49. });
  50.  
  51. var map = new ol.Map({
  52.   target: 'map',
  53.   view: view
  54. });
  55. fetch('http://localhost:8080/styles/osm-bright.json').then(function(response) {
  56.   response.json().then(function(glStyle) {
  57.     olms.applyStyle(layer1, glStyle, 'openmaptiles').then(function() {
  58.       map.addLayer(layer1);
  59.     });
  60.   });
  61. });
  62.  
  63.   </script>
  64. </body>
RAW Paste Data
Top