Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></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.21.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
​
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHVjYXN3b2oiLCJhIjoiNWtUX3JhdyJ9.WtCTtw6n20XV2DwwJHkGqQ';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: {
  "version": 8,
  "name": "Bright",
  "metadata": {
    "mapbox:autocomposite": true,
    "mapbox:groups": {
      "1444849345966.4436": {
        "name": "Roads",
        "collapsed": true
      },
      "1444849334699.1902": {
        "name": "Bridges",
        "collapsed": true
      }
    }
  },
  "sources": {
    "mapbox": {
      "url": "mapbox://mapbox.mapbox-streets-v7",
      "type": "vector"
    }
  },
  "sprite": "mapbox://sprites/mapbox/bright-v8",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "layers": [
    {
      "interactive": true,
      "layout": {
        "line-cap": "round",
        "line-join": "round",
        "visibility": "visible"
      },
      "metadata": {
        "mapbox:group": "1444849345966.4436"
      },
      "filter": [
        "all",
        [
          "in",
          "class",
          "secondary",
          "tertiary"
        ],
        [
          "!in",
          "structure",
          "bridge",
          "tunnel"
        ]
      ],
      "type": "line",
      "source": "mapbox",
      "id": "road_secondary_tertiary_casing",
      "paint": {
        "line-color": "#e9ac77",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              8,
              1.5
            ],
            [
              20,
              17
            ]
          ]
        },
        "line-opacity": 1
      },
      "source-layer": "road"
    },
    {
      "interactive": true,
      "metadata": {
        "mapbox:group": "1444849345966.4436"
      },
      "id": "road_secondary_tertiary",
      "paint": {
        "line-color": "#fea",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              6.5,
              0
            ],
            [
              8,
              0.5
            ],
            [
              20,
              13
            ]
          ]
        }
      },
      "ref": "road_secondary_tertiary_casing"
    },
    {
      "interactive": true,
      "layout": {
        "line-join": "round"
      },
      "metadata": {
        "mapbox:group": "1444849334699.1902"
      },
      "filter": [
        "all",
        [
          "==",
          "structure",
          "bridge"
        ],
        [
          "in",
          "class",
          "secondary",
          "tertiary"
        ]
      ],
      "type": "line",
      "source": "mapbox",
      "id": "bridge_secondary_tertiary_casing",
      "layout": {
        "line-cap": "round"
      },
      "paint": {
        "line-color": "#e9ac77",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              8,
              1.5
            ],
            [
              20,
              17
            ]
          ]
        },
        "line-opacity": 1
      },
      "source-layer": "road"
    },
    {
      "interactive": true,
      "metadata": {
        "mapbox:group": "1444849334699.1902"
      },
      "id": "bridge_secondary_tertiary",
      "paint": {
        "line-color": "#0f0",
        "line-width": {
          "base": 1.2,
          "stops": [
            [
              6.5,
              0
            ],
            [
              7,
              0.5
            ],
            [
              20,
              10
            ]
          ]
        }
      },
      "ref": "bridge_secondary_tertiary_casing"
    }
  ]
},
    center: { lat: 38.29861860978207, lng: -122.28341345917275},
    zoom: 17 // starting zoom
});
</script>
​
</body>
</html>
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers