Mapbox style

Test Mapbox style.

This page's Mapbox style test.

Tags: mapbox

Copy

var key =
  'Your Mapbox access token from http://mapbox.com/ here';
mapboxgl.accessToken = key;

var search = getURLParameters(location.search);
var style = search.style
  ? decodeURIComponent(search.style)
  : 'mapbox://styles/mapbox/streets-v9';
var isMabox = style.includes('mapbox');

var encodeQueryData = function (data) {
  var ret = [];
  for (var d in data)
    { ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d])); }
  return ret.join('&');
};

var controller;
var data = {
  style: style,
  extrusion: false
};
var gui = new dat.GUI();
var f1 = gui.addFolder('Style');
var f2 = gui.addFolder('Layer');

gui.remember(data);

controller = f1.add(data, 'style');
controller.onFinishChange(function(style) {
  if (!style) {
    style = 'mapbox://styles/mapbox/streets-v9';
  }

var params = encodeQueryData(
    Object.assign({}, search, { style: style })
  );
  var url = location.pathname + '?' + params;

history.pushState('', '', url);
  map.setStyle(style);
});

controller = f2.add(data, 'extrusion');
controller.onFinishChange(function(show) {
  var layers = map.getStyle().layers;

if (isMabox) {
    showBuildingWithMapbox(layers, show);
  } else {
    showBuilding(layers, show);
  }
});

f1.open();
f2.open();

var map = new mapboxgl.Map({
  container: 'map',
  style: style,
  center: [127.0339581, 37.4845477],
  zoom: 15,
  localIdeographFontFamily: false
});

map.on('load', function() {
  // Insert the layer beneath any symbol layer.
  
});

function showBuildingWithMapbox(layers, show) {
  var labelLayerId;
  for (var i = 0; i < layers.length; i++) {
    if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
      labelLayerId = layers[i].id;
      break;
    }
  }

if (show) {
    map.addLayer(
      {
        id: '3d-buildings',
        source: 'composite',
        'source-layer': 'building',
        filter: ['==', 'extrude', 'true'],
        type: 'fill-extrusion',
        minzoom: 15,
        paint: {
          'fill-extrusion-color': '#aaa',
  
          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          'fill-extrusion-height': [
            'interpolate',
            ['linear'],
            ['zoom'],
            15,
            0,
            15.05,
            ['get', 'height']
          ],
          'fill-extrusion-base': [
            'interpolate',
            ['linear'],
            ['zoom'],
            15,
            0,
            15.05,
            ['get', 'min_height']
          ],
          'fill-extrusion-opacity': 0.6
        }
      },
      labelLayerId
    );
  } else {
    map.removeLayer('3d-buildings');
  }
}

window.DEBUG = {
  map: map
};

<!DOCTYPE html>
<html>
  <head>
    <title>Mapbox style</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css">
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js"></script>
    <style>
      /**
        * Create a position for the map
        * on the page */
      #map {
        width: 100%;
        height: 100%;
      }

      .dg.ac {
        top: 10px;
        right: 40px;
      }    </style>
  </head>
  <body>
    <div id="container" class="main">
      <div id="map"></div>
    </div>
    <script>
      var key =
        'Your Mapbox access token from http://mapbox.com/ here';
      mapboxgl.accessToken = key;

      var getURLParameters = function (url) { return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
          function (a, v) { return (
            (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
          ); },
          {}
        ); };

      var search = getURLParameters(location.search);
      var style = search.style
        ? decodeURIComponent(search.style)
        : 'mapbox://styles/mapbox/streets-v9';
      var isMabox = style.includes('mapbox');

      var encodeQueryData = function (data) {
        var ret = [];
        for (var d in data)
          { ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d])); }
        return ret.join('&');
      };

      var controller;
      var data = {
        style: style,
        extrusion: false
      };
      var gui = new dat.GUI();
      var f1 = gui.addFolder('Style');
      var f2 = gui.addFolder('Layer');

      gui.remember(data);

      controller = f1.add(data, 'style');
      controller.onFinishChange(function(style) {
        if (!style) {
          style = 'mapbox://styles/mapbox/streets-v9';
        }

        var params = encodeQueryData(
          Object.assign({}, search, { style: style })
        );
        var url = location.pathname + '?' + params;

        history.pushState('', '', url);
        map.setStyle(style);
      });

      controller = f2.add(data, 'extrusion');
      controller.onFinishChange(function(show) {
        var layers = map.getStyle().layers;

        if (isMabox) {
          showBuildingWithMapbox(layers, show);
        } else {
          showBuilding(layers, show);
        }
      });

      f1.open();
      f2.open();

      var map = new mapboxgl.Map({
        container: 'map',
        style: style,
        center: [127.0339581, 37.4845477],
        zoom: 15,
        localIdeographFontFamily: false
      });

      map.on('load', function() {
        // Insert the layer beneath any symbol layer.
        
      });

      function showBuildingWithMapbox(layers, show) {
        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
          if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
            labelLayerId = layers[i].id;
            break;
          }
        }

        if (show) {
          map.addLayer(
            {
              id: '3d-buildings',
              source: 'composite',
              'source-layer': 'building',
              filter: ['==', 'extrude', 'true'],
              type: 'fill-extrusion',
              minzoom: 15,
              paint: {
                'fill-extrusion-color': '#aaa',
        
                // use an 'interpolate' expression to add a smooth transition effect to the
                // buildings as the user zooms in
                'fill-extrusion-height': [
                  'interpolate',
                  ['linear'],
                  ['zoom'],
                  15,
                  0,
                  15.05,
                  ['get', 'height']
                ],
                'fill-extrusion-base': [
                  'interpolate',
                  ['linear'],
                  ['zoom'],
                  15,
                  0,
                  15.05,
                  ['get', 'min_height']
                ],
                'fill-extrusion-opacity': 0.6
              }
            },
            labelLayerId
          );
        } else {
          map.removeLayer('3d-buildings');
        }
      }

      function showBuilding(layers, show) {
        for (var i = 0; i < layers.length; i++) {
          if (layers[i].type !== 'fill-extrusion') {
            continue;
          }
          map.setLayoutProperty(layers[i].id, 'visibility', show ? 'visible' : 'none');
        }
      }

      window.DEBUG = {
        map: map
      };
    </script>
  </body>
</html>