xxxxxxxxxx
<head>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'mapboxgl.accessToken = 'pk.aYv_Ml8jnXB6O1NQYhw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/castmap/cj4kh761652312ro5l6st5hkx',
center: [47.59955, -122.32795],
zoom: 16,
pitch: 45,
bearing: -17.6
});
map.on('load', function() {
map.addLayer({
'id': 'parcels',
'source': {
type: 'vector',
url: 'mapbox://castmap.1avtkb7p'
},
'source-layer': 'arts_orgs_parcels-6me37z',
'type': 'fill',
'minzoom': 10,
'maxzoom': 20,
'paint': {
'fill-color': 'hsl(49, 100%, 51%)',
'fill-opacity': 0.2
}
});
map.addLayer({
'id': 'extruded_buildings',
'source': {
type: 'vector',
url: 'mapbox://castmap.9s8movza'
},
'source-layer': 'arts_orgs_buildings-6tr0jv',
'type': 'fill-extrusion',
'minzoom': 10,
'maxzoom': 20,
'paint': {
'fill-extrusion-color': 'hsl(49, 100%, 51%)',
'fill-extrusion-height': {
'type': 'identity',
'property': 'height'
},
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 0.5
}
});
});
</script>
</body>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js