block by wboykinm 97c5317889f3860b5917

97c5317889f3860b5917

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mapbox GL JS Examples</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.0/mapbox-gl.js'></script>
<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;
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
  
map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'pencil-v4.json', //stylesheet location
  center: [36.97319, -122.03552], // starting position
  zoom: 14, // starting zoom
  bearing: 90,
  hash: true
});
</script>
</body>
</html>

pencil-v4.json

{
  "version": 4,
  "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/pencil",
  "glyphs": "https://mapbox.s3.amazonaws.com/gl-glyphs-256/{fontstack}/{range}.pbf",
  "constants": {
    "@land": "rgba(0,0,0,0)",
    "@water": "#73b6e6",
    "@park": "#c8df9f",
    "@road": "#fefefe",
    "@border": "#6d90ab",
    "@wood": "#33AA66",
    "@building": "#d9ccbe",
    "@building_outline": "#d2c6b9",
    "@text": "#000000",
    "@satellite_brightness_low": 0,
    "@satellite_brightness_high": 1,
    "@satellite_saturation": 2,
    "@satellite_spin": 0
  },
  "sources": {
    "mapbox": {
      "type": "vector",
      "url": "mapbox://mapbox.mapbox-streets-v6-dev"
    }
  },
  "layers": [{
    "id": "background",
    "style": {
      "background-color": "@land",
      "background-image": "natural_paper"
    },
    "type": "background"
  }, {
    "id": "park",
    "source": "mapbox",
    "source-layer": "landuse",
    "filter": { "class": "park" },
    "style": {
      "fill-color": "@park",
      "fill-image": "shade_medium",
      "fill-antialias": true
    },
    "type": "fill"
  }, {
    "id": "park_outline",
    "source": "mapbox",
    "source-layer": "landuse",
    "filter": { "class": "park", "$type": "Polygon" },
    "style": {
      "line-image": "line_shade_22_1",
      "line-opacity": 0.7,
      "line-color": "#eeeeee",
      "line-width": {
        "stops": [[1.6468052936710817, 1.01], [12.751938909271168, 5.999999999999997]]
      }
    },
    "type": "line"
  }, {
    "id": "wood",
    "source": "mapbox",
    "source-layer": "landuse",
    "filter": { "class": "wood" },
    "style": {
      "fill-color": "@wood",
      "fill-opacity": 0.08,
      "fill-antialias": true
    },
    "type": "fill"
  }, {
    "id": "waterway",
    "source": "mapbox",
    "source-layer": "waterway",
    "style": {
      "line-color": "@water",
      "line-width": {
        "base": 1.01,
        "stops": [[6, 0.5], [19, 7]]
      }
    },
    "type": "line"
  }, {
    "id": "water",
    "source": "mapbox",
    "source-layer": "water",
    "style": {
      "fill-color": "@water",
      "fill-image": "shade_medium",
      "fill-antialias": true
    },
    "type": "fill"
  }, {
    "id": "roads",
    "layers": [{
      "id": "road_large_casing",
      "source": "mapbox",
      "source-layer": "road",
      "filter": { "class": ["motorway", "main"] },
      "render": {
        "line-cap": "butt",
        "line-join": "bevel"
      },
      "style": {
        "line-color": "rgba(152,152,152,1)",
        "line-width": 0,
        "line-opacity": {
          "base": 1.01,
          "stops": [[13.5, 0], [14.5, 1]]
        }
      },
      "type": "line"
    }, {
      "id": "road_regular_casing",
      "source": "mapbox",
      "source-layer": "road",
      "filter": { "class": ["street"] },
      "render": {
        "line-cap": "butt",
        "line-join": "bevel"
      },
      "style": {
        "line-color": "rgba(152,152,152,1)",
        "line-opacity": {
          "base": 1.01,
          "stops": [[13.5, 0], [14.5, 1]]
        },
        "line-width": {
          "stops": [[12.11458208048225, 1], [14.591807332175584, 6.999999999999999]]
        }
      },
      "type": "line"
    }, {
      "id": "road_limited",
      "source": "mapbox",
      "source-layer": "road",
      "filter": { "class": ["street_limited"] },
      "render": {
        "line-cap": "round",
        "line-join": "bevel",
        "line-round-limit": 0.7
      },
      "style": {
        "line-dasharray": [10, 2],
        "line-color": "@road",
        "line-image": "line_solid_7",
        "line-opacity": 0.7,
        "line-width": {
          "stops": [[12.11458208048225, 1], [14.591807332175584, 6.999999999999999]]
        }
      },
      "type": "line"
    }, {
      "id": "road_large",
      "ref": "road_large_casing",
      "style": {
        "line-color": "@road",
        "line-image": "line_double_20",
        "line-width": {
          "stops": [[11.11458208048225, 1], [15.31634927121565, 20]]
        }
      }
    }, {
      "id": "road_regular",
      "ref": "road_regular_casing",
      "style": {
        "line-image": "line_double_18",
        "line-color": "@road",
        "line-width": {
          "stops": [[13.353194706328917, 1], [15.459380810709622, 9.999999999999998]]
        }
      }
    }, {
      "id": "path",
      "source": "mapbox",
      "source-layer": "road",
      "filter": { "class": ["path"] },
      "render": {
        "line-cap": "round",
        "line-join": "bevel"
      },
      "style": {
        "line-color": "rgba(255,255,255,1)",
        "line-dasharray": [2, 2],
        "line-image": "line_dotted_8",
        "line-opacity": 0.7,
        "line-width": 2
      },
      "type": "line"
    }, {
      "id": "bridge_large_casing",
      "source": "mapbox",
      "source-layer": "bridge",
      "filter": { "class": ["motorway", "main"] },
      "style": {
        "line-color": "rgba(152,152,152,1)",
        "line-width": 0,
        "line-opacity": {
          "base": 1.01,
          "stops": [[12, 0], [13, 1]]
        }
      },
      "type": "line"
    }, {
      "id": "bridge_large",
      "ref": "bridge_large_casing",
      "style": {
        "line-color": "@road",
        "line-image": "line_double_20",
        "line-width": {
          "stops": [[11.11458208048225, 1], [15.31634927121565, 20]]
        }
      }
    }, {
      "id": "bridge_regular_casing",
      "source": "mapbox",
      "source-layer": "bridge",
      "filter": { "class": ["street", "street_limited"] },
      "style": {
        "line-color": "rgba(152,152,152,1)",
        "line-opacity": {
          "base": 1.01,
          "stops": [[13.5, 0], [14.5, 1]]
        },
        "line-width": {
          "stops": [[12.11458208048225, 1], [14.591807332175584, 6.999999999999999]]
        }
      },
      "type": "line"
    }, {
      "id": "bridge_regular",
      "ref": "bridge_regular_casing",
      "style": {
        "line-image": "line_double_18",
        "line-color": "@road",
        "line-width": {
          "stops": [[13.353194706328917, 1], [15.459380810709622, 9.999999999999998]]
        }
      }
    }],
    "style": {
      "composite-opacity": 1
    },
    "type": "composite"
  }, {
    "id": "building",
    "source": "mapbox",
    "source-layer": "building",
    "style": {
      "fill-color": "@building",
      "fill-antialias": true,
      "fill-image": "shade_medium",
      "fill-opacity": {
        "base": 1.01,
        "stops": [[12, 0], [13, 1]]
      }
    },
    "type": "fill"
  }, {
    "id": "building_outline",
    "source": "mapbox",
    "source-layer": "building",
    "filter": { "$type": "Polygon" },
    "render": {
      "line-cap": "butt",
      "line-join": "bevel"
    },
    "style": {
      "line-width": {
        "stops": [[13.875969454635584, 0], [16.353194706328917, 2.9999999999999996]]
      },
      "line-color": "@land",
      "line-opacity": 0.5,
      "line-image": "line_solid_7"
    },
    "type": "line"
  }, {
    "id": "borders",
    "source": "mapbox",
    "source-layer": "admin",
    "style": {
      "line-color": "rgba(0,0,0,0.3)",
      "line-width": 1
    },
    "type": "line"
  }]
}