Some zooming optimization
This commit is contained in:
parent
24dfb5ca1b
commit
f5f52a776d
3 changed files with 66 additions and 524 deletions
|
|
@ -1,507 +1,9 @@
|
|||
/* CSS Document */
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
#canvas-wrap {
|
||||
position:relative
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font: normal normal 400 14px/145% "Roboto", Tahoma, Geneva, "Trebuchet MS", Helvetica, sans-serif;
|
||||
padding: 0 0 5em 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: normal normal 300 3em/140% "Roboto", Tahoma, Geneva, "Trebuchet MS", Helvetica, sans-serif;
|
||||
margin: 1em 0 .5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #6bc32d;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #3f7c14;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 1170px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
div.container section {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #333333;
|
||||
background: linear-gradient(to bottom, #d0d0d0 0%,#f0f0f0 100%);
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #333;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
#overlay {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
header.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
header > nav {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header > nav a {
|
||||
background-color: transparent;
|
||||
color: #666;
|
||||
display: block;
|
||||
height: 80px;
|
||||
line-height: 100px;
|
||||
padding: 0 1em;
|
||||
text-decoration: none;
|
||||
transition: 250ms background-color linear;
|
||||
}
|
||||
|
||||
header > nav > ul > li:hover > a,
|
||||
header > nav a:hover {
|
||||
background-color: #ccc;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
header > nav > ul > li.active > a,
|
||||
header > nav > ul > li.active:hover > a,
|
||||
header > nav .active a:hover {
|
||||
background-color: #666;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
header > nav a > i {
|
||||
font-size: 1.5em;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
header > nav > .logo {
|
||||
background: transparent url("../img/world_data_logo.png") no-repeat 0 0%;
|
||||
float: left;
|
||||
font-size: 2em;
|
||||
font-weight: 500;
|
||||
line-height: 1000px;
|
||||
margin-right: 2em;
|
||||
overflow: hidden;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
header > nav > .logo:hover {
|
||||
background-color: transparent;
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
header > nav > ul {
|
||||
float: left;
|
||||
list-style: none none inside;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
header > nav > ul > li {
|
||||
border-right: 1px solid #ccc;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
header > nav > ul > li:first-child {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
nav a#pull {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rest-api-block {
|
||||
background-color: #fcfcfc;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-top-color: #6bc32d;
|
||||
box-shadow: 0px 2px 6px #ddd;
|
||||
padding: 1em;
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rest-api-block h2 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.rest-api-block p {
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
|
||||
.rest-api-block p.sep {
|
||||
border-top: 1px dashed #ccc;
|
||||
margin-top: 2em;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.rest-api-block p > label {
|
||||
color: #a1a1a1;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rest-api-block p > input {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
font-size: 1.2em;
|
||||
padding: .1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submit {
|
||||
|
||||
}
|
||||
|
||||
.submit > input {
|
||||
background-color: #333333;
|
||||
background: linear-gradient(to bottom, #66cc33 0%,#339900 100%);
|
||||
border: 1px solid #339900;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
line-height: 1.4em;
|
||||
padding: .4em .9em;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.green_btn {
|
||||
width: 45%;
|
||||
background-color: #333333;
|
||||
background: linear-gradient(to bottom, #66cc33 0%,#339900 100%);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font: 99% sans-serif;
|
||||
line-height: 1.4em;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
padding: .1em;
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
|
||||
.info_box {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.failure {
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
border-color: #d43f3a;
|
||||
}
|
||||
.success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c;
|
||||
}
|
||||
.warning {
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
border-color: #eea236;
|
||||
}
|
||||
|
||||
.table-ctrl {
|
||||
color: #999;
|
||||
margin: 1.5em 0 .5em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.table-ctrl > div {
|
||||
float: left;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.table-ctrl > div.right {
|
||||
float: right;
|
||||
margin-left: 2em;
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-ctrl > div > p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table-ctrl > div > ul {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table-ctrl > div > ul > li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table-ctrl > div > ul > li:before {
|
||||
content: " | ";
|
||||
}
|
||||
|
||||
.table-ctrl > div > ul > li:first-child:before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.table-ctrl > div > ul > li > a.active {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table > thead > tr > th,
|
||||
table > tbody > tr > td {
|
||||
padding: .75em .4em .75em 0;
|
||||
}
|
||||
|
||||
table > thead > tr > th {
|
||||
border-bottom: 3px solid #ccc;
|
||||
font-size: 1.2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table > thead > tr > th.actions {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
table > tbody > tr > td {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
table > tbody > tr > td.actions {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
table > tbody > tr > td > img {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
table > tbody > tr > td.actions > a {
|
||||
font-size: 1.5em;
|
||||
margin-left: .3em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer > .container {
|
||||
border-top: 1px solid #6bc32d;
|
||||
color: #666;
|
||||
font-size: .9em;
|
||||
margin-top: 5em;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
footer > .container > div {
|
||||
float: left;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
footer > .container > div.right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
|
||||
/********************************************************
|
||||
**************** menu *********************************
|
||||
*********************************************************/
|
||||
|
||||
/* only if you like to broke up the menu in two lines:
|
||||
|
||||
@media screen and (max-width: 815px) {
|
||||
nav {
|
||||
height: auto;
|
||||
}
|
||||
nav ul {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
nav li {
|
||||
width: 50%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
nav li a {
|
||||
border-bottom: 1px solid #576979;
|
||||
border-right: 1px solid #576979;
|
||||
}
|
||||
nav a {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
text-indent: 25px;
|
||||
}
|
||||
}*/
|
||||
@media only screen and (max-width : 815px) {
|
||||
div.container section {
|
||||
margin-top: 0px;
|
||||
}
|
||||
nav {
|
||||
height: auto;
|
||||
border-bottom: 0;
|
||||
}
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
header > nav > ul {
|
||||
display: none;
|
||||
}
|
||||
nav ul {
|
||||
width: 100%;
|
||||
display: none;
|
||||
height: auto;
|
||||
}
|
||||
nav a#pull {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
text-align: right;
|
||||
}
|
||||
nav ul li {
|
||||
width: 100%;
|
||||
}
|
||||
header > nav a {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
nav a {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
nav > a.logo {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 816px) {
|
||||
nav ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width : 320px) {
|
||||
nav li {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
nav li a {
|
||||
border-bottom: 1px solid #576979;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************************
|
||||
**************** large devices ************************
|
||||
*********************************************************/
|
||||
@media (max-width:1280px) {
|
||||
|
||||
/* hi-res laptops and desktops */
|
||||
|
||||
}
|
||||
@media (max-width:1024px) {
|
||||
|
||||
/* big landscape tablets, laptops, and desktops */
|
||||
|
||||
.container {
|
||||
width: 1024px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************************
|
||||
**************** medium devices *********************
|
||||
*********************************************************/
|
||||
@media (max-width:960px) {
|
||||
|
||||
/* tablet, landscape iPad, lo-res laptops ands desktops */
|
||||
|
||||
.container {
|
||||
width: 960px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width:640px) {
|
||||
|
||||
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
|
||||
|
||||
.container {
|
||||
width: 640px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************************
|
||||
**************** small devices ************************
|
||||
*********************************************************/
|
||||
@media (max-width:480px) {
|
||||
|
||||
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
|
||||
|
||||
.container {
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width:319px) {
|
||||
|
||||
/* smartphones, iPhone, portrait 480x320 phones */
|
||||
|
||||
.container {
|
||||
width: 319px;
|
||||
max-width: 100%;
|
||||
}
|
||||
top:20px;
|
||||
left:30px;
|
||||
}
|
||||
|
|
@ -39,21 +39,49 @@ let camera;
|
|||
let renderer;
|
||||
var light;
|
||||
|
||||
function setup_enables() {
|
||||
function setup_flags() {
|
||||
flags = [
|
||||
{ id: "birth_rate_per_1000", enabled: true, color: 0xff0000 },
|
||||
{ id: "cell_phones_per_100", enabled: true, color: 0x0ff000 },
|
||||
{ id: "children_per_woman", enabled: true, color: 0x00ff00 },
|
||||
{ id: "electricity_consumption_per_capita", enabled: true, color: 0x000ff0 },
|
||||
{ id: "gdp_per_capita", enabled: true, color: 0x0000ff },
|
||||
{ id: "gdp_per_capita_growth", enabled: true, color: 0xf0000f },
|
||||
{ id: "inflation_annual", enabled: true, color: 0xf000f0 },
|
||||
{ id: "internet_user_per_100", enabled: true, color: 0x00f00f },
|
||||
{ id: "life_expectancy", enabled: true, color: 0xf00f00 },
|
||||
{ id: "military_expenditure_percent_of_gdp", enabled: true, color: 0x0f00f0 },
|
||||
{ id: "birth_rate_per_1000", name: "Birth Rate / 100", enabled: true, color: 0xff0000 },
|
||||
{ id: "cell_phones_per_100", name: "Cell Phones / 100", enabled: false, color: 0x0ff000 },
|
||||
{ id: "children_per_woman", name: "Children / Woman", enabled: false, color: 0x00ff00 },
|
||||
{ id: "electricity_consumption_per_capita", name: "Electricity Consumption / Capita", enabled: false, color: 0x000ff0 },
|
||||
{ id: "gdp_per_capita", name: "GDP / Capita", enabled: false, color: 0x0000ff },
|
||||
{ id: "gdp_per_capita_growth", name: "GDP / Capita Growth", enabled: false, color: 0xf0000f },
|
||||
{ id: "inflation_annual", name: "Inflation Annual", enabled: false, color: 0xf000f0 },
|
||||
{ id: "internet_user_per_100", name: "Internet User / 100", enabled: false, color: 0x00f00f },
|
||||
{ id: "life_expectancy", name: "Life Expectancy", enabled: false, color: 0xf00f00 },
|
||||
{ id: "military_expenditure_percent_of_gdp", name: "Military Expenditure % of GDP", enabled: false, color: 0x0f00f0 },
|
||||
];
|
||||
}
|
||||
|
||||
function setup_checkboxes() {
|
||||
let checkboxes = "<table>";
|
||||
|
||||
for (let i = 0; i < flags.length; i++) {
|
||||
let flag = flags[i];
|
||||
|
||||
checkboxes += "<tr><td>";
|
||||
checkboxes += "<input type=\"checkbox\"";
|
||||
|
||||
if (flag.enabled) {
|
||||
checkboxes += " checked";
|
||||
}
|
||||
|
||||
checkboxes += ">" + flag.name + "</input>";
|
||||
|
||||
checkboxes += "</td></tr>";
|
||||
checkboxes += "\n";
|
||||
}
|
||||
|
||||
checkboxes = "</table>";
|
||||
|
||||
let overlay = document.getElementById("overlay");
|
||||
|
||||
if (overlay != null) {
|
||||
overlay.innerHTML = checkboxes;
|
||||
}
|
||||
}
|
||||
|
||||
function setup() {
|
||||
mappa = new Mappa('MapboxGL', key);
|
||||
myMap = mappa.tileMap(options);
|
||||
|
|
@ -66,7 +94,6 @@ function setup() {
|
|||
|
||||
camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
|
||||
camera.up = new THREE.Vector3(0, 0, 1);
|
||||
//camera.position.z = 300;
|
||||
|
||||
scene = new THREE.Scene();
|
||||
renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas });
|
||||
|
|
@ -85,7 +112,8 @@ function setup() {
|
|||
myMap.overlay(canvas);
|
||||
myMap.onChange(update);
|
||||
|
||||
setup_enables();
|
||||
setup_flags();
|
||||
setup_checkboxes();
|
||||
|
||||
update();
|
||||
}
|
||||
|
|
@ -105,8 +133,7 @@ function setup_objects() {
|
|||
if (flag.enabled) {
|
||||
let value = tableData_global[i][flag.id];
|
||||
|
||||
// TODO: value
|
||||
let height = value / 10.0;
|
||||
let height = value / 20.0;
|
||||
let geometry = new THREE.BoxGeometry(1, 1, height);
|
||||
let material = new THREE.MeshBasicMaterial({ color: flag.color });
|
||||
let cube = new THREE.Mesh(geometry, material);
|
||||
|
|
@ -137,11 +164,20 @@ function draw() { }
|
|||
function update() {
|
||||
setup_objects();
|
||||
|
||||
let position = myMap.pixelToLatLng(window.innerWidth / 2, window.innerHeight / 2);
|
||||
let pos = myMap.pixelToLatLng(window.innerWidth / 2, window.innerHeight / 2);
|
||||
|
||||
let look_at = new THREE.Vector3(position.x, position.y, 0);
|
||||
camera.position.set(look_at.x, look_at.y - 10, look_at.z + 30);
|
||||
camera.lookAt(look_at);
|
||||
let zoom = myMap.zoom();
|
||||
let view;
|
||||
|
||||
if (zoom == 0) {
|
||||
view = new THREE.Vector3(0, -10.0, 30.0);
|
||||
} else {
|
||||
view = new THREE.Vector3(0, -10 + (2.5 * (4 - zoom)), 30 + (7.5 * (4 - zoom)));
|
||||
}
|
||||
|
||||
let center = new THREE.Vector3(pos.x, pos.y, 0);
|
||||
camera.position.set(view.x + center.x, view.y + center.y, view.z + center.z);
|
||||
camera.lookAt(center);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
|
@ -25,7 +25,11 @@
|
|||
|
||||
<body>
|
||||
|
||||
<canvas id="mapa"></canvas>
|
||||
<div id="canvas-wrap">
|
||||
<canvas id="mapa" width="800" height="600"></canvas>
|
||||
<div id="overlay"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/webgl.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue