Built with blockbuilder.org
forked from anonymous‘s block: Mapbox GL JS Font Madness 1
forked from maptastik‘s block: Mapbox GL JS Font Madness 1
forked from maptastik‘s block: RLT 3D in Mapbox Gl JS
<!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.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.marker {
background-image: url('./icons/svgs/marker-15.svg');
background-size: cover;
width: 15px;
height: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/maptastik/cj6my6c0x083o2qnsdv3bewpx',
center: [-78.668133, 35.791295],
zoom: 18.5,
pitch: 45
});
map.on('load', function () {
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': {
// Geojson Data source used in vector tiles, documented at
// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
'type': 'geojson',
'data': 'https://gist.githubusercontent.com/maptastik/747ef842b5e24237adcb69e49246a38e/raw/fab0d2f8baa530f31723283a5353e4c4e119a1e8/rlt_bldg.geojson'
},
'paint': {
'fill-extrusion-color': {
'property': 'color',
'type': 'identity'
},
'fill-extrusion-height': {
'property': 'height',
'type': 'identity'
},
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 1
}
});
});
</script>
</body>
</html>
{
"features": [
{
"type": "Feature",
"properties": {
"@id": "way/520434141",
"building:part": "yes",
"height": 8,
"base_height": 8,
"color": "whitesmoke"
},
"geometry": {
"coordinates": [
[
[
-78.668252,
35.791409
],
[
-78.668114,
35.791343
],
[
-78.668066,
35.79141
],
[
-78.668074,
35.791413
],
[
-78.668058,
35.791435
],
[
-78.668168,
35.791489
],
[
-78.668184,
35.791467
],
[
-78.668203,
35.791476
],
[
-78.668252,
35.791409
]
]
],
"type": "Polygon"
},
"id": "1ac4f5e032170f2b39a19da7d94447bb"
},
{
"type": "Feature",
"properties": {
"@id": "way/520434139",
"building:part": "yes",
"height": 10,
"base_height": 10,
"color": "whitesmoke"
},
"geometry": {
"coordinates": [
[
[
-78.668549,
35.79104
],
[
-78.668351,
35.790948
],
[
-78.668284,
35.791048
],
[
-78.668326,
35.791098
],
[
-78.668243,
35.791212
],
[
-78.668207,
35.791194
],
[
-78.668175,
35.791239
],
[
-78.668328,
35.791312
],
[
-78.668468,
35.791121
],
[
-78.668482,
35.791128
],
[
-78.668549,
35.79104
]
]
],
"type": "Polygon"
},
"id": "1c11c0a9f44b67b84d0c536211e7634e"
},
{
"type": "Feature",
"properties": {
"@id": "way/520434142",
"building:part": "yes",
"height": 10,
"base_height": 10,
"color": "whitesmoke"
},
"geometry": {
"coordinates": [
[
[
-78.668168,
35.791489
],
[
-78.668058,
35.791435
],
[
-78.668039,
35.791426
],
[
-78.667949,
35.791551
],
[
-78.667926,
35.79154
],
[
-78.667866,
35.791622
],
[
-78.667962,
35.791668
],
[
-78.667972,
35.791653
],
[
-78.668023,
35.791677
],
[
-78.668035,
35.791659
],
[
-78.668068,
35.791675
],
[
-78.668105,
35.791624
],
[
-78.668112,
35.791627
],
[
-78.668201,
35.791505
],
[
-78.668168,
35.791489
]
]
],
"type": "Polygon"
},
"id": "aa62b91319c65a9e144894b6b80e2807"
},
{
"type": "Feature",
"properties": {
"@id": "way/520434140",
"building:part": "yes",
"height": 15,
"base_height": 15,
"color": "whitesmoke"
},
"geometry": {
"coordinates": [
[
[
-78.668328,
35.791312
],
[
-78.668175,
35.791239
],
[
-78.668151,
35.791271
],
[
-78.668114,
35.791343
],
[
-78.668252,
35.791409
],
[
-78.668286,
35.791425
],
[
-78.668357,
35.791326
],
[
-78.668328,
35.791312
]
]
],
"type": "Polygon"
},
"id": "ca10d7399fa32c840ed6d8eac5de20b7"
}
],
"type": "FeatureCollection"
}