roy-bukapeta/ol3

## ol3
<!DOCTYPE html>
<html>
  <head>
    <title>Advanced Mapbox Vector Tiles</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
    <style>
      .map {
        background: #f8f4f0;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <script>

      function createStyle(){
        var fill = new ol.style.Fill({color: ''});
        var stroke = new ol.style.Stroke({color: '', width: 1});
        var polygon = new ol.style.Style({fill: fill});
        var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
        var line = new ol.style.Style({stroke: stroke});
        var text = new ol.style.Style({text: new ol.style.Text({text: '', fill: fill, stroke: stroke})});
        var iconCache = {};

        function getIcon(iconName) {
          var icon = iconCache[iconName];
          if (!icon) {
            icon = new ol.style.Style({image: new ol.style.Icon({
              src: 'https://cdn.rawgit.com/mapbox/maki/master/icons/' + iconName + '-15.svg',
              imgSize: [15, 15]
            })});
            iconCache[iconName] = icon;
          }
          return icon;
        }

        var styles = [];

        return function(feature, resolution) {
          var length = 0;
          var layer = feature.get('layer');
          var cls = feature.get('class');
          var type = feature.get('type');
          var scalerank = feature.get('scalerank');
          var labelrank = feature.get('labelrank');
          var adminLevel = feature.get('admin_level');
          var maritime = feature.get('maritime');
          var disputed = feature.get('disputed');
          var maki = feature.get('maki');
          var geom = feature.getGeometry().getType();

          if (layer == 'layer') {
            text.getText().setText(feature.get('nama_kecam'));
            text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
            fill.setColor('#1fff10');
            stroke.setColor('#e80808');
            stroke.setWidth(3);
            styles[length++] = strokedPolygon;
          }else if(layer == 'layer'){
            text.getText().setText(feature.get('nama_kecam'));
            text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
            styles[length++] = text;
          }

          styles.length = length;
          return styles;
        };
      }

      /* eslint-disable openlayers-internal/no-unused-requires */
      var key = 'pk.eyJ1IjoiLWhhYmliLSIsImEiOiJjaWdjbmpsZzE0MXM3dmptM3NzN292NWVhIn0.AfZ7s3jnuqK-2nPzbfl7IA';

      // For how many zoom levels do we want to use the same vector tiles?
      // 1 means "use tiles from all zoom levels". 2 means "use the same tiles for 2
      // subsequent zoom levels".
      var reuseZoomLevels = 2;

      // Offset of loaded tiles from web mercator zoom level 0.
      // 0 means "At map zoom level 0, use tiles from zoom level 0". 1 means "At map
      // zoom level 0, use tiles from zoom level 1".
      var zoomOffset = 1;

      // Calculation of tile urls
      var resolutions = [];
      for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
        resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
      }
      function tileUrlFunction(tileCoord) {

        return ('http://pbf.webgisberau.net?token=5d0e1242406d61e853a5735ad5fbde33a81cd4ff0453fd20d287b2ada0a699ea772a29b0130b1755738c60a8b4e841fe5610cb760207284b35d3f76298db521b&z={z}&x={x}&y={y}.pbf')
            .replace('{z}', String(tileCoord[0] * reuseZoomLevels + zoomOffset))
            .replace('{x}', String(tileCoord[1]))
            .replace('{y}', String(-tileCoord[2] - 1))
            .replace('{a-d}', 'abcd'.substr(
                ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
      }

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var vector_tile = new ol.layer.VectorTile({
        renderMode: 'vector',
        preload: Infinity,
        source: new ol.source.VectorTile({
          attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
            '© <a href="http://www.openstreetmap.org/copyright">' +
            'OpenStreetMap contributors</a>',
          format: new ol.format.MVT(),
          tileGrid: new ol.tilegrid.TileGrid({
            extent: ol.proj.get('EPSG:3857').getExtent(),
            resolutions: resolutions
          }),
          tilePixelRatio: 16,
          tileUrlFunction: tileUrlFunction
        }),
        style: createStyle()
      });

      var map = new ol.Map({
        layers: [raster,vector_tile],
        target: 'map',
        view: new ol.View({
          center: [117, -2],
          minZoom: 4,
          zoom: 4
        })
      });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Advanced Mapbox Vector Tiles</title>
	<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
	<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
	<script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
	<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
	<style>
	.map {
	background: #f8f4f0;
	}
	</style>
	</head>
	<body>
	<div id="map" class="map"></div>
	<div id="popup" class="ol-popup">
	<a href="#" id="popup-closer" class="ol-popup-closer"></a>
	<div id="popup-content"></div>
	</div>
	<script>

	function createStyle(){
	var fill = new ol.style.Fill({color: ''});
	var stroke = new ol.style.Stroke({color: '', width: 1});
	var polygon = new ol.style.Style({fill: fill});
	var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
	var line = new ol.style.Style({stroke: stroke});
	var text = new ol.style.Style({text: new ol.style.Text({text: '', fill: fill, stroke: stroke})});
	var iconCache = {};

	function getIcon(iconName) {
	var icon = iconCache[iconName];
	if (!icon) {
	icon = new ol.style.Style({image: new ol.style.Icon({
	src: 'https://cdn.rawgit.com/mapbox/maki/master/icons/' + iconName + '-15.svg',
	imgSize: [15, 15]
	})});
	iconCache[iconName] = icon;
	}
	return icon;
	}

	var styles = [];

	return function(feature, resolution) {
	var length = 0;
	var layer = feature.get('layer');
	var cls = feature.get('class');
	var type = feature.get('type');
	var scalerank = feature.get('scalerank');
	var labelrank = feature.get('labelrank');
	var adminLevel = feature.get('admin_level');
	var maritime = feature.get('maritime');
	var disputed = feature.get('disputed');
	var maki = feature.get('maki');
	var geom = feature.getGeometry().getType();

	if (layer == 'layer') {
	text.getText().setText(feature.get('nama_kecam'));
	text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
	fill.setColor('#1fff10');
	stroke.setColor('#e80808');
	stroke.setWidth(3);
	styles[length++] = strokedPolygon;
	}else if(layer == 'layer'){
	text.getText().setText(feature.get('nama_kecam'));
	text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
	styles[length++] = text;
	}

	styles.length = length;
	return styles;
	};
	}

	/* eslint-disable openlayers-internal/no-unused-requires */
	var key = 'pk.eyJ1IjoiLWhhYmliLSIsImEiOiJjaWdjbmpsZzE0MXM3dmptM3NzN292NWVhIn0.AfZ7s3jnuqK-2nPzbfl7IA';

	// For how many zoom levels do we want to use the same vector tiles?
	// 1 means "use tiles from all zoom levels". 2 means "use the same tiles for 2
	// subsequent zoom levels".
	var reuseZoomLevels = 2;

	// Offset of loaded tiles from web mercator zoom level 0.
	// 0 means "At map zoom level 0, use tiles from zoom level 0". 1 means "At map
	// zoom level 0, use tiles from zoom level 1".
	var zoomOffset = 1;

	// Calculation of tile urls
	var resolutions = [];
	for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
	resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
	}
	function tileUrlFunction(tileCoord) {

	return ('http://pbf.webgisberau.net?token=5d0e1242406d61e853a5735ad5fbde33a81cd4ff0453fd20d287b2ada0a699ea772a29b0130b1755738c60a8b4e841fe5610cb760207284b35d3f76298db521b&z={z}&x={x}&y={y}.pbf')
	.replace('{z}', String(tileCoord[0] * reuseZoomLevels + zoomOffset))
	.replace('{x}', String(tileCoord[1]))
	.replace('{y}', String(-tileCoord[2] - 1))
	.replace('{a-d}', 'abcd'.substr(
	((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
	}

	var raster = new ol.layer.Tile({
	source: new ol.source.OSM()
	});

	var vector_tile = new ol.layer.VectorTile({
	renderMode: 'vector',
	preload: Infinity,
	source: new ol.source.VectorTile({
	attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
	'© <a href="http://www.openstreetmap.org/copyright">' +
	'OpenStreetMap contributors</a>',
	format: new ol.format.MVT(),
	tileGrid: new ol.tilegrid.TileGrid({
	extent: ol.proj.get('EPSG:3857').getExtent(),
	resolutions: resolutions
	}),
	tilePixelRatio: 16,
	tileUrlFunction: tileUrlFunction
	}),
	style: createStyle()
	});

	var map = new ol.Map({
	layers: [raster,vector_tile],
	target: 'map',
	view: new ol.View({
	center: [117, -2],
	minZoom: 4,
	zoom: 4
	})
	});

	</script>
	</body>
	</html>