Skip to content

Instantly share code, notes, and snippets.

@tafsiri

tafsiri/README.md

Created September 8, 2016 21:50
Show Gist options
  • Save tafsiri/271115dc58c1a26fa8317597ef8e18f2 to your computer and use it in GitHub Desktop.
Save tafsiri/271115dc58c1a26fa8317597ef8e18f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Tangram Colors.

Notes

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
<!-- Main tangram library -->
<script src="https://mapzen.com/tangram/0.8/tangram.min.js"></script>
<script src="https://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" />
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#map {
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map');
var layer = Tangram.leafletLayer({
scene: 'scene.yaml',
attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | &copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>'
});
layer.addTo(map);
// Manarola
map.setView([44.1068212,9.7283914], 18);
// Amalfi
// map.setView([40.6343752,14.6019822], 18);
var updateConfig = function() {
window.requestAnimationFrame(function() {
scene.updateConfig();
});
}
function createControls() {
var directional = QuickSettings.create(50, 70, 'Directional Light');
var spotlight = QuickSettings.create(50, 40, 'Spotlight');
var pointlight = QuickSettings.create(50, 10, 'Point Light');
directional.setCollapsible(true);
spotlight.setCollapsible(true);
pointlight.setCollapsible(true);
directional.collapse();
spotlight.collapse();
pointlight.collapse();
// Directional
directional.addBoolean('D.visible', true);
directional.addColor('D.diffuse', '#313131');
directional.addColor('D.ambient', '#313131');
directional.addColor('D.specular', '#313131');
directional.addRange('D.direction.x', -1, 1, 0, 0.05);
directional.addRange('D.direction.y', -1, 1, 0, 0.05);
directional.addRange('D.direction.z', -1, 1, -0.5, 0.05);
// Point
pointlight.addBoolean('P.visible', false);
pointlight.addColor('P.diffuse', '#313131');
pointlight.addColor('P.ambient', '#313131');
pointlight.addColor('P.specular', '#313131');
pointlight.addRange('P.position.x', -1000, 1000, 0, 10);
pointlight.addRange('P.position.y', -1000, 1000, 0, 10);
pointlight.addRange('P.position.z', 0, 500, 100, 5);
pointlight.addRange('P.radius.inner', 0, 500, 300, 5);
pointlight.addRange('P.radius.outer', 0, 1000, 500, 5);
// spotlight
spotlight.addBoolean('S.visible', false);
spotlight.addColor('S.diffuse', '#313131');
spotlight.addColor('S.ambient', '#313131');
spotlight.addColor('S.specular', '#313131');
spotlight.addRange('S.position.x', -1000, 1000, 0, 10);
spotlight.addRange('S.position.y', -1000, 1000, 0, 10);
spotlight.addRange('S.position.z', 0, 500, 100, 5);
spotlight.addRange('S.direction.x', -1, 1, 0.3, 0.05);
spotlight.addRange('S.direction.y', -1, 1, 0.3, 0.05);
spotlight.addRange('S.direction.z', -1, 1, 0, 0.1);
spotlight.addRange('S.angle', 0, 360, 20, 1);
spotlight.addRange('S.exponent', 0, 1, 0.2, 0.05);
function handleChange() {
var dl = {
visible: directional.getBoolean('D.visible'),
diffuse: directional.getColor('D.diffuse'),
ambient: directional.getColor('D.ambient'),
specular: directional.getColor('D.specular'),
direction: [
directional.getRangeValue('D.direction.x'),
directional.getRangeValue('D.direction.y'),
directional.getRangeValue('D.direction.z')
]
};
var pl = {
visible: pointlight.getBoolean('P.visible'),
diffuse: pointlight.getColor('P.diffuse'),
ambient: pointlight.getColor('P.ambient'),
specular: pointlight.getColor('P.specular'),
position: [
pointlight.getRangeValue('P.position.x'),
pointlight.getRangeValue('P.position.y'),
pointlight.getRangeValue('P.position.z')
],
radius: [
pointlight.getRangeValue('P.radius.inner'),
pointlight.getRangeValue('P.radius.outer')
]
};
var sl = {
visible: spotlight.getBoolean('S.visible'),
diffuse: spotlight.getColor('S.diffuse'),
ambient: spotlight.getColor('S.ambient'),
specular: spotlight.getColor('S.specular'),
direction: [
spotlight.getRangeValue('S.direction.x'),
spotlight.getRangeValue('S.direction.y'),
spotlight.getRangeValue('S.direction.z')
],
position: [
spotlight.getRangeValue('S.position.x'),
spotlight.getRangeValue('S.position.y'),
spotlight.getRangeValue('S.position.z')
],
angle: spotlight.getRangeValue('S.angle'),
exponent: spotlight.getRangeValue('S.exponent')
};
var config = scene.config;
_.merge(config.lights.directional, dl);
_.merge(config.lights.point, pl);
_.merge(config.lights.spot, sl);
updateConfig();
}
directional.setGlobalChangeHandler(handleChange);
pointlight.setGlobalChangeHandler(handleChange);
spotlight.setGlobalChangeHandler(handleChange);
}
var scene = layer.scene;
scene.subscribe({
error: function (e) {
console.log('scene error:', e);
},
warning: function (e) {
console.log('scene warning:', e);
},
load: function () {
console.log('scene load complete');
createControls();
}
});
</script>
</body>
Raw
scene.yaml
cameras:
camera1:
type: perspective
lights:
directional:
visible: true
type: directional
direction: [0, 1, -.5]
diffuse: .8
ambient: .55
point:
visible: false
type: point
position: [0, 0, 100]
origin: ground
ambient: .3
diffuse: 1
specular: .2
spot:
visible: false
type: spotlight
position: [0, 0, 100]
direction: [0, 1, -.5]
origin: ground
ambient: .3
diffuse: 1
specular: .2
angle: 0.2
sources:
osm:
type: TopoJSON
url: https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-jvpqPNW
max_zoom: 16
global:
manarola:
- "#9C1352"
- "#C9AA9A"
- "#DF6568"
- "#F7B63E"
- "#C4607D"
- "#C99A74"
- "#C7BBB1"
- "#B16070"
- "#C1A163"
- "#A69797"
- "#E18065"
- "#D7B76C"
- "#DE936F"
- "#D2BCD8"
- "#B8CCEA"
randomCol: |
function() {
return global.manarola[Math.floor(Math.random()*global.manarola.length)];
}
indexCol: |
function(index) {
return global.manarola[index % global.manarola.length];
}
layers:
earth:
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: '#C4B295'
landuse:
visible: true
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: '#C4B295'
forest:
filter: function() { return feature.protect_class }
draw:
polygons:
order: function() { return feature.sort_key; }
color: '#84932D'
water:
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: '#183969'
roads:
data: { source: osm }
filter:
not: { kind: ["path", "rail"] }
draw:
lines:
order: function() { return feature.sort_key; }
color: '#6e6e6e'
width: 8
cap: round
minor_road:
filter:
kind: minor_road
draw:
lines:
order: function() { return feature.sort_key; }
color: '#cfcfcf'
width: 5
buildings:
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: |
function () {
// var col = global.randomCol();
var col = global.indexCol(feature.area || 0);
return col;
}
3d-buildings:
filter: { $zoom: { min: 15 } }
draw:
polygons:
extrude: function () { return (Math.random() * 30) + 10 }
pois:
data: { source: osm }
draw:
points:
order: function() { return feature.sort_key; }
color: rgb(41, 34, 6)
size: 0
text:
text_source: name
font:
family: Arial
size: 14px
style: italic
weight: bold
fill: '#222222'
stroke: { color: white, width: 2 }
transform: uppercase
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment