2012-05-17 07:33:56 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
|
|
|
<title>Layer exploration app for GFW</title>
|
|
|
|
|
<link rel="shortcut icon" href="http://cartodb.com/favicon/favicon_32x32.ico" />
|
|
|
|
|
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
|
|
|
|
|
<link rel="stylesheet" href="lib/cartodb.css">
|
|
|
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
|
|
|
|
<script type="text/javascript" src="lib/wax.g.js"></script>
|
|
|
|
|
<script type="text/javascript" src="lib/cartodb-gmapsv3.js"></script>
|
|
|
|
|
<script type="text/javascript" src="lib/dat.gui.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="lib/underscore-min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="lib/backbone.js"></script>
|
|
|
|
|
<script type="text/javascript" src="lib/class.js"></script>
|
|
|
|
|
<script type="text/javascript" src="lib/backbone.cartodb.js"></script>
|
2012-05-17 08:03:29 +08:00
|
|
|
<script type="text/javascript" src="src/gfw.js"></script>
|
2012-05-17 07:33:56 +08:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
var gui;
|
|
|
|
|
function initialize() {
|
|
|
|
|
|
|
|
|
|
// initialise the google map
|
|
|
|
|
var map = new google.maps.Map(document.getElementById('map_canvas'), {
|
|
|
|
|
center: new google.maps.LatLng(0,110),
|
|
|
|
|
zoom: 5,
|
|
|
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE,
|
|
|
|
|
mapTypeControl: false
|
|
|
|
|
});
|
|
|
|
|
|
2012-05-24 05:34:19 +08:00
|
|
|
var forestHeight = new google.maps.ImageMapType({
|
|
|
|
|
getTileUrl: function(ll, z) {
|
|
|
|
|
var X = ll.x % (1 << z); // wrap
|
|
|
|
|
return "http://api.tiles.mapbox.com/v3/cartodb.Forest-Height-Test/" + z + "/" + X + "/" + ll.y + ".png";
|
|
|
|
|
},
|
|
|
|
|
tileSize: new google.maps.Size(256, 256),
|
|
|
|
|
isPng: true,
|
|
|
|
|
maxZoom: 7,
|
|
|
|
|
name: "Forest Height",
|
|
|
|
|
alt: "Global forest height"
|
|
|
|
|
});
|
2012-05-25 06:52:32 +08:00
|
|
|
var forestSoft = new google.maps.ImageMapType({
|
|
|
|
|
getTileUrl: function(ll, z) {
|
|
|
|
|
var X = ll.x % (1 << z); // wrap
|
|
|
|
|
return "http://api.tiles.mapbox.com/v3/cartodb.global-forest-height/" + z + "/" + X + "/" + ll.y + ".png";
|
|
|
|
|
},
|
|
|
|
|
tileSize: new google.maps.Size(256, 256),
|
|
|
|
|
isPng: true,
|
|
|
|
|
maxZoom: 7,
|
|
|
|
|
name: "Forest Height",
|
|
|
|
|
alt: "Global forest height"
|
|
|
|
|
});
|
2012-05-24 05:34:19 +08:00
|
|
|
|
|
|
|
|
map.mapTypes.set('forests', forestHeight);
|
2012-05-25 06:52:32 +08:00
|
|
|
map.mapTypes.set('forests_soft', forestSoft);
|
2012-05-24 05:34:19 +08:00
|
|
|
var Road = function(){
|
|
|
|
|
this.Road = function(){
|
|
|
|
|
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
|
|
|
|
|
map.setOptions({styles: null});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
var Satellite = function(){
|
|
|
|
|
this.Satellite = function(){
|
|
|
|
|
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
|
|
|
|
|
map.setOptions({styles: null});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
var Forest = function(){
|
|
|
|
|
this.Forest = function(){
|
|
|
|
|
map.setMapTypeId('forests');
|
|
|
|
|
map.setOptions({styles: null});
|
|
|
|
|
}
|
|
|
|
|
}
|
2012-05-25 06:52:32 +08:00
|
|
|
var ForestSoft = function(){
|
|
|
|
|
this.ForestSoft = function(){
|
|
|
|
|
map.setMapTypeId('forests_soft');
|
|
|
|
|
map.setOptions({styles: null});
|
|
|
|
|
}
|
|
|
|
|
}
|
2012-05-24 05:34:19 +08:00
|
|
|
|
|
|
|
|
var map_style = {};
|
|
|
|
|
map_style.google_maps_customization_style = [ { stylers: [ { saturation: -65 }, { gamma: 1.52 } ] }, { featureType: "administrative", stylers: [ { saturation: -95 },{ gamma: 2.26 } ] }, { featureType: "water", elementType: "labels", stylers: [ { visibility: "off" } ] }, { featureType: "administrative.locality", stylers: [ { visibility: 'off' } ] }, { featureType: "road", stylers: [ { visibility: "simplified" }, { saturation: -99 }, { gamma: 2.22 } ] }, { featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" } ] }, { featureType: "road.arterial", stylers: [ { visibility: 'off' } ] }, { featureType: "road.local", elementType: "labels", stylers: [ { visibility: 'off' } ] }, { featureType: "transit", stylers: [ { visibility: 'off' } ] }, { featureType: "road", elementType: "labels", stylers: [ { visibility: 'off' } ] },{ featureType: "poi", stylers: [ { saturation: -55 } ] } ];
|
|
|
|
|
|
|
|
|
|
var Soft = function(){
|
|
|
|
|
this.Soft = function(){
|
|
|
|
|
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
|
|
|
|
|
map.setOptions({styles: map_style.google_maps_customization_style});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2012-05-17 07:33:56 +08:00
|
|
|
dat.GUI.DEFAULT_WIDTH = 300;
|
|
|
|
|
gui = new dat.GUI();
|
2012-05-24 05:34:19 +08:00
|
|
|
var bl = gui.addFolder("Basemap Style");
|
|
|
|
|
bl.add(new Road(), 'Road');
|
|
|
|
|
bl.add(new Satellite(), 'Satellite');
|
|
|
|
|
bl.add(new Soft(), 'Soft').name('Soft toned');
|
2012-05-25 06:52:32 +08:00
|
|
|
bl.add(new Forest(), 'Forest').name('Forest height');
|
|
|
|
|
bl.add(new ForestSoft(), 'ForestSoft').name('Forest height (soft)');
|
2012-05-17 07:33:56 +08:00
|
|
|
|
2012-05-24 22:14:42 +08:00
|
|
|
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
|
|
|
|
|
map.setOptions({styles: map_style.google_maps_customization_style});
|
2012-05-17 08:03:29 +08:00
|
|
|
GFW(function(env) {
|
|
|
|
|
GFW.app = new env.app.Instance(map, {
|
2012-05-17 07:33:56 +08:00
|
|
|
user : 'wri-01',
|
|
|
|
|
layerTable : 'layerinfo',
|
|
|
|
|
logging : true
|
|
|
|
|
});
|
2012-05-17 08:03:29 +08:00
|
|
|
GFW.app.run();
|
|
|
|
|
GFW.env = env;
|
2012-05-17 07:33:56 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="initialize()">
|
|
|
|
|
<div id="map_canvas"></div>
|
|
|
|
|
<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
