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
license: mit |
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" | |
} |